/* ==== bundled from: css/base.css ==== */
:root {
  --shell-max-width: 1200px;
  --shell-padding: 24px;
  --indicator-circle-size: 22px;
  --primary: #1648c5;
  --bg: #f1f4fa;
  --surface: #ffffff;
  --text-primary: #0a1428;
  --text-secondary: #4a566f;
  --border: #cdd7ea;
  --border-subtle: #d8e1f1;
  --border-strong: #a8b7d5;
  --accent: #1648c5;
  --accent-2: #0f2f70;
  --gradient: linear-gradient(135deg, #1648c5, #0a1330);
  --sunken: #e6ecf7;
  --panel-muted: #eef2fb;
  --panel-background: #ffffff;
  --muted-foreground: #4a566f;
  --shadow-xs: 0 6px 14px rgba(10, 20, 40, 0.05);
  --shadow-sm: 0 12px 30px rgba(10, 20, 40, 0.08);
  --tag-bg: #e1e9f7;
  --radius-lg: 16px;
  --radius-pill: 24px;
  --shadow-soft: 0 16px 40px rgba(0, 0, 0, 0.08);
  --shadow-card: 0 10px 26px rgba(0, 0, 0, 0.06);
  --focus-ring: rgba(22, 72, 197, 0.4);
  --menu-icon-gap: 8px;
  --primary-500: #1648c5;
  --primary-100: #e3ecff;
  --primary-700: #0f2f70;
  --success-500: #2f9e62;
  --success-100: #e1f6ea;
  --success-700: #1d6a3f;
  --highlight-500: #f0b429;
  --highlight-100: #fff3d6;
  /* #8C5600 rather than #b98010. Every ramp here is a -100 tint, a -500 edge
     and a -700 ink, and dashboard.css's `.status-pill` variants read -700 as
     the ink for all four. Measured as ink on their own -100 tints in light:
     success 5.83:1, draft 6.16:1, danger 5.03:1 -- and highlight 3.09:1, so it
     was the one ramp whose ink had never been darkened to match its siblings
     rather than a ramp that meant something else. 5.53:1 now, and 6.09:1 on
     white. Dark was already 10.91:1 and does not move. */
  --highlight-700: #8C5600;
  --draft-500: #6b6eff;
  --draft-100: #ebeaff;
  --draft-700: #4648b8;
  --danger-500: #e04b4b;
  --danger-100: #ffe3e3;
  --danger-700: #b13636;
  --gray-900: #0a1428;
  --gray-700: #4a566f;
  --gray-500: #7b879f;
  --gray-200: #d8e1f1;
  --gray-50: #f1f4fa;
  --pill-bg: #1d3f99;
  --pill-bg-hover: #16337e;
  --pill-border: #112968;
  --pill-border-hover: #0d204f;
  --pill-text: #f7f9ff;
  --hub-neutral-black: #0a1428;
  --hub-neutral-blue-900: #111f42;
  --hub-text-strong: #0a1428;
  --hub-text-default: #243552;
  --hub-text-muted: #4a566f;
  --hub-surface-base: #ffffff;
  --hub-surface-muted: #eef2fb;
  --hub-card-radius: 16px;
  --hub-card-shadow: 0 12px 30px rgba(10, 20, 40, 0.08);
  --hub-space-12: 12px;
  --hub-space-16: 16px;
  --hub-space-24: 24px;
  --hub-heading-xl: 2.2rem;
  --hub-heading-lg: 1.3rem;
  --hub-heading-md: 1.1rem;
  --hub-body-lg: 1.05rem;
  --hub-body-md: 0.96rem;
}

.fa-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.fa-solid {
  fill: currentColor;
}

[data-theme="light"] {
  --primary: #1648c5;
  --bg: #f1f4fa;
  --surface: #ffffff;
  --text-primary: #0a1428;
  --text-secondary: #4a566f;
  --border: #cdd7ea;
  --border-subtle: #d8e1f1;
  --border-strong: #a8b7d5;
  --accent: #1648c5;
  --accent-2: #0f2f70;
  --gradient: linear-gradient(135deg, #1648c5, #0a1330);
  --sunken: #e6ecf7;
  --panel-muted: #eef2fb;
  --panel-background: #ffffff;
  --muted-foreground: #4a566f;
  --shadow-xs: 0 6px 14px rgba(10, 20, 40, 0.05);
  --shadow-sm: 0 12px 30px rgba(10, 20, 40, 0.08);
  --tag-bg: #e1e9f7;
  --shadow-soft: 0 16px 40px rgba(0, 0, 0, 0.08);
  --shadow-card: 0 10px 26px rgba(0, 0, 0, 0.06);
  --primary-500: #1648c5;
  --primary-100: #e3ecff;
  --primary-700: #0f2f70;
  --success-500: #2f9e62;
  --success-100: #e1f6ea;
  --success-700: #1d6a3f;
  --highlight-500: #f0b429;
  --highlight-100: #fff3d6;
  --highlight-700: #8C5600;  /* see the note in the block above */
  --draft-500: #6b6eff;
  --draft-100: #ebeaff;
  --draft-700: #4648b8;
  --danger-500: #e04b4b;
  --danger-100: #ffe3e3;
  --danger-700: #b13636;
  --gray-900: #0a1428;
  --gray-700: #4a566f;
  --gray-500: #7b879f;
  --gray-200: #d8e1f1;
  --gray-50: #f1f4fa;
  --pill-bg: #1d3f99;
  --pill-bg-hover: #16337e;
  --pill-border: #112968;
  --pill-border-hover: #0d204f;
  --pill-text: #f7f9ff;
  --surface-1: #fafafa;
  --surface-2: #f0f0f0;
  --muted: #888;
}

[data-theme="dark"] {
  --primary: #2f6ae8;
  --bg: #070d18;
  --surface: #0d1424;
  --text-primary: #e9eef9;
  --text-secondary: #a6b2c9;
  --border: #1f2a42;
  --border-subtle: #1f2a42;
  --border-strong: #3a4b6c;
  --accent: #2f6ae8;
  --accent-2: #9dc2ff;
  --gradient: linear-gradient(135deg, #2f6ae8, #0a1024);
  --sunken: #0b1322;
  --panel-muted: #111b30;
  --panel-background: #111b30;
  --muted-foreground: #a6b2c9;
  --shadow-xs: 0 8px 24px rgba(0, 0, 0, 0.32);
  --shadow-sm: 0 12px 30px rgba(0, 0, 0, 0.38);
  --tag-bg: #16233a;
  --shadow-soft: 0 16px 46px rgba(0, 0, 0, 0.28);
  --shadow-card: 0 10px 28px rgba(0, 0, 0, 0.2);
  --primary-500: #2f6ae8;
  --primary-100: #142245;
  --primary-700: #9dc2ff;
  --success-500: #33c07a;
  --success-100: #133528;
  --success-700: #b6f2d4;
  --highlight-500: #f2c14f;
  --highlight-100: #3a2a0d;
  --highlight-700: #ffe1a3;
  --draft-500: #7b7dff;
  --draft-100: #1d1e47;
  --draft-700: #c9caff;
  --danger-500: #ff6b6b;
  --danger-100: #3a1515;
  --danger-700: #ffb3b3;
  --gray-900: #e9eef9;
  --gray-700: #a6b2c9;
  --gray-500: #7d8aa6;
  --gray-200: #1f2a42;
  --gray-50: #0b111d;
  --pill-bg: #2a56be;
  --pill-bg-hover: #234aa6;
  --pill-border: #4f83ff;
  --pill-border-hover: #79a2ff;
  --pill-text: #f7f9ff;
  --hub-neutral-black: #e9eef9;
  --hub-neutral-blue-900: #9dc2ff;
  --hub-text-strong: #e9eef9;
  --hub-text-default: #c7d4ed;
  --hub-text-muted: #a6b2c9;
  --hub-surface-base: #0d1424;
  --hub-surface-muted: #111b30;
  --hub-card-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
  --surface-1: #111b30;
  --surface-2: #0b1322;
  --muted: #a6b2c9;
}

.hub-shared-page {
  gap: var(--hub-space-24);
}

.hub-shared-card {
  background: var(--hub-surface-base);
  border: 1px solid var(--border);
  border-radius: var(--hub-card-radius);
  box-shadow: var(--hub-card-shadow);
}

.hub-shared-card-muted {
  background: var(--hub-surface-muted);
}

.hub-stack-12 {
  display: grid;
  gap: var(--hub-space-12);
}

.hub-stack-16 {
  display: grid;
  gap: var(--hub-space-16);
}

.hub-stack-24 {
  display: grid;
  gap: var(--hub-space-24);
}

.hub-heading-xl,
.hub-heading-lg,
.hub-heading-md,
.hub-body-lg,
.hub-body-md {
  margin: 0;
  color: var(--hub-text-strong);
}

.hub-heading-xl {
  font-size: var(--hub-heading-xl);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.hub-heading-lg {
  font-size: var(--hub-heading-lg);
  letter-spacing: -0.01em;
  line-height: 1.28;
}

.hub-heading-md {
  font-size: var(--hub-heading-md);
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.hub-body-lg {
  font-size: var(--hub-body-lg);
  line-height: 1.6;
  color: var(--hub-text-default);
}

.hub-body-md {
  font-size: var(--hub-body-md);
  line-height: 1.55;
  color: var(--hub-text-muted);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--sx-font-body, 'Geist', 'Inter', 'SF Pro Display', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  background: var(--bg);
  color: var(--text-primary);
  text-align: left;
  min-height: 100vh;
  line-height: 1.6;
  letter-spacing: -0.01em;
}

.modal-open {
  overflow: hidden;
}

a {
  color: inherit;
}

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}

.page-shell {
  width: 100%;
  max-width: var(--shell-max-width);
  margin: 0 auto;
  padding: 0 var(--shell-padding);
}

.shell-flush .page-shell {
  padding-inline: 0;
}
header {
  padding: 0;
}

.impersonation-banner {
  width: 100%;
  background: #6b4423;
  color: #fff7e9;
  border-bottom: 1px solid rgba(255, 247, 233, 0.2);
}

.impersonation-banner-shell {
  min-height: 44px;
  padding: 8px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.impersonation-banner-text {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
}

.impersonation-end-session {
  border-color: rgba(255, 247, 233, 0.65);
  color: #fff7e9;
  background: rgba(255, 247, 233, 0.08);
}

.impersonation-end-session:hover,
.impersonation-end-session:focus-visible {
  border-color: #fff7e9;
  background: rgba(255, 247, 233, 0.2);
}

/* ---------------------------------------------------------------------------
 * Toasts — Sigrix Refined §07 anatomy.
 * Five intent variants (loading / success / error / warn / info), shared
 * anatomy (icon · title · optional desc · optional progress · optional
 * actions · close). Default placement is bottom-right; top-center for
 * system-wide alerts; top-right for inbox-adjacent. Legacy class names
 * (.toast--warning, .toast--restriction, .toast--ongoing) are kept as
 * aliases so existing call sites keep working unchanged.
 * --------------------------------------------------------------------------- */

.toast-container {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 999;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  pointer-events: none;
  max-width: min(460px, calc(100vw - 32px));
}

.toast-container--top-center {
  bottom: auto;
  top: 16px;
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  flex-direction: column;
}

.toast-container--top-right {
  bottom: auto;
  top: 16px;
  right: 16px;
  flex-direction: column;
}

.toast-card {
  position: relative;
  width: min(420px, calc(100vw - 32px));
  background: var(--toast-bg, var(--surface));
  color: var(--text-primary);
  border-radius: 14px;
  box-shadow:
    0 0 0 1px var(--toast-border, var(--border-subtle)) inset,
    var(--shadow-card);
  padding: 12px 10px 12px 14px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: auto;
  overflow: hidden;
}

.toast-container--top-center .toast-card,
.toast-container--top-right .toast-card {
  transform: translateY(-8px);
}

.toast-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.toast-card.is-hiding {
  opacity: 0;
  transform: translateY(8px);
}

.toast-container--top-center .toast-card.is-hiding,
.toast-container--top-right .toast-card.is-hiding {
  transform: translateY(-8px);
}

.toast-icon {
  width: 24px;
  height: 24px;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--toast-accent, var(--accent));
  flex-shrink: 0;
  margin-top: 1px;
}

.toast-icon svg {
  width: 18px;
  height: 18px;
}

.toast-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
  padding-top: 1px;
}

.toast-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.toast-message {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
}

.toast-message:empty {
  display: none;
}

.toast-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sx-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.toast-meta:empty {
  display: none;
}

.toast-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.toast-actions:empty {
  display: none;
}

.toast-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.005em;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  font-family: inherit;
  transition: background 120ms, color 120ms, box-shadow 120ms;
}

.toast-btn--primary {
  background: var(--text-primary);
  color: var(--surface);
}

.toast-btn--primary:hover,
.toast-btn--primary:focus-visible {
  background: var(--text-secondary);
}

.toast-btn--ghost {
  color: var(--text-secondary);
  box-shadow: 0 0 0 1px var(--border-subtle) inset;
}

.toast-btn--ghost:hover,
.toast-btn--ghost:focus-visible {
  color: var(--text-primary);
  box-shadow: 0 0 0 1px var(--border-strong) inset;
}

.toast-action {
  align-self: flex-start;
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.toast-action:hover,
.toast-action:focus-visible {
  text-decoration: underline;
}

.toast-close {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 120ms, color 120ms;
}

.toast-close:hover,
.toast-close:focus-visible {
  background: color-mix(in srgb, var(--toast-accent, var(--accent)) 12%, transparent);
  color: var(--text-primary);
  outline: 2px solid transparent;
}

/* Intent tints — Sigrix spec uses a soft surface tint instead of the bolder
 * solid pastel of the previous design. */
.toast--info {
  --toast-accent: var(--primary-500);
  --toast-bg: var(--surface);
  --toast-border: var(--border-subtle);
}

.toast--loading,
.toast--ongoing {
  --toast-accent: var(--primary-500);
  --toast-bg: color-mix(in srgb, var(--primary-500) 8%, var(--surface));
  --toast-border: color-mix(in srgb, var(--primary-500) 28%, transparent);
}

.toast--success {
  --toast-accent: var(--success-500);
  --toast-bg: color-mix(in srgb, var(--success-500) 8%, var(--surface));
  --toast-border: color-mix(in srgb, var(--success-500) 30%, transparent);
}

.toast--warn,
.toast--warning {
  --toast-accent: var(--highlight-500);
  --toast-bg: color-mix(in srgb, var(--highlight-500) 10%, var(--surface));
  --toast-border: color-mix(in srgb, var(--highlight-500) 32%, transparent);
}

.toast--error,
.toast--restriction {
  --toast-accent: var(--danger-500);
  --toast-bg: color-mix(in srgb, var(--danger-500) 8%, var(--surface));
  --toast-border: color-mix(in srgb, var(--danger-500) 30%, transparent);
}

.toast-icon--spinner svg {
  animation: toast-spinner-rotate 0.7s linear infinite;
}

.toast-progress {
  position: relative;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  background: color-mix(in srgb, var(--toast-accent, var(--accent)) 18%, transparent);
  margin-top: 4px;
}

.toast-progress-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: var(--toast-accent, var(--accent));
  transition: width 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.toast-progress-bar--indeterminate {
  width: 36%;
  animation: toast-progress-indeterminate 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Top-edge "life" countdown bar — drains as auto-dismiss approaches.
 * The provider sets inline transform + transition on the inner div to
 * animate scaleX(1) → scaleX(0) over the dismiss window. */
.toast-life {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: color-mix(in srgb, var(--text-primary) 14%, transparent);
  opacity: 0.6;
  overflow: hidden;
}

.toast-life > div {
  height: 100%;
  background: var(--toast-accent, var(--accent));
  width: 100%;
  transform-origin: left center;
  transform: scaleX(1);
  will-change: transform;
}

/* Mini / ambient pill — for persistent indicators (autosave, "you're offline"). */
.toast-card--mini {
  width: auto;
  max-width: 280px;
  padding: 8px 10px 8px 12px;
  border-radius: 999px;
  gap: 8px;
}

.toast-card--mini .toast-title {
  font-size: 13px;
  font-weight: 500;
}

.toast-card--mini .toast-icon {
  width: 16px;
  height: 16px;
}

.toast-card--mini .toast-icon svg {
  width: 14px;
  height: 14px;
}

.toast-card--mini .toast-message,
.toast-card--mini .toast-progress,
.toast-card--mini .toast-actions,
.toast-card--mini .toast-life {
  display: none;
}

@keyframes toast-spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes toast-progress-indeterminate {
  0% {
    transform: translateX(-110%);
  }
  50% {
    transform: translateX(140%);
  }
  100% {
    transform: translateX(280%);
  }
}
.nav-dropdown {
  position: relative;
  display: inline-flex;
}

.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px;
  box-shadow: var(--shadow-card);
  min-width: 240px;
  display: none;
  flex-direction: column;
  gap: 6px;
  z-index: 12;
}

.nav-dropdown.is-open .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  display: flex;
}

.nav-dropdown.is-active .nav-dropdown-toggle {
  border-color: var(--accent);
  box-shadow: none;
  background: transparent;
}

.dropdown-link {
  display: block;
  text-decoration: none;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--text-primary);
  background: transparent;
}

.dropdown-link:hover,
.dropdown-link:focus-visible {
  border-color: var(--border);
  background: var(--sunken);
}

.dropdown-link.is-active {
  border-color: var(--accent);
  background: transparent;
  box-shadow: none;
}
.global-search {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-width: 200px;
  max-width: 360px;
}

@media (max-width: 768px) {
  .global-search {
    min-width: 0;
    max-width: 100%;
  }
}

.global-search-results {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 16px 40px rgba(10, 20, 40, 0.12), 0 2px 6px rgba(10, 20, 40, 0.04);
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 360px;
  overflow-y: auto;
  z-index: 20;
}

[data-theme="dark"] .global-search-results {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.25);
}

.search-results-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.search-section-title {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-secondary);
  padding: 4px 4px 2px;
}

.search-results-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.search-result-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  text-decoration: none;
  color: var(--text-primary);
  background: transparent;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.search-result-item:hover,
.search-result-item:focus-visible {
  border-color: var(--border);
  background: var(--sunken);
  outline: none;
}

.search-result-title {
  font-weight: 600;
}

.search-result-meta {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.search-result-thumb {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--sunken);
}

.search-result-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.search-empty {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
  padding: 4px 6px;
}

.auth-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Sign-in-unavailable callout, anchored under the Sign in / Get started
 * buttons (.auth-wrapper is position: relative).
 *
 * It must stay OUT of the nav's flex row. The row is already full at desktop
 * widths, so an in-flow strip has nowhere to go: it wrapped into a ~14ch
 * column that grew taller than the 61px header, spilling above and below it,
 * and pushed the "Use email instead" link past the right edge of the viewport
 * where it could not be clicked. Absolute positioning takes it out of flow
 * entirely, which is the same trick #login-dropdown already uses. */
.login-inline-status {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 9; /* under #login-dropdown's 10 */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 8px;
  width: max-content;
  max-width: min(260px, calc(100vw - 2 * var(--pad-mobile)));
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--danger-500);
  border-radius: 10px;
  background: var(--danger-100);
  box-shadow: 0 10px 24px rgba(10, 20, 40, 0.12);
  color: var(--danger-700);
  font-size: 0.75rem;
  line-height: 1.35;
  text-align: left;
}

.login-inline-status.hidden {
  display: none;
}

/* While the dropdown is open the same failure is spelled out in full inside
 * it (#login-status), and the two would overlap — so the callout stands down. */
body.is-login-dropdown-open .login-inline-status {
  display: none;
}

.login-inline-status-icon {
  grid-column: 1;
  width: 14px;
  height: 14px;
  margin-top: 1px;
}

.login-inline-status-text {
  grid-column: 2;
  overflow-wrap: anywhere;
}

.sx-nav .login-inline-status-link {
  grid-column: 2;
  justify-self: start;
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  white-space: nowrap;
}

.login-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: 24px 24px 20px;
  width: min(360px, calc(100vw - 2 * var(--pad-mobile)));
  max-width: calc(100vw - 2 * var(--pad-mobile));
  box-shadow: 0 24px 60px rgba(10, 20, 40, 0.14), 0 4px 12px rgba(10, 20, 40, 0.06);
  z-index: 10;
  text-align: center;
}

[data-theme="dark"] .login-dropdown {
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
}

.sx-nav .login-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.login-close:hover,
.login-close:focus-visible {
  background: var(--surface-2, rgba(0, 0, 0, 0.04));
  color: var(--text-primary);
}
.login-close svg { width: 18px; height: 18px; }

.sx-nav .login-eyebrow {
  display: none; /* Mobile sheet header — see sx-nav-actions.css ≤900px. */
  margin: 0;
}

.login-brand {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}
/* The gradient square (components/sx_logo_mark.html's sx_logo_tile) paints its
 * own fill and its own rounded corners, so nothing here sets a background or
 * an ink colour. `border-radius` stays because the box-shadow follows the CSS
 * box rather than the paint — drop it and a rounded tile casts a square
 * shadow. 12px is the CSS match for the tile's own rx at 44px (26/100 * 44). */
.login-brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: block;
  box-shadow: 0 6px 18px rgba(61, 77, 255, 0.28);
}

.login-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.login-heading {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sx-nav .login-title {
  margin: 0;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.login-subtitle {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
}
.sx-nav .login-subtitle a {
  color: var(--text-primary);
  font-weight: 600;
  border-bottom: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.18));
  padding-bottom: 1px;
  text-decoration: none;
}
.sx-nav .login-subtitle a:hover { border-bottom-color: currentColor; }

.login-oauth {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.login-oauth-google {
  display: flex;
  justify-content: center;
  width: 100%;
  min-height: 44px;
}

/* Google renders its button into this container, and disableLogin() empties it
 * again when sign-in is unavailable. Left expanded, its 44px floor plus the
 * column gap leaves a hole that reads as "still loading" directly above a
 * message saying it never will. */
.login-oauth-google:empty {
  display: none;
}
.login-oauth-google > div,
.login-oauth-google iframe {
  width: 100% !important;
  max-width: 100%;
  min-height: 44px;
}

/* The sign-in popover is anchored in the top bar, so it inherits whatever the
 * page's `<body>` scope resets. The `.sx` button reset (css/sx-home.css, which
 * ships later in the shell bundle than this file) used to be (0,1,0) — a tie
 * with a bare `.login-oauth-btn` — and stripped padding, background and border
 * on the ~half of templates that carry `.sx`. #5699 lowered it to
 * `:where(.sx) button` (0,0,1), so it no longer wins that tie; the scoping
 * below stays because it states which rule dresses the control. Scoping this
 * family `.sx-nav …` puts it
 * out of that tie; see the long note at the top of css/sx-nav-actions.css.
 * Scope the whole family or none of it: the variants below beat the base on
 * document order alone, so lifting only the base would cost `--primary` its
 * accent fill. */
.sx-nav .login-oauth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: 0 0 0 1px var(--border-subtle, rgba(0, 0, 0, 0.12)) inset;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  transition: background 140ms ease, box-shadow 140ms ease;
}
.sx-nav .login-oauth-btn:not([disabled]):hover {
  background: var(--surface-2, rgba(0, 0, 0, 0.03));
}
.sx-nav .login-oauth-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.sx-nav .login-oauth-btn--disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.5);
}
.sx-nav .login-oauth-btn--disabled:hover { background: var(--surface); }

.login-soon-pill {
  display: inline-flex;
  align-items: center;
  height: 18px;
  margin-left: auto;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--surface-2, rgba(0, 0, 0, 0.04));
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 0 0 1px var(--border-subtle, rgba(0, 0, 0, 0.1)) inset;
}

/* Inline magic-link email sign-in (#3014). Revealed when "Continue with email"
   is tapped; the input + button + "check your inbox" status stack vertically. */
.login-email-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.login-email-form[hidden] {
  display: none;
}
.login-email-input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: 0 0 0 1px var(--border-subtle, rgba(0, 0, 0, 0.12)) inset;
  font: inherit;
  font-size: 0.9rem;
}
.login-email-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent, #4f46e5) inset;
}
.sx-nav .login-oauth-btn--primary {
  background: var(--accent, #4f46e5);
  color: #fff;
  box-shadow: none;
}
.sx-nav .login-oauth-btn--primary:not([disabled]):hover {
  background: var(--accent-strong, #4338ca);
}
.sx-nav .login-oauth-btn--primary[disabled] {
  opacity: 0.6;
  cursor: default;
}
.sx-nav .login-email-sent {
  margin: 2px 0 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.sx-nav .login-email-sent[hidden] {
  display: none;
}
.login-email-sent.is-error {
  color: var(--danger, #dc2626);
}

.login-trust {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
}
.login-trust-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.login-trust-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 14px;
  font-size: 12px;
  color: var(--text-secondary);
}
.login-trust-list li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.login-trust-list svg { width: 12px; height: 12px; opacity: 0.8; }

.login-fineprint {
  margin: 0;
  font-size: 11.5px;
  color: var(--text-secondary);
  text-align: center;
}
.login-fineprint a {
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.18));
  padding-bottom: 1px;
  text-decoration: none;
}
.login-fineprint a:hover { color: var(--text-primary); }

.login-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-field.inline input {
  width: 100%;
}

.form-actions.compact {
  margin-top: 6px;
}

.form-actions.compact .primary-pill {
  padding: 10px 14px;
}

.form-status {
  min-height: 18px;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.form-status.error {
  color: #ff7b7b;
}

.form-status.success {
  color: var(--accent-2);
}

.form-field-error {
  margin: 6px 0 0;
  font-size: 0.85rem;
  line-height: 1.35;
  color: #ff7b7b;
}

.form-field-error.hidden {
  display: none;
}
.user-menu {
  position: relative;
}

.user-menu-toggle {
  border: 1px solid var(--border-subtle);
  background: var(--surface);
  padding: 3px 10px 3px 3px;
  height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.user-menu-toggle:hover,
.user-menu-toggle:focus-visible {
  background: var(--sunken);
  border-color: var(--border-subtle);
  outline: none;
}

.user-menu-toggle[aria-expanded="true"] {
  background: var(--sunken);
  border-color: var(--border-subtle);
}

.user-summary {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 16px 40px rgba(10, 20, 40, 0.12), 0 2px 6px rgba(10, 20, 40, 0.04);
  min-width: 280px;
  width: 300px;
  max-width: 320px;
  /* The design caps the panel at the viewport and scrolls the overflow
     (system/System - Top Bar.html -> `.sx-pop`). Without it a short screen
     simply loses every row past the fold: the panel is `position: absolute`
     inside the header, so the page cannot scroll to reach them and the
     Moderator / Admin / Log out section is unreachable rather than merely
     off-screen. 78px is the nav's 61px plus this panel's own 10px offset and
     a little breathing room, which is the design's own figure.

     The design's companion `@media (max-width: 520px)` branch — the panel
     going `position: fixed` with 12px insets — is deliberately NOT ported:
     at <= 900px `css/sx-nav-actions.css` hides the whole `.sx-nav-actions`
     row and the drawer takes over, so this panel never renders that narrow.
     Porting it would add a rule nothing can reach. */
  max-height: calc(100vh - 78px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

[data-theme="dark"] .user-summary {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.25);
}

.user-menu-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 10;
}

.user-menu-identity {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px;
  text-decoration: none;
  color: inherit;
  border-radius: 10px;
  transition: background-color 180ms ease;
}

.user-menu-identity:hover,
.user-menu-identity:focus-visible {
  background: var(--sunken);
  outline: none;
}

.user-menu-identity-avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  flex: 0 0 40px;
}

.user-menu-identity-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.user-menu-identity .user-name {
  margin: 0;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-menu-identity .user-role {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-role-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--panel-muted);
  color: var(--text-secondary);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border: 1px solid var(--border-subtle);
  white-space: nowrap;
}

.user-role-pill.hidden {
  display: none;
}

.user-summary-actions {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}

.user-menu-section {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0;
  border-bottom: 0;
}

.user-menu-section:empty {
  display: none;
}

.user-menu-section + .user-menu-section:not(:empty) {
  border-top: 1px solid var(--border-subtle);
  margin-top: 6px;
  padding-top: 6px;
}

.sx-nav .user-summary-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}

/* The sx design-system reset (sx-home.css) zeroes padding and border on every
 * <button> inside the shell. It shared specificity (0,1,0) with
 * `.user-summary-link` and is concatenated after base.css in the shell
 * bundle, so it stripped the padding + border off the <button> menu items
 * (Appearance, Log out) — leaving their icon and label ~11px left of the <a>
 * items, and their rows ~4px shorter. Re-assert the box at (0,1,1) so button
 * and link menu items line up pixel-for-pixel. */
.sx-nav button.user-summary-link {
  padding: 8px 10px;
  border: 1px solid transparent;
  line-height: 1.5;
}

.user-summary-link:hover,
.user-summary-link:focus-visible {
  background: var(--sunken);
  color: var(--text-primary);
  outline: none;
}

/* Account-switcher rows carry a second line (the masked address that tells two
 * accounts with the same display name apart), so the label becomes a stacked
 * block rather than the single inline span every other menu item uses. Written
 * against `.user-summary-link-label`, which every item now has, so the two
 * kinds of row keep identical padding and icon alignment. */
.user-summary-link-label {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

/* Trailing count on a menu row (Messages' owed replies). Mirrors the design's
 * `.sx-acct-item .cnt` (design: system/System - Top Bar.html → components.jsx).
 * `margin-left: auto` rather than a grid column, so a row with no count is
 * laid out exactly as every other row is. Hidden via [hidden] when zero — the
 * `.sx-nav` scope declares no `display` for it, so the UA rule wins and there
 * is no opt-out to write (see the `[hidden]` note in CLAUDE.md). */
.sx-nav .user-summary-link-count {
  margin-left: auto;
  flex: none;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  background: var(--sx-brand);
  color: #fff;
  font-family: var(--sx-font-mono);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.user-summary-link-sub {
  font-size: 0.75rem;
  font-weight: 400;
  /* `--text-secondary`, not `--text-muted`: the latter is declared only in
   * product-detail.css, so on every other page it resolves to nothing and the
   * declaration is dropped at computed-value time — leaving this line the same
   * colour as the label it is supposed to sit under. */
  color: var(--text-secondary);
  /* An address is longer than the menu is wide; clipping it keeps the popover
   * from growing past the nav it hangs off. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* `--text-secondary`, not `--text-muted`: the only declaration of the latter
 * in the tree is in product-detail.css, scoped to that sheet, and base.css
 * ships in all three sx-shell-*-bundle.css variants — one of which every page
 * loads — so on every page but one this `var()` resolved to nothing. With no fallback the declaration is then invalid at
 * computed-value time, and because `color` inherits, a disabled item simply
 * took the enabled colour instead of greying out. The `opacity: 0.6` below is
 * why that went unnoticed: it muted the row on its own, so the rule looked
 * like it was working. */
.user-summary-link.is-disabled {
  cursor: not-allowed;
  color: var(--text-secondary);
  background: transparent;
  opacity: 0.6;
}

.user-summary-link.is-disabled:hover,
.user-summary-link.is-disabled:focus-visible {
  background: transparent;
  color: var(--text-secondary);
}

.user-summary-link.is-logout {
  color: color-mix(in srgb, #d64545 85%, var(--text-primary));
}

.user-summary-link.is-logout:hover,
.user-summary-link.is-logout:focus-visible {
  color: #d64545;
  background: color-mix(in srgb, #d64545 10%, transparent);
}

.user-summary-link.is-logout:active {
  background: color-mix(in srgb, #d64545 16%, transparent);
}

.user-summary-link.is-logout .user-summary-icon {
  color: currentColor;
}

.user-summary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--text-secondary);
  line-height: 0;
}

.user-summary-link:hover .user-summary-icon,
.user-summary-link:focus-visible .user-summary-icon {
  color: var(--text-primary);
}

.user-summary-link.is-logout .user-summary-icon,
.user-summary-link.is-logout:hover .user-summary-icon {
  color: currentColor;
}

.user-summary-icon .fa-icon {
  display: block;
  width: 18px;
  height: 18px;
}

/* The design draws these rows' icons at 15px rather than the 18px a solid
   sprite glyph needs — an outline glyph reads at its full box, where a filled
   one reads at its ink. The wrapper keeps its 18px so the labels stay on the
   column they already line up on. */
.user-summary-icon .user-summary-glyph {
  display: block;
  width: 15px;
  height: 15px;
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--gradient);
  color: #0e0f14;
  font-weight: 800;
  letter-spacing: -0.01em;
  overflow: hidden;
  position: relative;
}

.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.avatar-fallback {
  width: 100%;
  text-align: center;
}

.avatar.has-image {
  background: var(--surface);
  color: var(--text-primary);
}

.avatar.has-image .avatar-image {
  display: block;
}

.avatar.has-image .avatar-fallback {
  display: none;
}

.user-name {
  margin: 0;
  font-weight: 700;
}

.user-role {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.ghost-button.subtle {
  background: transparent;
  box-shadow: none;
}

.ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  color: var(--text-primary);
  background: var(--surface);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(8, 16, 32, 0.08);
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 80ms ease;
}

/* Transparent at rest — it is a ghost button, and a tint here only eats the
   text's contrast headroom against the page. The tint belongs on hover. */
.ghost-button.danger {
  border-color: color-mix(in srgb, var(--danger-500), transparent 55%);
  color: var(--danger-700);
  background: transparent;
}

.ghost-button.danger:hover,
.ghost-button.danger:focus-visible {
  border-color: var(--danger-500);
  color: var(--danger-700);
  background: var(--danger-100);
}

.ghost-button:disabled,
.ghost-button[disabled] {
  opacity: 0.48;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  color: var(--text-secondary);
}

.ghost-button:hover,
.ghost-button:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--sunken);
  box-shadow: 0 8px 22px rgba(22, 72, 197, 0.15);
}
/* Sign in, in the top bar. Scoped `.sx-nav` for the same reason the login
 * popover below is — and, like it, as a whole family: this rule is the third
 * to match `<button id="login-toggle">` (after `.sx-nav-link` and
 * `.sx-nav-link--auth` in css/sx-nav-actions.css) and wins on document order
 * alone, because base.css ships in the shell bundle and those two ship in the
 * head bundle. Lifting only those two would hand the control their 34px/13.5px
 * instead of this rule's 32px/13px, on every page. */
.sx-nav .header-signin-link {
  white-space: nowrap;
  flex-shrink: 0;
  height: 32px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}

.sx-nav .header-signin-link:hover,
.sx-nav .header-signin-link:focus-visible {
  background: var(--sunken);
  color: var(--text-primary);
  outline: none;
}

.ghost-button.header-cta {
  white-space: nowrap;
  flex-shrink: 0;
  height: 32px;
  min-height: 0;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  background: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 60%, #000000) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 0 0 1px color-mix(in srgb, var(--accent) 60%, #000000);
  text-decoration: none;
}

.ghost-button.header-cta:hover,
.ghost-button.header-cta:focus-visible {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 88%, #000000) 0%, color-mix(in srgb, var(--accent) 50%, #000000) 100%);
  border: 0;
  color: #ffffff;
  outline: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 0 0 1px color-mix(in srgb, var(--accent) 60%, #000000), 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent);
}

.markdown-editor {
  display: flex;
  flex-direction: column;
  gap: 0;
  font-size: 14px;
  line-height: 1.5;
}

.markdown-editor textarea {
  width: 100%;
  font-size: inherit;
  line-height: inherit;
  font-family: inherit;
  padding: 12px 14px;
  border-radius: 0 0 10px 10px;
  border: 1px solid var(--border-subtle);
  border-top: none;
  background: var(--surface);
  color: var(--text-primary);
}

.markdown-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  padding: 6px;
  border: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 10px 10px 0 0;
  background: var(--sunken);
}

.markdown-toolbar-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  padding: 3px;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}

.markdown-toolbar-group:first-child {
  margin-left: auto;
}

.markdown-toolbar .ghost-button.subtle {
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0 6px 0 0;
  justify-content: flex-end;
  flex: 0 0 auto;
  box-sizing: border-box;
  font-size: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted-foreground);
  box-shadow: none;
}

.markdown-toolbar .ghost-button.subtle.is-active {
  border-color: var(--accent);
  color: #fff;
  background: var(--accent);
  box-shadow: none;
}

.markdown-toolbar .ghost-button.subtle:hover,
.markdown-toolbar .ghost-button.subtle:focus-visible {
  background: var(--panel-muted);
  color: var(--text-primary);
  border-color: var(--border-subtle);
}

.markdown-toolbar .ghost-button.subtle.is-active:hover,
.markdown-toolbar .ghost-button.subtle.is-active:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 85%, #000);
  color: #fff;
}

.markdown-toolbar .markdown-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.markdown-preview {
  margin-top: 8px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: var(--surface);
  padding: 12px 14px;
  color: var(--text-primary);
  font-weight: 400;
}

.markdown-preview p {
  margin: 0 0 12px;
}

.markdown-preview p:last-child {
  margin-bottom: 0;
}

.markdown-preview ul,
.markdown-preview ol {
  margin: 0 0 12px 20px;
}

.listing-markdown-content p {
  margin: 0 0 12px;
}

.listing-markdown-content p:last-child {
  margin-bottom: 0;
}

.listing-markdown-content ul,
.listing-markdown-content ol {
  margin: 0 0 12px 20px;
}

.markdown-preview code,
.listing-markdown-content code {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
  background: var(--panel-muted);
  padding: 0.1rem 0.3rem;
  border-radius: 6px;
}

.markdown-preview pre,
.listing-markdown-content pre {
  position: relative;
  background: var(--panel-muted);
  padding: 12px;
  border-radius: 10px;
  overflow-x: auto;
  margin: 0 0 12px;
  max-width: 100%;
}

.markdown-preview pre code,
.listing-markdown-content pre code {
  background: transparent;
  padding: 0;
  display: block;
}

.markdown-preview .copy-code-button {
  position: absolute;
  top: 8px;
  right: 8px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
}

.markdown-preview .copy-code-button:hover,
.markdown-preview .copy-code-button:focus-visible {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.markdown-preview .copy-code-button:active {
  transform: translateY(1px);
}

.markdown-preview .copy-code-button.is-copied {
  color: var(--accent);
  border-color: var(--accent);
}

.theme-toggle {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 0;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: color 180ms ease, opacity 180ms ease;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  background: transparent;
  border: none;
  color: var(--text-primary);
  outline: none;
}

.theme-toggle .icon {
  width: 18px;
  height: 18px;
  display: none;
  position: relative;
  line-height: 1;
}

.theme-toggle .icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}

[data-theme="dark"] .icon-moon,
[data-theme="light"] .icon-sun {
  display: block;
}

.icon-sun::before {
  content: "\e94a";
  mask-image: url('/static/icons/sun.svg');
  -webkit-mask-image: url('/static/icons/sun.svg');
}

.icon-moon::before {
  content: "\e930";
  mask-image: url('/static/icons/moon.svg');
  -webkit-mask-image: url('/static/icons/moon.svg');
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  min-width: 30px;
  color: var(--sx-text);
  font-family: var(--sx-font-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.brand:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 12px;
}

@media (max-width: 640px) {
  .brand {
    gap: 8px;
  }}

.landing-hero {
  padding: 10px 0 6px;
}

.landing-hero-shell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 36px 32px;
  box-shadow: none;
  display: grid;
  gap: 24px;
}

.landing-hero-shell.combined {
  gap: 24px;
  padding: 36px 32px 32px;
}

.landing-hero-top {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 28px;
  align-items: end;
}

.landing-hero-copy h2 {
  margin: 8px 0 12px;
  font-size: 2.8rem;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.landing-hero-card-group {
  display: grid;
  gap: 8px;
  align-self: end;
}

.landing-hero-card-group .hero-footnote {
  margin: 0 0 4px;
  color: var(--text-secondary);
}

.accent-rule {
  width: 68px;
  height: 3px;
  background: var(--accent);
  display: inline-block;
  margin-bottom: 12px;
}

.landing-hero-copy .lead {
  margin: 0 0 18px;
  font-size: 1.05rem;
  color: var(--text-secondary);
}

.builder-paths {
  margin: 0;
  padding: 14px 12px 16px;
  background: var(--sunken);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: grid;
  gap: 14px;
}

.builder-paths.inline {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.builder-paths-header {
  display: grid;
  gap: 10px;
  align-items: start;
}

.builder-paths .supporting-text {
  margin: 0;
  color: var(--text-secondary);
}

.builder-path-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.builder-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 20px;
  box-shadow: none;
  display: grid;
  gap: 14px;
}

.builder-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 6px;
  height: 20px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  border: 1px solid;
  white-space: nowrap;
  vertical-align: middle;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.pill-badge .pill-badge-icon {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  fill: currentColor;
  stroke: currentColor;
}

.pill-badge--sm {
  height: 17px;
  padding: 1px 7px 1px 5px;
  font-size: 0.66rem;
  gap: 3px;
}

.pill-badge--sm .pill-badge-icon {
  width: 10px;
  height: 10px;
}

.pill-badge--trusted_user {
  background: linear-gradient(135deg,
    var(--success-100, #e1f6ea) 0%,
    color-mix(in srgb, var(--success-100, #e1f6ea) 70%, #ffffff) 100%);
  color: var(--success-700, #1d6a3f);
  border-color: color-mix(in srgb, var(--success-700, #1d6a3f) 35%, transparent);
  box-shadow: 0 1px 2px rgba(31, 110, 63, 0.10),
              inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.pill-badge--admin {
  background: linear-gradient(135deg, #fff3d1 0%, #ffe39e 100%);
  color: #6b4500;
  border-color: rgba(107, 69, 0, 0.32);
  box-shadow: 0 1px 2px rgba(107, 69, 0, 0.14),
              inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.pill-badge--founding_seller {
  background: linear-gradient(135deg, #f3e3ff 0%, #e2c7ff 100%);
  color: #4a0e73;
  border-color: rgba(74, 14, 115, 0.35);
  box-shadow: 0 1px 2px rgba(74, 14, 115, 0.15),
              inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* #4000: polished_shop had no rule of its own here, so it rendered with none
 * of the three siblings' colour -- indigo keeps it clear of trusted_user's
 * green, admin's gold and founding_seller's violet above. */
.pill-badge--polished_shop {
  background: linear-gradient(135deg, #e2e5ff 0%, #c7cdff 100%);
  color: #1a1f6b;
  border-color: rgba(26, 31, 107, 0.35);
  box-shadow: 0 1px 2px rgba(26, 31, 107, 0.14),
              inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.pill-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08),
              inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* No hover lift inside a clickable card link to avoid double-motion. */
.product-card .pill-badge:hover {
  transform: none;
}

/* The standing notice a listing carries because of its category (#5689,
   settling #4511's second acceptance criterion) — today only Healthcare &
   Medical's "not medical advice" line. Rendered by
   components/listing_category_notice.html, which every listing-detail template
   calls. Styled here in base.css because that sheet is in every shell-bundle
   variant, so the ten detail pages need no rule of their own and no per-page
   dark-mode block.

   Every value is a token that base.css declares twice (:root and
   [data-theme="dark"]), and the pairing was measured rather than eyeballed:

     ink  --text-primary  on --highlight-100   16.81:1 light / 11.49:1 dark
     edge --highlight-700 on --highlight-100    5.53:1 light / 10.91:1 dark
     edge --highlight-700 on the page behind    6.09:1 light / 14.48:1 dark

   This note used to read "--highlight-700 is the *edge*, never the ink",
   because as text on its own tint it then measured 3.09:1 -- sub-AA in light,
   10.91:1 in dark, a disclaimer readable in exactly one theme. That was the
   right reading of the number and the wrong conclusion about the token: the
   ramp's three siblings all clear AA as ink on their own tints (success
   5.83:1, draft 6.16:1, danger 5.03:1) and `dashboard.css` reads -700 as the
   ink for all four `.status-pill` variants, so highlight was simply the one
   ramp whose ink had never been darkened. It is #8C5600 now and 5.53:1, so
   -700 *is* usable as ink here -- but --text-primary stays, being the higher
   contrast of the two and what this box was measured with.

   The edge is still what makes the box a box: the tint alone is 1.00:1
   against the light page background, differing in hue and not in luminance,
   so a borderless version reads as body copy.

   A <div>, not a <p>: sx-home.css's `.sx p { margin: 0 }` is (0,1,1) and beats
   any single class, so a paragraph would keep this margin on the non-.sx pages
   and silently lose it on the .sx-scoped ones. */
.listing-category-notice {
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid var(--highlight-700);
  border-radius: 10px;
  background: var(--highlight-100);
  color: var(--text-primary);
  font-size: 0.85rem;
  line-height: 1.45;
}

.pill-label {
  margin: 0;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--pill-bg), color-mix(in srgb, var(--pill-bg) 86%, #000000));
  color: var(--pill-text);
  border: 1px solid var(--pill-border);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.pill-label:focus-visible {
  outline: 2px solid var(--pill-text);
  outline-offset: 2px;
  background: linear-gradient(135deg, var(--pill-bg-hover), color-mix(in srgb, var(--pill-bg-hover) 88%, #000000));
  border-color: var(--pill-border-hover);
}

.card-subtitle {
  margin: 0;
  color: var(--text-secondary);
  font-weight: 600;
}

.builder-card h3 {
  margin: 0;
  font-size: 1.4rem;
}

.builder-card-body {
  margin: 0;
  color: var(--text-secondary);
}

.builder-points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  color: var(--text-secondary);
}

.builder-points li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
}

.builder-points .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}

.builder-card-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.builder-card-actions .builder-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--accent);
  padding: 6px 2px;
  border-bottom: 1px solid rgba(22, 72, 197, 0.35);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.builder-card-actions .builder-card-link:hover,
.builder-card-actions .builder-card-link:focus-visible {
  color: var(--accent-strong, var(--accent));
  border-color: var(--accent);
  outline: none;
}

.builder-card-actions .ghost-button {
  min-width: 180px;
  text-align: center;
  flex: 1 1 200px;
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  color: var(--accent);
  border-color: rgba(22, 72, 197, 0.4);
  background: var(--sunken);
  box-shadow: 0 10px 24px rgba(22, 72, 197, 0.12);
}

.builder-card-actions .ghost-button:hover,
.builder-card-actions .ghost-button:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  background: linear-gradient(135deg, rgba(22, 72, 197, 0.06), rgba(10, 19, 48, 0.04));
  box-shadow: 0 12px 26px rgba(22, 72, 197, 0.18);
}

#agent-path-button,
#assistant-path-button {
  flex-basis: 100%;
}

.path-panel {
  margin: 12px 0 10px;
  display: grid;
  gap: 10px;
}

.agent-placeholder {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 18px 16px;
  box-shadow: none;
  display: grid;
  gap: 10px;
}

.hero-cta {
  min-width: 140px;
  text-align: center;
}

.hero-cta.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.assistant-picker {
  margin: 22px 0 10px;
  padding: 22px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: none;
  display: grid;
  gap: 14px;
}

.assistant-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.assistant-picker-status {
  margin: 0;
  color: var(--text-secondary);
  display: none;
}

.assistant-picker-status.is-visible {
  display: block;
}

.assistant-picker-status.error {
  color: #f98f9d;
}

.assistant-platform-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.assistant-platform-buttons .ghost-button {
  min-width: 120px;
}

.assistant-platform-buttons .ghost-button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--primary-500) 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary-500) 35%, transparent), var(--shadow-card);
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--primary-500) 14%, transparent),
    color-mix(in srgb, var(--primary-100) 55%, transparent)
  );
}

.assistant-step {
  display: grid;
  gap: 10px;
}

.assistant-detail {
  background: var(--panel-muted);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Finalize/checkout layout CSS is owned by css/base.css because base.html loads style.css first and css/base.css last.
   Keep finalize selectors here so the later sheet remains the single source of truth for checkout cascade order. */
.assistant-shopping-layout {
  display: grid;
  gap: 14px;
  align-items: start;
}

.checkout-stepper {
  grid-area: stepper;
  grid-column: 1 / -1;
}

.checkout-stepper-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  display: flex;
  gap: 0;
}

.checkout-stepper-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 0 8px;
  position: relative;
  color: var(--text-secondary);
}

.checkout-stepper-item:not(:first-child)::before,
.checkout-stepper-item:not(:first-child)::after {
  content: "";
  position: absolute;
  top: 13px;
  left: -50%;
  width: 100%;
  height: 2px;
  border-radius: 999px;
}

.checkout-stepper-item:not(:first-child)::before {
  background: var(--border);
}

.checkout-stepper-item:not(:first-child)::after {
  background: var(--primary-500);
  opacity: 0;
}

.checkout-stepper-item.is-active,
.checkout-stepper-item.is-complete {
  color: var(--text-primary);
}

.checkout-stepper-item.is-active::after,
.checkout-stepper-item.is-complete::after {
  opacity: 1;
}

.checkout-stepper-marker {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex: 0 0 auto;
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--border) 75%, var(--surface));
  color: var(--text-secondary);
  position: relative;
  z-index: 1;
}

.checkout-stepper-item.is-active .checkout-stepper-marker {
  border-color: var(--primary-500);
  background: var(--surface);
  color: var(--primary-500);
  box-shadow: inset 0 0 0 4px var(--surface);
}

.checkout-stepper-item.is-complete .checkout-stepper-marker {
  border-color: var(--primary-500);
  background: var(--primary-500);
  color: #fff;
}

.checkout-stepper-check {
  font-size: 0.7rem;
}

.checkout-stepper-label {
  font-size: 0.85rem;
  font-weight: 600;
}

@media (max-width: 640px) {
  .checkout-stepper-label {
    font-size: 0.75rem;
  }
}

.guest-success-layout {
  gap: 12px;
  align-items: flex-start;
}

@media (min-width: 960px) {
  .guest-success-layout {
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr);
  }
}

.guest-success-layout #finalize-order-actions {
  display: grid;
  gap: 12px;
}

.guest-success-layout #finalize-order-actions,
.guest-success-layout #guest-purchases {
  padding: 16px;
}

.guest-success-layout #finalize-order-actions .embedded-guest-purchases {
  padding: 12px;
  margin-top: 2px;
}

.guest-success-layout #finalize-order-actions .checkout-summary-header,
.guest-success-layout #finalize-order-actions #finalize-hint {
  display: none;
}

.assistant-cart {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  box-shadow: var(--shadow-soft);
}

.assistant-cart-header {
  display: grid;
  gap: 4px;
  margin-bottom: 8px;
}

.assistant-cart-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.assistant-cart-count-badge {
  border-radius: var(--radius-pill);
  background: var(--sunken);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: 4px 10px;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.assistant-cart-subtext {
  margin: 0;
  color: var(--text-secondary);
}

.assistant-cart-confirmation {
  margin: 8px 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(47, 158, 98, 0.2);
  background: rgba(47, 158, 98, 0.12);
  display: grid;
  gap: 4px;
  animation: confirmation-enter 180ms ease-out;
}

.assistant-cart-confirmation-title {
  margin: 0;
  font-weight: 700;
  color: var(--text-primary);
}

.assistant-cart-confirmation-subtext {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

@keyframes confirmation-enter {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .assistant-cart-confirmation {
    animation: none;
  }
}

.assistant-cart-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.assistant-cart-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  transition: opacity 180ms ease, transform 180ms ease;
}

.assistant-cart-item.is-removing {
  opacity: 0;
  transform: translateY(6px);
}

.assistant-cart-details {
  display: grid;
  gap: 4px;
}

.assistant-cart-name {
  margin: 0;
  font-weight: 800;
}

.assistant-cart-author,
.assistant-cart-price,
.assistant-cart-trust {
  margin: 0;
  color: var(--text-secondary);
}

.assistant-cart-price {
  font-weight: 700;
  color: var(--text-primary);
}

.assistant-cart-trust {
  font-size: 0.85rem;
}

.assistant-cart-badge {
  width: 26px;
  height: 26px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel-muted);
  color: var(--text-secondary);
  font-weight: 700;
  font-size: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}

.assistant-cart-info-stack {
  display: grid;
  gap: 4px;
}

.assistant-cart-remove {
  display: flex;
  justify-content: flex-end;
}

.cart-remove-link {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  min-width: 32px;
  height: 32px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  cursor: pointer;
  transition: border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.cart-remove-link:hover,
.cart-remove-link:focus-visible {
  border-color: var(--danger-500);
  color: var(--danger-500);
  transform: translateY(-1px);
}

.cart-remove-button {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}

.cart-remove-button svg {
  width: 16px;
  height: 16px;
}

.cart-remove-button:hover,
.cart-remove-button:focus-visible {
  border-color: var(--accent);
  color: var(--text-primary);
}

.assistant-cart-total {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin-top: 12px;
}

.assistant-cart-total.is-free {
  justify-content: center;
  color: var(--accent-2);
}

.assistant-cart-total-message {
  margin: 0;
  font-weight: 600;
}

.assistant-cart-actions-footer {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cart-checkout-button {
  width: 100%;
  text-align: center;
  text-decoration: none;
}

.cart-checkout-hint {
  margin: 0;
  text-align: center;
  color: var(--text-secondary);
}

.checkout-summary {
  display: grid;
  gap: 14px;
  background: var(--panel-muted);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
}

.checkout-summary-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.checkout-summary-count {
  margin: 0;
  color: var(--text-secondary);
}

.checkout-summary-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.checkout-summary-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}

.checkout-summary-thumbnail {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--panel-background);
  flex-shrink: 0;
}

.checkout-summary-thumbnail-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.checkout-summary-thumbnail-image.is-fallback {
  object-fit: contain;
  padding: 6px;
  background: var(--panel-muted);
}

.checkout-summary-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.checkout-link-hint {
  display: block;
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.checkout-summary-details {
  display: grid;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.checkout-summary-name {
  margin: 0;
  font-weight: 800;
}

.checkout-summary-meta {
  margin: 0;
  color: var(--text-secondary);
}

@media (max-width: 640px) {
  .checkout-summary-item {
    align-items: flex-start;
  }

  .checkout-summary-thumbnail {
    width: 48px;
    height: 48px;
  }
}

.purchased-card {
  width: 100%;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  display: grid;
  gap: 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.purchased-card:hover,
.purchased-card:focus-within {
  border-color: var(--border-strong);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
}

.purchased-card-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
}

.purchased-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--sunken);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.purchased-card-content {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.purchased-card-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
}

.purchased-card-description {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.purchased-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.purchased-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.purchased-card-cta {
  min-width: 140px;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 10px;
  font-size: 0.9rem;
  letter-spacing: 0;
  box-shadow: none;
}

.purchased-card-more {
  font-size: 1.2rem;
  line-height: 1;
}

.purchased-card-more[disabled],
.purchased-card-more[aria-disabled='true'] {
  pointer-events: none;
  opacity: 0.45;
  cursor: default;
}

.checkout-type-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.checkout-type-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
}

.checkout-summary-line {
  margin: 0;
  font-weight: 800;
}

.checkout-summary-total {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

.checkout-summary-actions {
  display: flex;
  align-items: flex-start;
  flex: 0 0 auto;
}

.checkout-summary-remove {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
}

.checkout-summary-remove:hover,
.checkout-summary-remove:focus-visible {
  color: var(--text-primary);
  text-decoration: underline;
}

.assistant-selection-hint {
  margin: 0 0 8px;
  color: var(--text-secondary);
}

.checkout-actions-row {
  display: grid;
  gap: 10px;
}

.checkout-actions-row .primary-pill,
.checkout-actions-row .ghost-button {
  width: 100%;
  text-align: center;
}

.login-before-purchase-wrapper {
  position: relative;
  width: 100%;
}

.login-before-purchase-wrapper .login-dropdown {
  left: 0;
  right: auto;
}

.checkout-actions-row .tertiary-link {
  display: block;
  text-align: center;
  color: var(--text-secondary);
  font-weight: 600;
}

.checkout-actions-row .tertiary-link:hover,
.checkout-actions-row .tertiary-link:focus-visible {
  color: var(--text-primary);
  text-decoration: underline;
}

.purchased-instructions {
  margin-top: 10px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

details.purchased-instructions summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--text-primary);
}

details.purchased-instructions[open] summary {
  color: var(--accent);
}

.purchased-details-toggle {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
}

.purchased-details-toggle:hover {
  color: var(--text-primary);
}

.purchased-details-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.purchased-details {
  border-top: 1px solid var(--border);
  padding-top: 12px;
  display: grid;
  gap: 12px;
}

.assistant-setup-guide {
  border-top: 0;
  padding-top: 0;
}

.assistant-setup-field {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
}

.assistant-setup-label {
  font-weight: 600;
}

.assistant-setup-value {
  min-width: 0;
  white-space: pre-wrap;
}

.assistant-setup-value pre {
  position: relative;
  background: rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 8px 0 0;
  overflow-x: auto;
  font-size: 0.9em;
}

.assistant-setup-value code {
  font-family: 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New',
    monospace;
  background: rgba(15, 23, 42, 0.08);
  padding: 2px 6px;
  border-radius: 6px;
}

.assistant-setup-value pre code {
  display: block;
  background: transparent;
  padding: 0;
}

.assistant-setup-value .copy-code-button {
  position: absolute;
  top: 8px;
  right: 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
}

.assistant-setup-value .copy-code-button:hover,
.assistant-setup-value .copy-code-button:focus-visible {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.assistant-setup-value .copy-code-button:active {
  transform: translateY(1px);
}

.assistant-setup-value .copy-code-button.is-copied {
  color: var(--accent);
  border-color: var(--accent);
}

.purchased-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.purchased-tab {
  background: var(--sunken);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.purchased-tab[aria-selected='true'] {
  background: #fff;
  color: var(--text-primary);
  border-color: var(--border-strong);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06);
}

.purchased-tab:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.purchased-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.purchased-tab-panels {
  max-width: 680px;
}

.purchased-tab-panel {
  display: block;
}

.purchased-tab-panel[hidden] {
  display: none;
}

.purchased-tab-text {
  margin: 0;
  color: var(--text-secondary);
  white-space: pre-line;
}

.purchased-tab-pre {
  margin: 0;
  color: var(--text-secondary);
  white-space: pre-line;
  font-family: 'SFMono-Regular', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    'Liberation Mono', 'Courier New', monospace;
}

.purchased-prompt-block {
  position: relative;
  background: #f7f9fc;
  border: 1px solid #e6eaf2;
  border-radius: 10px;
  padding: 12px;
  max-height: 240px;
  overflow: auto;
}

.purchased-prompt-text {
  margin: 28px 0 0;
  white-space: pre-wrap;
  color: var(--text-primary);
  font-family: 'SFMono-Regular', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    'Liberation Mono', 'Courier New', monospace;
  font-size: 0.85rem;
}

.purchased-prompt-copy {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 4px 10px;
  font-size: 0.75rem;
}

.purchased-prompt-copy.is-copied {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent), transparent 40%);
}

.prompt-copy-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

.prompt-copy-row .checkout-summary-meta {
  margin: 0;
}

.prompt-copy-button {
  padding: 6px 12px;
  font-size: 0.9rem;
}

.prompt-copy-button.is-copied {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent), transparent 40%);
}

.instruction-body {
  margin: 8px 0 0;
  white-space: pre-line;
}

.assistant-requirements {
  margin: 0 0 12px 18px;
  color: var(--text-secondary);
  padding: 0;
}

.assistant-requirements li {
  margin: 4px 0;
}

.assistant-detail h3 {
  margin: 0 0 4px;
}

.assistant-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 10px;
  color: var(--text-secondary);
  font-weight: 700;
}

.assistant-summary-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-soft);
  height: 100%;
}

.cart-count {
  min-width: 28px;
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, #1c55dc, #10275c);
  border: 1px solid var(--accent);
  color: #f7f9ff;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
  box-shadow: 0 12px 28px rgba(22, 72, 197, 0.28);
}

.cart-panel {
  position: absolute;
  top: 46px;
  right: 0;
  width: min(340px, calc(100vw - 24px));
  max-height: min(70vh, 520px);
  overflow: auto;
  box-shadow: var(--shadow-card);
}

.assistant-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.assistant-price {
  margin: 0;
  font-weight: 800;
}

.assistant-quantity {
  background: var(--sunken);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

.purchase-button {
  align-self: flex-start;
}

.assistant-cards {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
  align-items: stretch;
  grid-auto-rows: 1fr;
}

@media (max-width: 720px) {
  .cart-count {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: end;
  }

  .cart-panel {
    position: static;
    width: 100%;
    max-height: min(80vh, 560px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .assistant-cart-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
  }

  .assistant-cart-actions-footer {
    margin-top: auto;
    position: sticky;
    bottom: 0;
    background: var(--panel-background);
    padding-bottom: 8px;
  }

  .assistant-shopping-layout {
    grid-template-columns: 1fr;
  }

  #finalize-layout {
    grid-template-areas:
      "stepper"
      "summary"
      "actions"
      "purchases";
  }

  #finalize-order-summary,
  #finalize-order-actions,
  #guest-purchases,
  .assistant-detail,
  .assistant-summary-card,
  .assistant-cart,
  .checkout-summary,
  .purchased-card {
    padding: 14px;
  }

  .assistant-summary-card,
  .assistant-detail,
  .assistant-cards {
    width: 100%;
  }

  .assistant-cart-item {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }

  .assistant-cart-remove,
  .purchased-card-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .purchased-card-actions .purchased-card-cta {
    width: 100%;
  }

  .assistant-meta > *:nth-child(n+3),
  .purchased-card-meta > *:nth-child(n+3) {
    display: none;
  }
}

@media (min-width: 960px) {
  .assistant-shopping-layout {
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr);
  }

  #finalize-layout {
    grid-template-areas:
      "stepper stepper"
      "summary actions"
      "purchases actions";
  }

  #finalize-order-summary {
    grid-area: summary;
  }

  #finalize-order-actions {
    grid-area: actions;
  }

  #guest-purchases {
    grid-area: purchases;
  }

  .assistant-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.assistant-description {
  margin: 0 0 12px;
  color: var(--text-secondary);
}

.assistant-instructions {
  white-space: pre-wrap;
  background: var(--sunken);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  color: var(--text-primary);
}

.hero-footnote {
  margin: 10px 0 0;
  color: var(--text-secondary);
}

.landing-hero-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 18px 16px;
  box-shadow: none;
  position: relative;
}

.hero-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.hero-badge {
  margin: 0;
  padding: 6px 0;
  border-radius: 0;
  color: var(--accent);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-note {
  margin: 0;
  color: var(--text-secondary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.hero-card-body h3 {
  margin: 0 0 10px;
  font-size: 1.3rem;
}

.hero-list {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  color: var(--text-secondary);
}

.hero-list li {
  list-style: none;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
}

.hero-dot {
  width: 10px;
  height: 2px;
  border-radius: 0;
  background: var(--accent);
}

.library-header {
  margin: 26px 0 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

button {
  font-family: inherit;
  font-weight: 600;
  border-radius: 12px;
  cursor: pointer;
  min-height: 38px;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 80ms ease;
}

.icon-button {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

.icon-button:hover,
.icon-button:focus-visible {
  border-color: var(--accent);
  color: var(--text-primary);
}

.primary-pill {
  background: var(--gradient);
  color: #f7f9ff;
  border: 1px solid var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 22px;
  border-radius: 14px;
  box-shadow: 0 14px 32px rgba(22, 72, 197, 0.2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 80ms ease;
}

/* Both danger variants below are written in --danger-* tokens rather than
   literal reds. The literals they replaced (#ffe8ec / #ff95a4 over
   rgba(255,107,107,0.08–0.18)) were dark-theme values — note that 255,107,107
   is exactly --danger-500's *dark* value — and were never adapted for light
   mode, where they measured 1.03:1 to 1.92:1 against the page. The Suspend
   button on /admin/users was the visible one at 1.03:1, i.e. invisible.

   The tokens are already flipped per theme in the two :root blocks above, so
   one rule now reads correctly in both: 5.0:1 light, 9.5:1 dark. */
.primary-pill.danger {
  background: var(--danger-100);
  border-color: color-mix(in srgb, var(--danger-500), transparent 40%);
  color: var(--danger-700);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--danger-500), transparent 80%);
}

/* Hover inverts the pair rather than darkening the tint toward the ink, which
   walked the contrast down to 3.4:1 in light mode. Swapping them keeps hover at
   exactly the rest ratio in both themes. */
.primary-pill.danger:hover,
.primary-pill.danger:focus-visible {
  background: var(--danger-700);
  color: var(--danger-100);
  border-color: var(--danger-700);
  box-shadow: 0 0 0 1px var(--danger-500), var(--shadow-card);
}

.primary-pill:hover,
.primary-pill:focus-visible {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary-500) 85%, #000000), color-mix(in srgb, var(--accent-2) 92%, #000000));
  color: #f7f9ff;
  border-color: color-mix(in srgb, var(--primary-700) 64%, #ffffff);
  transform: none;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary-700) 64%, #ffffff), var(--shadow-card);
}

.primary-pill.is-disabled,
.primary-pill.is-disabled:hover,
.primary-pill.is-disabled:focus-visible {
  background: var(--panel-muted);
  color: var(--text-secondary);
  border-color: var(--border);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

main {
  padding: 34px 0 60px;
}

.home-main,
.marketplace-main,
.mp-main,
.hub-main,
.bb-main,
.theory-main,
.about-main,
.mission-main,
.vision-main,
.accounts-data-main,
.open-source-main,
.founding-sellers-main,
.legal-main,
.product-main,
.lrn-main,
.art-main,
.sl-page,
.faq-body {
  padding-top: 0;
  padding-bottom: 0;
}

#agent-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
}

.agent-card {
  background: var(--surface);
  padding: 20px;
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  z-index: 0;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.agent-card:hover,
.agent-card:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45);
  border-color: color-mix(in srgb, var(--primary-500) 45%, transparent);
  z-index: 3;
}

.agent-card h2 {
  margin: 0;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  background: var(--tag-bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.2;
  font-weight: 600;
}

.agent-card p {
  margin: 4px 0 0;
  color: var(--text-secondary);
  line-height: 1.6;
}

.view-instructions-btn {
  margin-top: auto;
  width: 100%;
  background: var(--gradient);
  color: #0b0c12;
  border: none;
  padding: 12px;
  border-radius: 12px;
  box-shadow: 0 14px 34px color-mix(in srgb, var(--primary-500) 24%, transparent);
}

.view-instructions-btn:hover,
.view-instructions-btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--primary-500) 32%, transparent);
}

.best-match {
  border: 1px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)), var(--gradient);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 16px 40px color-mix(in srgb, var(--primary-500) 25%, transparent);
}

.best-match-banner {
  background: color-mix(in srgb, var(--primary-100) 60%, transparent);
  color: var(--text-primary);
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--primary-500) 24%, transparent);
  text-align: center;
  margin: -4px 0 6px;
}

.status-message {
  color: var(--text-secondary);
  font-size: 1rem;
  text-align: center;
  width: 100%;
  margin: 10px 0;
}

.status-message.error {
  color: #f98f9d;
}

button:focus-visible,
.modal-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Hiding, both ways round.
 *
 * `.hidden` has carried `!important` since forever, so `classList.add("hidden")`
 * always worked. The `hidden` *attribute* had no such rule, and the UA's
 * `[hidden] { display: none }` is an ordinary author-level declaration at
 * (0,1,0) — so any class rule that sets `display` beat it, and `el.hidden =
 * true` did nothing at all. The attribute landed in the DOM, `el.hidden` read
 * back `true`, DevTools showed it on the node, and the element kept rendering.
 *
 * The JS uses both idioms about equally (74 files toggle the class, 80 assign
 * the property), which is what made the asymmetry so easy to walk into: an
 * always-visible "Remove" button on /account/profile, a clear-search × over an
 * empty search box on /faq, a "Tagged ×" chip with no tag selected on /learn,
 * the whole promotion editor open at rest on /moderator/promotions. All of it
 * one missing rule (#5017).
 *
 * `!important` is required, not stylistic: a plain `[hidden]` rule here is
 * (0,1,0) and still loses to any single-class `display` in a page sheet, since
 * those load after this one. It also has to out-rank a normal inline style,
 * which only `!important` does.
 *
 * Anything that genuinely needs to render while carrying the attribute is
 * saying two opposite things and should drop the attribute instead. */
[hidden] { display: none !important; }

.hidden { display: none !important; }

/* `.is-hidden` is a third idiom, toggled on ownership badges and cards by
   card_shared.js / marketplace.js / seller_storefront.js. Not covered by the
   attribute rule above — it is a class. */
.ownership-badge.is-hidden { display: none !important; }

/* Modal */
#modal {
  position: fixed;
  inset: 0;
  background: rgba(6, 7, 10, 0.68);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

#modal.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  position: static !important;
  z-index: auto !important;
  pointer-events: none !important;
}

.modal-content {
  background: var(--surface);
  padding: 24px;
  width: min(760px, 100%);
  border-radius: 16px;
  text-align: left;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  font-size: 1.4rem;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 10px;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover,
.modal-close:focus {
  color: var(--text-primary);
  border-color: var(--accent);
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 7, 10, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  z-index: 30;
  overflow-y: auto;
}

.modal-overlay.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  position: static !important;
  z-index: auto !important;
  pointer-events: none !important;
}

.dashboard-body .modal-overlay {
  background: rgba(6, 7, 10, 0.85);
  backdrop-filter: none;
}

.modal-dialog {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0.04)), var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  width: min(820px, 100%);
  padding: 26px;
  box-shadow: var(--shadow-card);
  position: relative;
  max-height: min(90vh, 880px);
  overflow-y: auto;
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}

.modal-header h3 {
  margin: 2px 0 4px;
}

.modal-header .lead {
  color: var(--text-secondary);
}

.auth-gate-dialog {
  width: min(560px, 100%);
}

.auth-gate-benefits {
  margin: 0 0 16px;
}

.auth-gate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.edit-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.edit-form .input-grid {
  gap: 14px;
}

.edit-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.edit-buttons {
  display: flex;
  gap: 10px;
}

.feedback-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 7, 10, 0.78);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  z-index: 30;
  overflow-y: auto;
}

.feedback-overlay.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  position: static !important;
  z-index: auto !important;
  pointer-events: none !important;
}

#cart-panel.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  position: static !important;
  z-index: auto !important;
  pointer-events: none !important;
}

.feedback-dialog {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  width: min(560px, 100%);
  padding: 22px;
  box-shadow: var(--shadow-card);
  position: relative;
  max-height: min(90vh, 760px);
  overflow-y: auto;
}

.feedback-page .hero-grid {
  align-items: stretch;
}

.feedback-page .hero-panel {
  justify-content: stretch;
}

.feedback-page .feedback-panel-card {
  width: 100%;
  max-width: 640px;
}

.feedback-page .feedback-panel-header {
  display: grid;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.feedback-page .supporting-text {
  margin: 12px 0 0;
  color: var(--text-secondary);
}

.feedback-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.feedback-header .lead {
  margin-top: 6px;
}

.feedback-form {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.feedback-form .checkbox-field span {
  font-weight: 400;
}

.feedback-step {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.feedback-step.hidden {
  display: none;
}

.feedback-step-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.intent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.intent-card {
  text-align: left;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.intent-card:hover,
.intent-card:focus-visible {
  border-color: var(--accent);
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
  outline: none;
}

.intent-card.is-selected {
  border-color: var(--accent);
  background: rgba(74, 144, 226, 0.08);
}

.feedback-form[data-feedback-ready="false"] .intent-card {
  opacity: 0.62;
  cursor: wait;
  box-shadow: none;
}

.feedback-form[data-feedback-ready="false"] .intent-card:hover,
.feedback-form[data-feedback-ready="false"] .intent-card:focus-visible {
  transform: none;
  border-color: var(--border);
  box-shadow: none;
}

.intent-title {
  font-weight: 700;
}

.intent-description {
  color: var(--text-secondary);
  font-size: 0.92rem;
}

.feedback-actions {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.feedback-actions .form-status {
  margin: 0;
}

.feedback-outcome-panel {
  display: grid;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  background: var(--surface);
}

.feedback-outcome-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Publish */
.publish-hero {
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.publish-hero .cta-group {
  margin-left: auto;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

#publish-listings-status {
  flex-basis: 100%;
}

.publish-eligibility-banner {
  align-items: flex-start;
}

.publish-eligibility-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.publish-eligibility-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.field-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.section-label {
  margin: 0;
  font-weight: 800;
}

.section-helper {
  margin: 0;
  color: var(--text-secondary);
  font-weight: 600;
}

.type-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  gap: 10px;
  cursor: pointer;
}

.type-card.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.type-card.is-disabled input {
  cursor: not-allowed;
}

.type-card input {
  margin-top: 6px;
}

.pill-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pill-option {
  position: relative;
  cursor: pointer;
}

.pill-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pill-option span {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--sunken);
  font-weight: 600;
  color: var(--text-primary);
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.pill-option input:checked + span {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent, #fff);
}

.pill-option input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.pill-option:hover span {
  border-color: var(--accent);
}

.preview-card {
  background: var(--sunken);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  margin-top: 12px;
}

.preview-top {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}

.preview-meta {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.test-case-grid {
  gap: 16px;
}

.test-case-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: var(--surface);
  display: grid;
  gap: 10px;
}

.test-case-label {
  margin: 0;
  font-weight: 700;
}

.input-grid.single {
  grid-template-columns: 1fr;
}

.pill.subtle {
  background: var(--tag-bg);
  color: var(--text-primary);
  border-radius: 6px;
  padding: 6px 10px;
  font-weight: 600;
}

.pill.tested {
  background: var(--success-100);
  color: var(--success-700);
  border: 1px solid var(--success-500);
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 600;
}

.marketplace-inline-preview {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.marketplace-inline-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: var(--sunken);
}

.advanced-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 6px 0;
}

.advanced-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.advanced-fields {
  display: grid;
  gap: 12px;
  padding-top: 8px;
}

.advanced-fields[hidden] {
  display: none;
}

.publish-note {
  margin: 0;
  font-weight: 600;
  color: var(--text-secondary);
}

.marketplace-inline-card h3 {
  margin: 0;
}

.marketplace-inline-card .card-description {
  margin: 4px 0 0;
}

/* Assistant vs Agent */
.theory-hero {
  padding: 1.5rem 0;
  position: relative;
  z-index: 0;
  overflow: visible;
  background: none;
  border: none;
  box-shadow: none;
}

.theory-header {
  padding: 0;
  align-items: stretch;
  gap: 1.25rem;
  max-width: var(--shell-max-width);
  margin: 0 auto;
}

.theory-copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
}

.theory-panels {
  gap: 1rem;
  padding: 1.5rem 0 2rem;
  max-width: var(--shell-max-width);
  margin: 0 auto;
}

.theory-card {
  position: relative;
  border-color: var(--border);
  background: var(--surface);
  box-shadow: none;
  border-width: 1px;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.theory-card.is-muted {
  background: var(--sunken);
  color: var(--muted-foreground);
  border-color: var(--border-subtle);
  box-shadow: none;
  cursor: default;
}

.theory-card.is-muted:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--border-subtle);
}

.theory-card .pill-label {
  align-self: flex-start;
}

@media (max-width: 960px) {
  .marketplace-controls {
    align-items: flex-start;
    flex-direction: column;
  }

  .sort-control {
    margin-left: 0;
  }

  .product-heading,
  .publish-hero,
  .theory-header {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
  }

  .product-meta {
    text-align: left;
    align-items: flex-start;
  }

  .product-hero-layout {
    grid-template-columns: 1fr;
  }

  .product-sticky-card {
    position: static;
    width: 100%;
  }
}

@media (max-width: 720px) {
  .theory-hero {
    padding: 32px 0 18px;
  }
}

@media (max-width: 640px) {
  .marketplace-bar {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
    gap: 12px;
  }

  .search-group {
    flex-direction: column;
    gap: 12px;
  }

  .input-with-icon {
    width: 100%;
  }

  .type-tabs {
    width: 100%;
    justify-content: flex-start;
  }

  .marketplace-links {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .marketplace-links .quiet-link {
    flex: 1 1 auto;
    text-align: center;
    padding: 6px 0;
  }

  .marketplace-links .marketplace-help-link {
    justify-content: center;
  }

  .marketplace-help-link--responsive .link-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .marketplace-help-link--responsive {
    flex: 0 0 auto;
    min-width: 44px;
    justify-content: center;
  }
}

/* Landing hub */
.home-hero {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: var(--radius-lg);
}

.home-main .page-shell {
  padding-inline: 0;
}

.hero-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: flex-start;
}

.home-hero .hero-grid {
  padding: 0;
  grid-template-columns: 1fr;
  justify-items: start;
  max-width: var(--shell-max-width);
  margin: 0 auto;
}

.home-hero-grid--single {
  grid-template-columns: minmax(0, 1fr);
}

.home-hero-grid--with-featured {
  grid-template-columns: minmax(0, 3.35fr) minmax(220px, 0.85fr);
  grid-template-areas: "copy featured";
  align-items: stretch;
  column-gap: 1rem;
}

.home-hero-main {
  grid-area: copy;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
}

.home-hero .hero-copy {
  margin-inline: 0;
  width: min(100%, 760px);
}

.home-hero-featured {
  grid-area: featured;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  max-width: 300px;
  width: 100%;
}

.home-hero-featured-panel {
  width: 100%;
  display: grid;
  gap: 0.5rem;
  align-content: start;
}

.home-hero-featured-stack {
  gap: 1rem;
}

.home-hero-featured-module-wrap {
  display: grid;
  gap: 0.45rem;
}

.feature-support-copy {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.78rem;
  line-height: 1.35;
}

.home-hero-featured-panel .pill-label {
  margin-bottom: 0;
}

.featured-module {
  background: var(--panel-background);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  box-shadow: 0 0 0 1px color-mix(in srgb, #f2c14e 24%, transparent), 0 10px 26px color-mix(in srgb, #f2c14e 20%, transparent), var(--shadow-sm);
  padding: 0.75rem;
  display: grid;
  gap: 0.7rem;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.featured-module:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--primary) 48%, var(--border-subtle));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent), 0 14px 32px color-mix(in srgb, #f2c14e 28%, transparent), var(--shadow-sm);
  transform: translateY(-1px);
}

.featured-module:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.featured-module .product-box-hero {
  margin: 0;
}

.featured-module .product-box-hero-inner,
.featured-module .product-box-hero img,
.featured-module .product-box-hero-placeholder {
  min-height: 180px;
  max-height: 210px;
}

.featured-module-content {
  display: grid;
  gap: 0.4rem;
}

.featured-module-content h2 {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.2;
}

.featured-module-content p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.85rem;
  line-height: 1.35;
}

.featured-module-content .primary-pill {
  justify-self: flex-start;
}

.featured-module-countdown {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.3;
  color: color-mix(in srgb, var(--primary) 72%, var(--text-primary));
  font-weight: 600;
}

.community-choice-module {
  box-shadow: 0 0 0 1px color-mix(in srgb, #6f74f6 22%, transparent), 0 10px 22px color-mix(in srgb, #6f74f6 16%, transparent), var(--shadow-sm);
}

.community-choice-module:is(:hover, :focus-visible) {
  box-shadow: 0 0 0 3px color-mix(in srgb, #6f74f6 22%, transparent), 0 14px 30px color-mix(in srgb, #6f74f6 22%, transparent), var(--shadow-sm);
}

.featured-module:is(:hover, :focus-visible) .featured-module-content .primary-pill {
  background: var(--primary);
  color: var(--surface);
  border-color: color-mix(in srgb, var(--primary) 68%, black);
}

.home-hero-featured-panel .listing-card,
.home-hero-featured-panel .bundle-card,
.home-hero-featured-panel .product-card {
  margin: 0;
}

.hero-copy h1 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  margin-bottom: 0.25rem;
}

.hero-subline {
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 1rem;
}

.hero-copy .lead {
  color: var(--muted-foreground);
  max-width: 40ch;
}

.hero-panel {
  display: flex;
  justify-content: flex-end;
}

.hero-panel-card {
  background: var(--panel-background);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
  max-width: 420px;
}

.hero-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: grid;
  gap: 0.5rem;
}

.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  display: inline-block;
  margin-right: 0.5rem;
}

.type-selector {
  padding: 1.5rem 0;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.section-header .ghost-button,
.section-header .primary-pill {
  align-self: flex-start;
}

.type-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.home-main .type-card.is-muted {
  background: var(--sunken);
  color: var(--muted-foreground);
  border-color: var(--border-subtle);
  filter: grayscale(1);
  box-shadow: none;
  cursor: not-allowed;
  transition: none;
}

.home-main .type-card.is-muted:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--border-subtle);
}

.type-card {
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 1rem;
  text-decoration: none;
  color: inherit;
  background: var(--panel-background);
  box-shadow: var(--shadow-xs);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.type-card.is-active {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
  background: linear-gradient(180deg, rgba(119, 157, 255, 0.08) 0%, rgba(119, 157, 255, 0) 100%);
}

.type-helper {
  color: var(--muted-foreground);
  margin: 0;
}

.type-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: var(--border-strong);
}

.type-card-top h3 {
  margin: 0.25rem 0;
}

.type-card-top {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
}

.type-description {
  color: var(--muted-foreground);
  margin: 0;
}

.type-link {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  margin-top: auto;
  padding-top: 0.35rem;
}

.type-link.coming-soon {
  color: var(--muted-foreground);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: var(--panel-background);
}

.new-strip {
  padding: clamp(2rem, 4vw, 3.5rem) 0;
}

.home-updates-preview {
  padding: clamp(2rem, 4vw, 3.5rem) 0;
}

.home-updates-grid {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: 1fr;
}

.home-update-card {
  display: grid;
  gap: 0.55rem;
  align-content: start;
  min-height: 100%;
}

.home-update-card .roadmap-title {
  margin: 0;
  font-size: 1rem;
}

.home-update-card .text-link {
  margin-top: auto;
}

.home-update-summary {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 700px) {
  .home-updates-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1080px) {
  .home-updates-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.product-grid.limited-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.empty-state.callout {
  border: 1px dashed var(--border-strong);
  border-radius: 14px;
  padding: 1.5rem;
  background: var(--panel-background);
  text-align: center;
}

.how-it-works {
  padding: clamp(2rem, 4vw, 3.5rem) 0;
}

.steps-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.how-it-works .step-card {
  border: 1px solid color-mix(in srgb, var(--border-subtle) 70%, transparent);
  border-radius: var(--radius-lg);
  padding: 18px;
  background: var(--panel-background);
  box-shadow: 0 12px 32px rgba(10, 20, 40, 0.05);
  gap: 0.75rem;
  transition: border-color 180ms ease-out, box-shadow 180ms ease-out, transform 180ms ease-out;
}

.how-it-works .step-card h3,
.how-it-works .step-card p {
  margin: 0;
}

.how-it-works .step-card:hover,
.how-it-works .step-card:focus-within {
  border-color: var(--border-subtle);
  box-shadow: 0 16px 36px rgba(10, 20, 40, 0.08);
  transform: translateY(-1px);
}

@media (min-width: 900px) {
  .steps-grid {
    gap: 1.25rem;
  }

  .how-it-works .step-card {
    padding: 20px;
  }
}

.step-action {
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1.25px;
  text-underline-offset: 3px;
  white-space: nowrap;
  margin-top: auto;
  align-self: flex-start;
}

.footer-cta {
  background: none;
  border-top: none;
  padding: 2rem 0;
  margin-top: 1rem;
}

.footer-cta-card {
  background: var(--panel-background);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
}

.footer-cta-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.moderation-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.moderation-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.moderation-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  text-align: left;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  background: var(--panel-background);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.moderation-row:hover,
.moderation-row:focus-visible {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.moderation-row.is-active {
  border-color: var(--accent-2);
  box-shadow: var(--shadow-card);
}

.moderation-row .eyebrow {
  margin: 0;
}

.moderation-row h4 {
  margin: 0.1rem 0;
}

.moderation-row .meta {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.moderation-row .pill {
  white-space: nowrap;
}

.moderation-row .row-main {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.moderation-shell .card {
  height: 100%;
}

.fields-grid {
  align-items: start;
}

.field-card .section-header {
  align-items: flex-start;
  gap: 1rem;
}

.field-section {
  margin-top: 1rem;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--sunken);
  padding: 0.75rem 1rem;
}

.field-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.field-summary::-webkit-details-marker {
  display: none;
}

.field-summary::after {
  content: '▾';
  font-size: 0.9rem;
  color: var(--text-secondary);
  transition: transform 0.2s ease;
}

.field-section[open] .field-summary::after {
  transform: rotate(180deg);
}

.field-summary-meta {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.field-body {
  margin-top: 0.75rem;
}

/* Catalog admin shell */
.catalog-admin-shell {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.catalog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.catalog-header h3 {
  margin: 0;
}

.catalog-search input {
  min-width: 200px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--sunken);
  color: var(--text-primary);
  font-size: 0.9rem;
}

.catalog-search input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.catalog-tabs {
  flex-wrap: wrap;
}

.tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5em;
  padding: 0 0.4em;
  margin-left: 0.35em;
  font-size: 0.8em;
  font-weight: 700;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  line-height: 1.6;
}

.tab-pill[aria-selected='false'] .tab-count {
  background: var(--sunken);
  color: var(--text-secondary);
}

/* Platform tree grouping */
.platforms-tree {
  display: grid;
  gap: 1.25rem;
}

.platform-group {
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--panel-background);
  overflow: hidden;
}

.platform-group.is-inactive {
  opacity: 0.65;
}

.platform-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--sunken);
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}

.platform-group-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.platform-group-title strong {
  font-size: 1.05rem;
}

.platform-group-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.version-sublist {
  display: grid;
  gap: 0;
}

.version-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 1rem 0.5rem 1.5rem;
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}

.version-item:last-child {
  border-bottom: 0;
}

.version-item.is-inactive {
  opacity: 0.65;
}

.version-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.version-label {
  font-weight: 600;
}

.button-row.compact {
  margin-top: 0;
  gap: 0.5rem;
}

.checkbox-field.compact {
  font-size: 0.85rem;
}

/* Form drawers */
.catalog-form-drawer {
  margin-top: 1rem;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  background: var(--sunken);
}

.catalog-form-drawer > summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

.catalog-form-drawer > summary::-webkit-details-marker {
  display: none;
}

.catalog-form-drawer[open] > .edit-form {
  margin-top: 0.75rem;
}

/* Overview stats */
.overview-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}

.overview-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.overview-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  text-align: center;
}

.metric {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.metric-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
}

.metric-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.overview-versions {
  margin-top: 0.5rem;
}

.overview-versions summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.overview-version-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.9rem;
}

.overview-version-row:last-child {
  border-bottom: 0;
}

.pill.stat-pill {
  font-size: 0.75rem;
  padding: 0.15rem 0.5rem;
}

.pill.stat-pass {
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
}

.pill.stat-fail {
  background: rgba(239, 68, 68, 0.15);
  color: #dc2626;
}

.pill.stat-warn {
  background: rgba(245, 158, 11, 0.15);
  color: #d97706;
}

.pill.stat-neutral {
  background: var(--sunken);
  color: var(--text-secondary);
}

/* Homepage layout refresh */
.home-page {
  --home-shell-padding: clamp(16px, 3vw, 34px);
}

.home-main .page-shell {
  padding-inline: 0;
}

.home-page header {
  padding: 0;
}

body:not(.sx) .home-main section {
  padding: clamp(24px, 3vw, 36px) 0;
}

body:not(.sx) .home-main > section:first-child {
  padding-top: clamp(10px, 1.4vw, 16px);
}

.home-hero {
  padding-top: clamp(8px, 1.2vw, 14px);
  padding-bottom: clamp(16px, 2.1vw, 24px);
}

.home-hero .hero-grid {
  grid-template-columns: 1fr;
  gap: 16px;
  justify-items: start;
}

.home-hero-grid--single {
  grid-template-columns: 1fr;
}

.home-hero-grid--split {
  grid-template-columns: 1fr;
  grid-template-areas:
    "copy"
    "promoted";
  align-items: stretch;
}

.home-hero-main {
  grid-area: copy;
  width: 100%;
  justify-content: flex-start;
}

.home-hero-promoted {
  grid-area: promoted;
  width: 100%;
}

.home-hero-promoted__panel {
  background:
    radial-gradient(circle at top right, color-mix(in srgb, #f2c14e 38%, transparent), transparent 62%),
    linear-gradient(160deg, color-mix(in srgb, var(--surface) 86%, #f2c14e), color-mix(in srgb, var(--surface) 92%, #f2c14e));
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, #f2c14e 34%, var(--border));
  box-shadow:
    0 0 0 1px color-mix(in srgb, #f2c14e 16%, transparent),
    0 10px 24px color-mix(in srgb, #f2c14e 22%, transparent),
    var(--shadow-sm);
  padding: 14px;
  display: grid;
  gap: 10px;
}

.home-hero-promoted__panel .pill-label {
  margin: 0;
}

/* Community-choice winner badge on listing detail pages (#4710). Sits beside
   the page title, so it is sized to the surrounding text rather than to the
   card chips. */
.community-choice-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(245, 180, 84, 0.55);
  background: rgba(245, 180, 84, 0.16);
  color: #8a5300;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.2;
  white-space: nowrap;
}

.home-hero-promoted__card {
  display: grid;
  gap: 10px;
}

.home-hero-promoted__carousel {
  display: grid;
  gap: 8px;
}

.home-hero-promoted__viewport {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}

.home-hero-promoted__arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, #f2c14e 50%, var(--border));
  background: color-mix(in srgb, var(--surface) 80%, #f2c14e);
  color: #5f3a00;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}

.home-hero-promoted__arrow:hover,
.home-hero-promoted__arrow:focus-visible {
  background: color-mix(in srgb, #f2c14e 50%, #ffffff);
  border-color: #734700;
  transform: scale(1.08);
}

.home-hero-promoted__arrow:active {
  transform: scale(0.95);
}

.home-hero-promoted__track {
  position: relative;
  flex: 1;
  min-width: 0;
}

.home-hero-promoted__slide {
  display: none;
  margin: 0;
}

.home-hero-promoted__slide.is-active {
  display: grid;
}

.home-hero-promoted__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.home-hero-promoted__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, #f2c14e 60%, #734700);
  background: transparent;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s, border-color 0.2s;
}

.home-hero-promoted__dot:hover,
.home-hero-promoted__dot:focus-visible {
  border-color: #734700;
  background: color-mix(in srgb, #f2c14e 60%, #ffffff);
  transform: scale(1.2);
}

.home-hero-promoted__dot[aria-current="true"] {
  border-color: #734700;
  background: #734700;
  transform: scale(1.15);
}

.home-hero-promoted__thumb {
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
}

.home-hero-promoted__thumb .home-card-cover-image {
  width: 100%;
  min-height: 150px;
  max-height: 150px;
  object-fit: cover;
  object-position: center center;
  display: block;
  border-radius: 0;
  transition: transform 0.3s ease;
}

.home-hero-promoted__slide:hover .home-hero-promoted__thumb .home-card-cover-image {
  transform: scale(1.03);
}

.home-hero-promoted__card h3 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.3;
}

.home-hero-promoted__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.home-hero-promoted__empty {
  margin: 0;
  color: color-mix(in srgb, var(--text-primary) 82%, #8f6400);
}

.home-hero .hero-copy {
  margin-inline: 0;
  width: min(100%, 760px);
}

.home-hero .cta-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.hero-subline {
  margin: 0 0 16px;
  max-width: 56ch;
}

.hero-chip-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.hero-chip {
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 6px 12px;
  background: var(--sunken);
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
}

.hero-chip:hover,
.hero-chip:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

/* Centered hero variant */
.home-hero--centered {
  text-align: center;
}

.hero-copy--centered {
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.home-hero .hero-copy--centered {
  margin-inline: auto;
}

.hero-copy--centered .hero-subline {
  max-width: 52ch;
}

.hero-copy--centered .cta-group {
  justify-content: center;
}

.hero-copy--centered .hero-chip-row {
  justify-content: center;
}

/* How it works section */
.how-it-works {
  padding: clamp(2rem, 4vw, 3.5rem) 0;
}

.how-it-works__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 8px;
}

.how-it-works__card {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.how-it-works__card:hover {
  border-color: var(--border);
  box-shadow: var(--shadow-xs);
}

.how-it-works__step {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--accent);
  opacity: 0.25;
  letter-spacing: -0.02em;
  line-height: 1;
}

.how-it-works__card h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.how-it-works__card p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

@media (max-width: 768px) {
  .how-it-works__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* Closing CTA strip */
.home-cta-strip {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  text-align: center;
}

.home-cta-strip__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.home-cta-strip__inner h2 {
  margin: 0;
}

.home-cta-strip__inner .lead {
  margin: 0 0 8px;
}

.home-cta-strip__inner .cta-group {
  margin-top: 10px;
}

@media (min-width: 900px) {
  .home-page {
    --home-shell-padding: clamp(20px, 2.8vw, 40px);
  }
}

@media (min-width: 1200px) {
  .home-page {
    --home-shell-padding: clamp(24px, 3.4vw, 56px);
  }
}

@media (min-width: 900px) {
  .home-hero-grid--split {
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.9fr);
    grid-template-areas: "copy promoted";
    gap: 20px;
    align-items: start;
  }

  .home-hero-promoted {
    align-self: stretch;
    justify-self: end;
    max-width: 360px;
  }

  .home-hero-promoted__panel {
    height: 100%;
    align-content: start;
  }

}

@media (max-width: 479px) {
  .home-hero-promoted__arrow {
    width: 26px;
    height: 26px;
  }

  .home-hero-promoted__arrow svg {
    width: 14px;
    height: 14px;
  }
}

.home-listing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.home-listing-card,
.type-card {
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}

.home-listing-card {
  min-height: 320px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.home-listing-card__top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.home-listing-card__title {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.home-listing-card__description {
  margin: 0;
  color: var(--text-secondary);
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.home-listing-card__footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.home-faq .faq-accordion {
  margin-bottom: 16px;
}

.hub-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: 16px;
  align-items: start;
}

.hub-content {
  min-width: 0;
}

.hub-panel-report,
.hub-panel-report [data-tab-state-root="report"],
.hub-panel-report [data-tab-state="populated"] {
  width: 100%;
  max-width: none;
}

.hub-panel-report .hub-report-card {
  width: 100%;
  max-width: none;
  padding: 24px;
}

.hub-panel-report .feedback-form,
.hub-panel-report .feedback-step,
.hub-panel-report .conditional-field,
.hub-panel-report .form-field,
.hub-panel-report .form-field textarea,
.hub-panel-report .form-field input,
.hub-panel-report .form-field select {
  width: 100%;
  max-width: none;
}

.hub-rail {
  display: grid;
  gap: 12px;
}

.hub-pagination {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.hub-roadmap-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.stack-sm {
  display: grid;
  gap: 8px;
}

@media (max-width: 960px) {
  .hub-layout {
    grid-template-columns: 1fr;
  }

  .hub-content {
    order: 1;
  }

  .hub-rail {
    order: 2;
  }

  .hub-roadmap-columns {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .hub-panel .input-grid {
    grid-template-columns: 1fr;
  }

  .hub-panel-report .hub-report-card {
    padding: 16px;
  }

  .hub-panel .feedback-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hub-panel .feedback-actions .form-status {
    order: 1;
  }

  .hub-panel .feedback-actions .primary-pill {
    width: 100%;
    justify-content: center;
  }
}

/* merged from css/responsive.css */

/* responsive.css - global mobile readiness */

/* Prevent accidental horizontal scrolling due to wide elements */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Media should never overflow */
img, video, canvas, svg {
  max-width: 100%;
  height: auto;
}

/* Safer box sizing */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Mobile tap target baseline */
button, .btn, a.button, input, select, textarea {
  min-height: 44px;
}

:root {
  --container-max: 1200px;
  --pad-desktop: 24px;
  --pad-mobile: 12px;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
  position: relative;
  z-index: 2;
}

@media (max-width: 768px) {
  .container {
    padding-left: 0;
    padding-right: 0;
  }}

@media (max-width: 640px) {
  :root {
    --pad-mobile: 10px;
  }

  body {
    font-size: 0.9375rem; /* 15px / 16px */
    line-height: 1.65;
  }

  h1 {
    font-size: 1.65rem;
    line-height: 1.2;
  }

  h2 {
    font-size: 1.35rem;
  }

  h3 {
    font-size: 1.1rem;
  }

  .brand h1 {
    font-size: 1.55rem;
  }

  .brand .brand-tagline {
    font-size: 0.95rem;
  }

  .hero-copy h1 {
    font-size: clamp(1.6rem, 6vw, 2.1rem);
  }

  .hero-copy .lead {
    font-size: 1rem;
  }

  .page-shell {
    padding: 0 var(--pad-mobile);
  }

  .type-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }

  .type-tabs .tab-pill {
    scroll-snap-align: start;
  }

  .hub-main .feedback-form .form-field > span,
  .hub-main .feedback-form .field-label {
    line-height: 1.4;
  }

  .hub-main .feedback-form textarea {
    min-height: 120px;
  }

  header {
    padding: 20px 0 12px;
  }
  .global-search {
    order: 0;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .global-search-results {
    position: static;
    box-shadow: none;
    margin-top: 6px;
  }

  .auth-wrapper {
    width: 100%;
    justify-content: center;
  }

  /* The callout is anchored to .auth-wrapper, which is centred at this width,
   * so pin it to the wrapper's right edge rather than letting a max-content
   * box hang off the side of a narrow header. */
  .login-inline-status {
    right: 0;
    left: auto;
    max-width: min(260px, calc(100vw - 2 * var(--pad-mobile)));
  }
  .login-dropdown,
  .user-menu-dropdown {
    left: var(--pad-mobile);
    right: var(--pad-mobile);
    margin-left: 0;
    margin-right: 0;
  }

  .user-menu-dropdown {
    display: flex;
    justify-content: flex-end;
  }
  .card-testing {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .card-testing .testing-detail::before {
    margin: 0 4px;
  }

  .card-testing .testing-confirmed-icon {
    margin-left: 0;
  }

  .ghost-button,
  .primary-pill,
  .btn,
  button,
  a.button {
    min-height: 44px;
    padding: 6px 12px;
    font-size: 0.9rem;
  }

  .icon-button,
  .theme-toggle {
    width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
  }

  .product-grid,
  .dashboard-grid,
  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .owned-products-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .product-card,
  .type-card,
  .assistant-card,
  .card,
  .stat-card,
  .dashboard-card,
  .agent-card,
  .marketplace-card {
    padding: 12px;
    gap: 8px;
  }

  .product-card,
  .marketplace-card {
    --card-title-font-size: 1.04rem;
    --card-title-line-height: 1.24;
  }

  .product-card {
    padding-top: 15px;
  }

  .product-card .card-title-block,
  .marketplace-card .card-title-block {
    margin-top: 2px;
  }

  .product-card .card-title-meta,
  .marketplace-card .card-title-meta {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .product-card .ownership-badge--corner {
    top: 8px;
    right: 8px;
    max-width: calc(100% - 16px);
  }

  .product-card .card-cover {
    margin-top: 4px;
  }

  .card-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .card-actions {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
  }

  .card-actions .primary-pill.review-button {
    width: 100%;
    justify-content: center;
  }

  .card-actions .ghost-button {
    width: 100%;
    justify-content: center;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 0.5rem;
  }
}

@media (max-width: 960px) {
  .prompt-hero-content {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: left;
  }

  .product-box-hero-face-overlay {
    top: 16.9%;
    right: 24.8%;
    bottom: 15.8%;
    left: 36.2%;
  }

  .product-box-hero-overlay,
  .product-box-overlay {
    transform: skewY(-0.75deg) rotate(-0.28deg);
    transform-origin: 50% 15%;
  }

  .prompt-hero-visual {
    width: 100%;
  }

  .prompt-hero-content .product-info {
    width: 100%;
  }

  .product-hero-layout {
    gap: 14px;
  }

  .product-sticky-card {
    order: -1;
    margin-bottom: 2px;
  }

  .product-sticky-card .ownership-card {
    margin-top: 0.35rem;
    padding: 0.65rem;
  }

  .product-sticky-card .ownership-card-header {
    align-items: flex-start;
    gap: 0.35rem 0.5rem;
  }

  .product-sticky-card .ownership-owned-since {
    font-size: 0.78rem;
  }

  .product-sticky-card .product-cta {
    gap: 8px;
  }

  .product-sticky-card .product-hint {
    font-size: 0.84rem;
  }

  .owned-product-ownership-row {
    align-items: flex-start;
  }

  .owned-product-ownership-row .ownership-badge,
  .owned-product-ownership-row .pill {
    width: fit-content;
    max-width: 100%;
  }
  .pill-row,
  .pill-row-ownership {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .pill-row .pill,
  .pill-row .type-pill,
  .pill-row-ownership .pill {
    max-width: 100%;
  }
}

@media (min-width: 961px) {
  .product-box-hero-face-overlay {
    top: 16.6%;
    right: 24.2%;
    bottom: 15.2%;
    left: 36.6%;
  }

  .product-box-hero-overlay,
  .product-box-overlay {
    transform: skewY(-0.75deg) rotate(-0.28deg);
    transform-origin: 50% 13%;
  }
}

@media (max-width: 640px) {
  .prompt-hero-content {
    gap: 14px;
  }

  .product-box-hero {
    max-width: 300px;
  }

  .product-card .ownership-badge--corner {
    font-size: 0.64rem;
    padding: 0.17rem 0.4rem;
    border-radius: 9px;
  }

  .product-card,
  .marketplace-card {
    --card-title-font-size: 1rem;
    --card-title-line-height: 1.22;
  }

  .product-card .card-cover {
    margin-bottom: 0.5rem;
  }

  .product-box-hero-inner,
  .product-box-hero img,
  .product-box-hero-placeholder {
    min-height: 360px;
    max-height: 420px;
  }

  .product-box-hero-meta {
    justify-content: center;
  }

  .product-box-hero-overlay,
  .product-box-overlay {
    transform: skewY(-0.72deg) rotate(-0.24deg);
    transform-origin: 50% 18%;
    clip-path: polygon(1% 0, 99% 0, 100% 100%, 0 100%);
  }

  .product-box-hero-face-overlay {
    top: 14.2%;
    right: 23.6%;
    bottom: 13.8%;
    left: 35.4%;
  }

  .product-box-hero-overlay,
  .product-box-overlay {
    --overlay-gap: clamp(0.25rem, 0.72vw, 0.48rem);
    --overlay-inline-pad: clamp(0.16rem, 0.65vw, 0.3rem);
  }

  .product-box-hero-overlay-title,
  .product-box-overlay-title {
    font-size: clamp(1rem, 2.55vw, 1.6rem);
    -webkit-line-clamp: 2;
  }

  .product-box-hero-overlay-tagline,
  .product-box-overlay-tagline {
    font-size: clamp(0.52rem, 1.5vw, 0.72rem);
    -webkit-line-clamp: 2;
  }

  .product-box-hero-overlay-bullets,
  .product-box-overlay-bullets {
    font-size: clamp(0.5rem, 1.35vw, 0.68rem);
  }

  .product-box-hero-overlay-version,
  .product-box-overlay-version {
    font-size: clamp(0.48rem, 1.25vw, 0.62rem);
  }

  .prompt-hero-content .product-info {
    text-align: center;
  }

  .prompt-hero-content .badge-row,
  .prompt-hero-content .pill-row {
    justify-content: center;
  }

  .product-sticky-card {
    padding: 12px;
  }

  .product-sticky-card .product-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .product-sticky-card .product-cta .primary-pill,
  .product-sticky-card .product-cta .secondary-cta,
  .product-sticky-card .product-cta .tertiary-cta {
    width: 100%;
    justify-content: center;
  }

  .ownership-id-wrap {
    width: 100%;
    justify-content: space-between;
    gap: 0.35rem;
  }

  .ownership-id-code {
    max-width: min(68vw, 18rem);
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ownership-copy-button {
    white-space: nowrap;
  }
}

@media (max-width: 1024px) {
  .home-hero-grid--with-featured {
    grid-template-areas: "copy" "featured";
    grid-template-columns: 1fr;
    row-gap: 1.25rem;
  }

  .home-hero-main {
    width: 100%;
  }

  .home-hero-featured {
    justify-content: flex-start;
    max-width: min(420px, 100%);
  }

  .home-hero-featured-panel {
    max-width: 100%;
  }

  .home-hero-featured-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0.85rem;
  }
}

@media (max-width: 720px) {
  .home-hero-featured-stack {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-hero-featured {
    max-width: 100%;
  }
}

@media (max-width: 1100px) {
  .home-listing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .home-listing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .home-listing-grid {
    grid-template-columns: 1fr;
  }

  .home-listing-card {
    min-height: 0;
  }

  .hero-chip-row {
    gap: 6px;
  }
}

@media (max-width: 420px) {
  .product-card,
  .marketplace-card {
    --card-title-font-size: 0.96rem;
    --card-title-line-height: 1.2;
  }

  .product-card .ownership-badge--corner {
    top: 7px;
    right: 7px;
    max-width: calc(100% - 14px);
    font-size: 0.61rem;
  }

  .product-card .card-cover {
    border-radius: 10px;
  }
}

/* Inline-style migration utility classes (CSP style-src hardening, #3985 C6).
 * Each class reproduces one literal style="..." value verbatim, so behavior
 * is unchanged; regenerate with scripts/inline_style_migration.py rather than
 * hand-editing one of these rules. */
.u-ai-center.u-ai-center.u-ai-center.u-ai-center { align-items:center; }
.u-as-center.u-as-center.u-as-center.u-as-center { align-self:center; }
.u-as-flex-start_mt-2px.u-as-flex-start_mt-2px.u-as-flex-start_mt-2px.u-as-flex-start_mt-2px { align-self:flex-start; margin-top:2px; }
.u-bg-none_bd-none_cur-pointer_p-0_c-inherit.u-bg-none_bd-none_cur-pointer_p-0_c-inherit.u-bg-none_bd-none_cur-pointer_p-0_c-inherit.u-bg-none_bd-none_cur-pointer_p-0_c-inherit { background: none; border: none; cursor: pointer; padding: 0; color: inherit; }
.u-c-635bff.u-c-635bff.u-c-635bff.u-c-635bff { color:#635bff; }
.u-c-854d0e.u-c-854d0e.u-c-854d0e.u-c-854d0e { color:#854d0e; }
.u-c-b91c1c.u-c-b91c1c.u-c-b91c1c.u-c-b91c1c { color:#b91c1c; }
.u-c-danger-500.u-c-danger-500.u-c-danger-500.u-c-danger-500 { color:var(--danger-500); }
.u-c-inherit_td-none.u-c-inherit_td-none.u-c-inherit_td-none.u-c-inherit_td-none { color:inherit;text-decoration:none; }
.u-c-pd-type.u-c-pd-type.u-c-pd-type.u-c-pd-type { color:var(--pd-type); }
.u-c-sx-brand.u-c-sx-brand.u-c-sx-brand.u-c-sx-brand { color: var(--sx-brand-text); }
.u-c-sx-brand-3.u-c-sx-brand-3.u-c-sx-brand-3.u-c-sx-brand-3 { color: var(--sx-brand-text); }
.u-c-sx-brand-3_fw-500.u-c-sx-brand-3_fw-500.u-c-sx-brand-3_fw-500.u-c-sx-brand-3_fw-500 { color: var(--sx-brand-3); font-weight: 500; }
.u-c-sx-brand-3_td-none.u-c-sx-brand-3_td-none.u-c-sx-brand-3_td-none.u-c-sx-brand-3_td-none { color: var(--sx-brand-3); text-decoration: none; }
.u-c-sx-brand-text.u-c-sx-brand-text.u-c-sx-brand-text.u-c-sx-brand-text { color: var(--sx-brand-text); }
.u-c-sx-ok.u-c-sx-ok.u-c-sx-ok.u-c-sx-ok { color: var(--sx-ok-text); }
.u-c-sx-text.u-c-sx-text.u-c-sx-text.u-c-sx-text { color: var(--sx-text); }
.u-c-sx-text-2_fs-14px_mt-14px_maxw-32ch_lh-1_55.u-c-sx-text-2_fs-14px_mt-14px_maxw-32ch_lh-1_55.u-c-sx-text-2_fs-14px_mt-14px_maxw-32ch_lh-1_55.u-c-sx-text-2_fs-14px_mt-14px_maxw-32ch_lh-1_55 { color: var(--sx-text-2); font-size: 14px; margin-top: 14px; max-width: 32ch; line-height: 1.55; }
.u-c-sx-text-2_fs-15px_lh-1_65_maxw-640px.u-c-sx-text-2_fs-15px_lh-1_65_maxw-640px.u-c-sx-text-2_fs-15px_lh-1_65_maxw-640px.u-c-sx-text-2_fs-15px_lh-1_65_maxw-640px { color: var(--sx-text-2); font-size: 15px; line-height: 1.65; max-width: 640px; }
.u-c-sx-text-2_fs-15px_lh-1_65_maxw-760px_mt-12px.u-c-sx-text-2_fs-15px_lh-1_65_maxw-760px_mt-12px.u-c-sx-text-2_fs-15px_lh-1_65_maxw-760px_mt-12px.u-c-sx-text-2_fs-15px_lh-1_65_maxw-760px_mt-12px { color: var(--sx-text-2); font-size: 15px; line-height: 1.65; max-width: 760px; margin-top: 12px; }
.u-c-sx-text-2_mt-12px_fs-15px_maxw-52ch.u-c-sx-text-2_mt-12px_fs-15px_maxw-52ch.u-c-sx-text-2_mt-12px_fs-15px_maxw-52ch.u-c-sx-text-2_mt-12px_fs-15px_maxw-52ch { color: var(--sx-text-2); margin-top: 12px; font-size: 15px; max-width: 52ch; }
.u-c-sx-text-2_mt-8px_fs-14px.u-c-sx-text-2_mt-8px_fs-14px.u-c-sx-text-2_mt-8px_fs-14px.u-c-sx-text-2_mt-8px_fs-14px { color: var(--sx-text-2); margin-top: 8px; font-size: 14px; }
.u-c-sx-text-3.u-c-sx-text-3.u-c-sx-text-3.u-c-sx-text-3 { color: var(--sx-text-3); }
.u-c-sx-text-3-2.u-c-sx-text-3-2.u-c-sx-text-3-2.u-c-sx-text-3-2 { color:var(--sx-text-3); }
.u-c-sx-text-3_fs-13px_mt-12px.u-c-sx-text-3_fs-13px_mt-12px.u-c-sx-text-3_fs-13px_mt-12px.u-c-sx-text-3_fs-13px_mt-12px { color: var(--sx-text-3); font-size: 13px; margin-top: 12px; }
.u-c-sx-text-3_fs-13px_mt-8px.u-c-sx-text-3_fs-13px_mt-8px.u-c-sx-text-3_fs-13px_mt-8px.u-c-sx-text-3_fs-13px_mt-8px { color: var(--sx-text-3); font-size: 13px; margin-top: 8px; }
.u-c-sx-text-3_fs-14px_fw-400.u-c-sx-text-3_fs-14px_fw-400.u-c-sx-text-3_fs-14px_fw-400.u-c-sx-text-3_fs-14px_fw-400 { color: var(--sx-text-3); font-size: 14px; font-weight: 400; }
.u-c-sx-text-3_fw-400.u-c-sx-text-3_fw-400.u-c-sx-text-3_fw-400.u-c-sx-text-3_fw-400 { color: var(--sx-text-3); font-weight: 400; }
.u-c-text-secondary.u-c-text-secondary.u-c-text-secondary.u-c-text-secondary { color: var(--text-secondary); }
.u-c-text-secondary_fst-italic.u-c-text-secondary_fst-italic.u-c-text-secondary_fst-italic.u-c-text-secondary_fst-italic { color: var(--text-secondary); font-style: italic; }
.u-c-text-secondary_m-0-0-20px_lh-1_5.u-c-text-secondary_m-0-0-20px_lh-1_5.u-c-text-secondary_m-0-0-20px_lh-1_5.u-c-text-secondary_m-0-0-20px_lh-1_5 { color: var(--text-secondary); margin: 0 0 20px; line-height: 1.5; }
.u-c-text-secondary_m-0-0-24px.u-c-text-secondary_m-0-0-24px.u-c-text-secondary_m-0-0-24px.u-c-text-secondary_m-0-0-24px { color:var(--text-secondary);margin:0 0 24px; }
.u-cur-pointer_fw-600.u-cur-pointer_fw-600.u-cur-pointer_fw-600.u-cur-pointer_fw-600 { cursor:pointer;font-weight:600; }
.u-cur-pointer_fw-600_c-sx-text_fs-15px.u-cur-pointer_fw-600_c-sx-text_fs-15px.u-cur-pointer_fw-600_c-sx-text_fs-15px.u-cur-pointer_fw-600_c-sx-text_fs-15px { cursor: pointer; font-weight: 600; color: var(--sx-text); font-size: 15px; }
.u-d-block_fw-600_mb-6px_fs-0_85rem.u-d-block_fw-600_mb-6px_fs-0_85rem.u-d-block_fw-600_mb-6px_fs-0_85rem.u-d-block_fw-600_mb-6px_fs-0_85rem { display:block; font-weight:600; margin-bottom:6px; font-size:0.85rem; }
.u-d-block_mt-12px.u-d-block_mt-12px.u-d-block_mt-12px.u-d-block_mt-12px { display:block;margin-top:12px; }
.u-d-flex_ai-center.u-d-flex_ai-center.u-d-flex_ai-center.u-d-flex_ai-center { display:flex; align-items:center; }
.u-d-flex_ai-center_gap-10px.u-d-flex_ai-center_gap-10px.u-d-flex_ai-center_gap-10px.u-d-flex_ai-center_gap-10px { display: flex; align-items: center; gap: 10px; }
.u-d-flex_ai-center_gap-12px_fwrap-wrap.u-d-flex_ai-center_gap-12px_fwrap-wrap.u-d-flex_ai-center_gap-12px_fwrap-wrap.u-d-flex_ai-center_gap-12px_fwrap-wrap { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.u-d-flex_ai-center_gap-1rem_fwrap-wrap_fw-600.u-d-flex_ai-center_gap-1rem_fwrap-wrap_fw-600.u-d-flex_ai-center_gap-1rem_fwrap-wrap_fw-600.u-d-flex_ai-center_gap-1rem_fwrap-wrap_fw-600 { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; font-weight: 600; }
.u-d-flex_ai-flex-start_jc-space-between_gap-16px.u-d-flex_ai-flex-start_jc-space-between_gap-16px.u-d-flex_ai-flex-start_jc-space-between_gap-16px.u-d-flex_ai-flex-start_jc-space-between_gap-16px { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.u-d-flex_fdir-column_gap-12px.u-d-flex_fdir-column_gap-12px.u-d-flex_fdir-column_gap-12px.u-d-flex_fdir-column_gap-12px { display: flex; flex-direction: column; gap: 12px; }
.u-d-flex_fdir-column_gap-16px.u-d-flex_fdir-column_gap-16px.u-d-flex_fdir-column_gap-16px.u-d-flex_fdir-column_gap-16px { display: flex; flex-direction: column; gap: 16px; }
.u-d-flex_fdir-column_gap-8px.u-d-flex_fdir-column_gap-8px.u-d-flex_fdir-column_gap-8px.u-d-flex_fdir-column_gap-8px { display:flex; flex-direction:column; gap:8px; }
.u-d-flex_fwrap-wrap_gap-12px.u-d-flex_fwrap-wrap_gap-12px.u-d-flex_fwrap-wrap_gap-12px.u-d-flex_fwrap-wrap_gap-12px { display: flex; flex-wrap: wrap; gap: 12px; }
.u-d-flex_gap-10px_ai-center.u-d-flex_gap-10px_ai-center.u-d-flex_gap-10px_ai-center.u-d-flex_gap-10px_ai-center { display:flex;gap:10px;align-items:center; }
.u-d-flex_gap-10px_fwrap-wrap.u-d-flex_gap-10px_fwrap-wrap.u-d-flex_gap-10px_fwrap-wrap.u-d-flex_gap-10px_fwrap-wrap { display:flex; gap:10px; flex-wrap:wrap; }
.u-d-flex_gap-10px_fwrap-wrap_mt-12px.u-d-flex_gap-10px_fwrap-wrap_mt-12px.u-d-flex_gap-10px_fwrap-wrap_mt-12px.u-d-flex_gap-10px_fwrap-wrap_mt-12px { display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.u-d-flex_gap-10px_mt-20px.u-d-flex_gap-10px_mt-20px.u-d-flex_gap-10px_mt-20px.u-d-flex_gap-10px_mt-20px { display:flex; gap: 10px; margin-top: 20px; }
.u-d-flex_gap-8px.u-d-flex_gap-8px.u-d-flex_gap-8px.u-d-flex_gap-8px { display: flex; gap: 8px; }
.u-d-flex_gap-8px_ai-center.u-d-flex_gap-8px_ai-center.u-d-flex_gap-8px_ai-center.u-d-flex_gap-8px_ai-center { display:flex;gap:8px;align-items:center; }
.u-d-flex_gap-8px_ai-center_fwrap-wrap_mt-6px.u-d-flex_gap-8px_ai-center_fwrap-wrap_mt-6px.u-d-flex_gap-8px_ai-center_fwrap-wrap_mt-6px.u-d-flex_gap-8px_ai-center_fwrap-wrap_mt-6px { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:6px; }
.u-d-flex_gap-8px_ai-center_mb-8px.u-d-flex_gap-8px_ai-center_mb-8px.u-d-flex_gap-8px_ai-center_mb-8px.u-d-flex_gap-8px_ai-center_mb-8px { display:flex;gap:8px;align-items:center;margin-bottom:8px; }
.u-d-flex_gap-8px_ai-center_mt-8px.u-d-flex_gap-8px_ai-center_mt-8px.u-d-flex_gap-8px_ai-center_mt-8px.u-d-flex_gap-8px_ai-center_mt-8px { display:flex;gap:8px;align-items:center;margin-top:8px; }
.u-d-flex_gap-8px_ai-flex-start_mt-14px_cur-pointer.u-d-flex_gap-8px_ai-flex-start_mt-14px_cur-pointer.u-d-flex_gap-8px_ai-flex-start_mt-14px_cur-pointer.u-d-flex_gap-8px_ai-flex-start_mt-14px_cur-pointer { display:flex; gap:8px; align-items:flex-start; margin-top:14px; cursor:pointer; }
.u-d-flex_gap-8px_ai-start.u-d-flex_gap-8px_ai-start.u-d-flex_gap-8px_ai-start.u-d-flex_gap-8px_ai-start { display:flex;gap:8px;align-items:start; }
.u-d-flex_gap-8px_fwrap-wrap.u-d-flex_gap-8px_fwrap-wrap.u-d-flex_gap-8px_fwrap-wrap.u-d-flex_gap-8px_fwrap-wrap { display:flex;gap:8px;flex-wrap:wrap; }
.u-d-flex_jc-space-between_ai-baseline.u-d-flex_jc-space-between_ai-baseline.u-d-flex_jc-space-between_ai-baseline.u-d-flex_jc-space-between_ai-baseline { display: flex; justify-content: space-between; align-items: baseline; }
.u-d-grid_gap-12px.u-d-grid_gap-12px.u-d-grid_gap-12px.u-d-grid_gap-12px { display: grid; gap: 12px; }
.u-d-grid_gap-12px_gtc-repeat-auto-fill--minmax.u-d-grid_gap-12px_gtc-repeat-auto-fill--minmax.u-d-grid_gap-12px_gtc-repeat-auto-fill--minmax.u-d-grid_gap-12px_gtc-repeat-auto-fill--minmax { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.u-d-grid_gap-14px_c-sx-text-2_fs-15px_lh-1_7_maxw-68ch.u-d-grid_gap-14px_c-sx-text-2_fs-15px_lh-1_7_maxw-68ch.u-d-grid_gap-14px_c-sx-text-2_fs-15px_lh-1_7_maxw-68ch.u-d-grid_gap-14px_c-sx-text-2_fs-15px_lh-1_7_maxw-68ch { display: grid; gap: 14px; color: var(--sx-text-2); font-size: 15px; line-height: 1.7; max-width: 68ch; }
.u-d-grid_gap-16px_c-sx-text-2_fs-15px_lh-1_65.u-d-grid_gap-16px_c-sx-text-2_fs-15px_lh-1_65.u-d-grid_gap-16px_c-sx-text-2_fs-15px_lh-1_65.u-d-grid_gap-16px_c-sx-text-2_fs-15px_lh-1_65 { display: grid; gap: 16px; color: var(--sx-text-2); font-size: 15px; line-height: 1.65; }
.u-d-grid_gap-24px_maxw-880px.u-d-grid_gap-24px_maxw-880px.u-d-grid_gap-24px_maxw-880px.u-d-grid_gap-24px_maxw-880px { display: grid; gap: 24px; max-width: 880px; }
.u-d-grid_gap-32px_maxw-880px.u-d-grid_gap-32px_maxw-880px.u-d-grid_gap-32px_maxw-880px.u-d-grid_gap-32px_maxw-880px { display: grid; gap: 32px; max-width: 880px; }
.u-d-grid_gap-40px_maxw-880px.u-d-grid_gap-40px_maxw-880px.u-d-grid_gap-40px_maxw-880px.u-d-grid_gap-40px_maxw-880px { display: grid; gap: 40px; max-width: 880px; }
.u-d-inline-block_td-none_p-10px-24px.u-d-inline-block_td-none_p-10px-24px.u-d-inline-block_td-none_p-10px-24px.u-d-inline-block_td-none_p-10px-24px { display:inline-block;text-decoration:none;padding:10px 24px; }
.u-ff-font-mono_fs-0_82rem_ws-pre.u-ff-font-mono_fs-0_82rem_ws-pre.u-ff-font-mono_fs-0_82rem_ws-pre.u-ff-font-mono_fs-0_82rem_ws-pre { font-family:var(--font-mono,monospace);font-size:0.82rem;white-space:pre; }
.u-ff-sx-font-body_fs-12px_c-sx-text-3_fw-500.u-ff-sx-font-body_fs-12px_c-sx-text-3_fw-500.u-ff-sx-font-body_fs-12px_c-sx-text-3_fw-500.u-ff-sx-font-body_fs-12px_c-sx-text-3_fw-500 { font-family: var(--sx-font-body); font-size: 12px; color: var(--sx-text-3); font-weight: 500; }
.u-flex-1.u-flex-1.u-flex-1.u-flex-1 { flex: 1; }
.u-flex-1-1-320px_minw-0.u-flex-1-1-320px_minw-0.u-flex-1-1-320px_minw-0.u-flex-1-1-320px_minw-0 { flex: 1 1 320px; min-width: 0; }
.u-flex-1-2.u-flex-1-2.u-flex-1-2.u-flex-1-2 { flex:1; }
.u-flex-15.u-flex-15.u-flex-15.u-flex-15 { flex: 15; }
.u-flex-85.u-flex-85.u-flex-85.u-flex-85 { flex: 85; }
.u-flex-none_mt-8px.u-flex-none_mt-8px.u-flex-none_mt-8px.u-flex-none_mt-8px { flex: none; margin-top: 8px; }
.u-fs-0_8rem_mt-4px.u-fs-0_8rem_mt-4px.u-fs-0_8rem_mt-4px.u-fs-0_8rem_mt-4px { font-size:0.8rem;margin-top:4px; }
.u-fs-11px_c-sx-text-3_mt-2px_ls-0_04em.u-fs-11px_c-sx-text-3_mt-2px_ls-0_04em.u-fs-11px_c-sx-text-3_mt-2px_ls-0_04em.u-fs-11px_c-sx-text-3_mt-2px_ls-0_04em { font-size: 11px; color: var(--sx-text-3); margin-top: 2px; letter-spacing: 0.04em; }
.u-fs-12_5px_c-sx-text-3_mt-12px_lh-1_5.u-fs-12_5px_c-sx-text-3_mt-12px_lh-1_5.u-fs-12_5px_c-sx-text-3_mt-12px_lh-1_5.u-fs-12_5px_c-sx-text-3_mt-12px_lh-1_5 { font-size: 12.5px; color: var(--sx-text-3); margin-top: 12px; line-height: 1.5; }
.u-fs-12px_c-sx-text-3.u-fs-12px_c-sx-text-3.u-fs-12px_c-sx-text-3.u-fs-12px_c-sx-text-3 { font-size: 12px; color: var(--sx-text-3, #8a93a6); }
.u-fs-13_5px.u-fs-13_5px.u-fs-13_5px.u-fs-13_5px { font-size: 13.5px; }
.u-fs-13px_c-sx-text-2.u-fs-13px_c-sx-text-2.u-fs-13px_c-sx-text-2.u-fs-13px_c-sx-text-2 { font-size: 13px; color: var(--sx-text-2); }
.u-fs-14px_c-sx-text-2_lh-1_5.u-fs-14px_c-sx-text-2_lh-1_5.u-fs-14px_c-sx-text-2_lh-1_5.u-fs-14px_c-sx-text-2_lh-1_5 { font-size: 14px; color: var(--sx-text-2); line-height: 1.5; }
.u-fs-15px_fw-600_ls-n0_01em.u-fs-15px_fw-600_ls-n0_01em.u-fs-15px_fw-600_ls-n0_01em.u-fs-15px_fw-600_ls-n0_01em { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.u-fs-16px_fw-600_c-sx-text_lh-1_3.u-fs-16px_fw-600_c-sx-text_lh-1_3.u-fs-16px_fw-600_c-sx-text_lh-1_3.u-fs-16px_fw-600_c-sx-text_lh-1_3 { font-size: 16px; font-weight: 600; color: var(--sx-text); line-height: 1.3; }
.u-fs-18px_fw-600.u-fs-18px_fw-600.u-fs-18px_fw-600.u-fs-18px_fw-600 { font-size: 18px; font-weight: 600; }
.u-fs-1_1rem_c-text-secondary.u-fs-1_1rem_c-text-secondary.u-fs-1_1rem_c-text-secondary.u-fs-1_1rem_c-text-secondary { font-size: 1.1rem; color: var(--text-secondary); }
.u-fs-1_4rem.u-fs-1_4rem.u-fs-1_4rem.u-fs-1_4rem { font-size:1.4rem; }
.u-fs-1rem_fw-600.u-fs-1rem_fw-600.u-fs-1rem_fw-600.u-fs-1rem_fw-600 { font-size: 1rem; font-weight: 600; }
.u-fs-1rem_fw-600_c-text-secondary.u-fs-1rem_fw-600_c-text-secondary.u-fs-1rem_fw-600_c-text-secondary.u-fs-1rem_fw-600_c-text-secondary { font-size:1rem;font-weight:600;color:var(--text-secondary); }
.u-fs-2_5rem_mb-16px.u-fs-2_5rem_mb-16px.u-fs-2_5rem_mb-16px.u-fs-2_5rem_mb-16px { font-size:2.5rem;margin-bottom:16px; }
.u-fs-46px_maxw-20ch.u-fs-46px_maxw-20ch.u-fs-46px_maxw-20ch.u-fs-46px_maxw-20ch { font-size: 46px; max-width: 20ch; }
.u-fw-400.u-fw-400.u-fw-400.u-fw-400 { font-weight:400; }
.u-fw-400_c-text-secondary.u-fw-400_c-text-secondary.u-fw-400_c-text-secondary.u-fw-400_c-text-secondary { font-weight: 400; color: var(--text-secondary); }
.u-fw-400_c-text-secondary-2.u-fw-400_c-text-secondary-2.u-fw-400_c-text-secondary-2.u-fw-400_c-text-secondary-2 { font-weight:400; color: var(--text-secondary); }
.u-fw-600.u-fw-600.u-fw-600.u-fw-600 { font-weight:600; }
.u-fw-600_d-block.u-fw-600_d-block.u-fw-600_d-block.u-fw-600_d-block { font-weight:600;display:block; }
.u-fw-600_d-block_mt-1rem.u-fw-600_d-block_mt-1rem.u-fw-600_d-block_mt-1rem.u-fw-600_d-block_mt-1rem { font-weight:600;display:block;margin-top:1rem; }
.u-fw-600_fs-0_85rem_m-0-0-8px.u-fw-600_fs-0_85rem_m-0-0-8px.u-fw-600_fs-0_85rem_m-0-0-8px.u-fw-600_fs-0_85rem_m-0-0-8px { font-weight: 600; font-size: 0.85rem; margin: 0 0 8px; }
.u-h-18px_fs-10px.u-h-18px_fs-10px.u-h-18px_fs-10px.u-h-18px_fs-10px { height:18px; font-size:10px; }
.u-h-38px.u-h-38px.u-h-38px.u-h-38px { height:38px; }
.u-jc-flex-end.u-jc-flex-end.u-jc-flex-end.u-jc-flex-end { justify-content:flex-end; }
.u-lstyle-none_m-0_p-0_d-flex_fdir-column_gap-6px.u-lstyle-none_m-0_p-0_d-flex_fdir-column_gap-6px.u-lstyle-none_m-0_p-0_d-flex_fdir-column_gap-6px.u-lstyle-none_m-0_p-0_d-flex_fdir-column_gap-6px { list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px; }
.u-lstyle-none_m-10px-0-0_p-0_fs-_78rem_lh-1_6.u-lstyle-none_m-10px-0-0_p-0_fs-_78rem_lh-1_6.u-lstyle-none_m-10px-0-0_p-0_fs-_78rem_lh-1_6.u-lstyle-none_m-10px-0-0_p-0_fs-_78rem_lh-1_6 { list-style:none;margin:10px 0 0;padding:0;font-size:.78rem;line-height:1.6; }
.u-m-0.u-m-0.u-m-0.u-m-0 { margin:0; }
.u-m-0-0-0_25rem.u-m-0-0-0_25rem.u-m-0-0-0_25rem.u-m-0-0-0_25rem { margin: 0 0 0.25rem; }
.u-m-0-0-0_4rem.u-m-0-0-0_4rem.u-m-0-0-0_4rem.u-m-0-0-0_4rem { margin: 0 0 0.4rem; }
.u-m-0-0-0_5rem.u-m-0-0-0_5rem.u-m-0-0-0_5rem.u-m-0-0-0_5rem { margin: 0 0 0.5rem; }
.u-m-0-0-10px.u-m-0-0-10px.u-m-0-0-10px.u-m-0-0-10px { margin:0 0 10px; }
.u-m-0-0-12px.u-m-0-0-12px.u-m-0-0-12px.u-m-0-0-12px { margin:0 0 12px; }
.u-m-0-0-12px_fs-22px_ls-n0_02em.u-m-0-0-12px_fs-22px_ls-n0_02em.u-m-0-0-12px_fs-22px_ls-n0_02em.u-m-0-0-12px_fs-22px_ls-n0_02em { margin: 0 0 12px; font-size: 22px; letter-spacing: -0.02em; }
.u-m-0-0-16px.u-m-0-0-16px.u-m-0-0-16px.u-m-0-0-16px { margin:0 0 16px; }
.u-m-0-0-16px_c-sx-text-2_fs-15px_lh-1_6_maxw-68ch.u-m-0-0-16px_c-sx-text-2_fs-15px_lh-1_6_maxw-68ch.u-m-0-0-16px_c-sx-text-2_fs-15px_lh-1_6_maxw-68ch.u-m-0-0-16px_c-sx-text-2_fs-15px_lh-1_6_maxw-68ch { margin: 0 0 16px; color: var(--sx-text-2); font-size: 15px; line-height: 1.6; max-width: 68ch; }
.u-m-0-0-16px_fs-22px_ls-n0_02em.u-m-0-0-16px_fs-22px_ls-n0_02em.u-m-0-0-16px_fs-22px_ls-n0_02em.u-m-0-0-16px_fs-22px_ls-n0_02em { margin: 0 0 16px; font-size: 22px; letter-spacing: -0.02em; }
.u-m-0-0-1rem.u-m-0-0-1rem.u-m-0-0-1rem.u-m-0-0-1rem { margin: 0 0 1rem; }
.u-m-0-0-4px.u-m-0-0-4px.u-m-0-0-4px.u-m-0-0-4px { margin:0 0 4px; }
.u-m-0-0-6px.u-m-0-0-6px.u-m-0-0-6px.u-m-0-0-6px { margin:0 0 6px; }
.u-m-0-0-6px_fs-18px.u-m-0-0-6px_fs-18px.u-m-0-0-6px_fs-18px.u-m-0-0-6px_fs-18px { margin: 0 0 6px; font-size: 18px; }
.u-m-0-0-8px.u-m-0-0-8px.u-m-0-0-8px.u-m-0-0-8px { margin:0 0 8px; }
.u-m-0-0-8px-2.u-m-0-0-8px-2.u-m-0-0-8px-2.u-m-0-0-8px-2 { margin: 0 0 8px; }
.u-m-0-0-8px-3.u-m-0-0-8px-3.u-m-0-0-8px-3.u-m-0-0-8px-3 { margin:0 0 8px; }
.u-m-0-0-8px_fs-22px_ls-n0_02em.u-m-0-0-8px_fs-22px_ls-n0_02em.u-m-0-0-8px_fs-22px_ls-n0_02em.u-m-0-0-8px_fs-22px_ls-n0_02em { margin: 0 0 8px; font-size: 22px; letter-spacing: -0.02em; }
.u-m-0-0-8px_fw-600.u-m-0-0-8px_fw-600.u-m-0-0-8px_fw-600.u-m-0-0-8px_fw-600 { margin:0 0 8px;font-weight:600; }
.u-m-0-2.u-m-0-2.u-m-0-2.u-m-0-2 { margin: 0; }
.u-m-0-3.u-m-0-3.u-m-0-3.u-m-0-3 { margin:0; }
.u-m-0_c-sx-text-2_fs-14px.u-m-0_c-sx-text-2_fs-14px.u-m-0_c-sx-text-2_fs-14px.u-m-0_c-sx-text-2_fs-14px { margin: 0; color: var(--sx-text-2); font-size: 14px; }
.u-m-0_c-sx-text-3_fs-14px.u-m-0_c-sx-text-3_fs-14px.u-m-0_c-sx-text-3_fs-14px.u-m-0_c-sx-text-3_fs-14px { margin: 0; color: var(--sx-text-3); font-size: 14px; }
.u-m-0_fs-18px.u-m-0_fs-18px.u-m-0_fs-18px.u-m-0_fs-18px { margin: 0; font-size: 18px; }
.u-m-0_fs-24px_ls-n0_02em.u-m-0_fs-24px_ls-n0_02em.u-m-0_fs-24px_ls-n0_02em.u-m-0_fs-24px_ls-n0_02em { margin: 0; font-size: 24px; letter-spacing: -0.02em; }
.u-m-0_fs-28px_ls-n0_02em.u-m-0_fs-28px_ls-n0_02em.u-m-0_fs-28px_ls-n0_02em.u-m-0_fs-28px_ls-n0_02em { margin: 0; font-size: 28px; letter-spacing: -0.02em; }
.u-m-0_maxw-46ch.u-m-0_maxw-46ch.u-m-0_maxw-46ch.u-m-0_maxw-46ch { margin: 0; max-width: 46ch; }
.u-m-0_pl-18px.u-m-0_pl-18px.u-m-0_pl-18px.u-m-0_pl-18px { margin: 0; padding-left: 18px; }
.u-m-0_pl-22px_d-grid_gap-8px_c-sx-text-2_fs-15px_lh-1_6.u-m-0_pl-22px_d-grid_gap-8px_c-sx-text-2_fs-15px_lh-1_6.u-m-0_pl-22px_d-grid_gap-8px_c-sx-text-2_fs-15px_lh-1_6.u-m-0_pl-22px_d-grid_gap-8px_c-sx-text-2_fs-15px_lh-1_6 { margin: 0; padding-left: 22px; display: grid; gap: 8px; color: var(--sx-text-2); font-size: 15px; line-height: 1.6; }
.u-m-10px-0-0_c-sx-text-2_fs-14px_lh-1_6.u-m-10px-0-0_c-sx-text-2_fs-14px_lh-1_6.u-m-10px-0-0_c-sx-text-2_fs-14px_lh-1_6.u-m-10px-0-0_c-sx-text-2_fs-14px_lh-1_6 { margin: 10px 0 0; color: var(--sx-text-2); font-size: 14px; line-height: 1.6; }
.u-m-10px-0-0_c-sx-text-2_fs-14px_lh-1_6_ws-pre-line.u-m-10px-0-0_c-sx-text-2_fs-14px_lh-1_6_ws-pre-line.u-m-10px-0-0_c-sx-text-2_fs-14px_lh-1_6_ws-pre-line.u-m-10px-0-0_c-sx-text-2_fs-14px_lh-1_6_ws-pre-line { margin: 10px 0 0; color: var(--sx-text-2); font-size: 14px; line-height: 1.6; white-space: pre-line; }
.u-m-16px-0-0_fs-14px.u-m-16px-0-0_fs-14px.u-m-16px-0-0_fs-14px.u-m-16px-0-0_fs-14px { margin: 16px 0 0; font-size: 14px; }
.u-m-4px-0-10px.u-m-4px-0-10px.u-m-4px-0-10px.u-m-4px-0-10px { margin: 4px 0 10px; }
.u-m-8px-0-0.u-m-8px-0-0.u-m-8px-0-0.u-m-8px-0-0 { margin:8px 0 0; }
.u-m-8px-0-0_c-sx-text-3_fs-14px.u-m-8px-0-0_c-sx-text-3_fs-14px.u-m-8px-0-0_c-sx-text-3_fs-14px.u-m-8px-0-0_c-sx-text-3_fs-14px { margin: 8px 0 0; color: var(--sx-text-3); font-size: 14px; }
.u-m-8px-0-0_fs-_82rem_c-text-secondary.u-m-8px-0-0_fs-_82rem_c-text-secondary.u-m-8px-0-0_fs-_82rem_c-text-secondary.u-m-8px-0-0_fs-_82rem_c-text-secondary { margin:8px 0 0;font-size:.82rem;color:var(--text-secondary,#52525b); }
.u-m-_35rem-0_d-flex_gap-_5rem_ai-center.u-m-_35rem-0_d-flex_gap-_5rem_ai-center.u-m-_35rem-0_d-flex_gap-_5rem_ai-center.u-m-_35rem-0_d-flex_gap-_5rem_ai-center { margin:.35rem 0;display:flex;gap:.5rem;align-items:center; }
.u-m-_5rem-0.u-m-_5rem-0.u-m-_5rem-0.u-m-_5rem-0 { margin:.5rem 0; }
.u-maxw-62ch.u-maxw-62ch.u-maxw-62ch.u-maxw-62ch { max-width: 62ch; }
.u-maxw-720px.u-maxw-720px.u-maxw-720px.u-maxw-720px { max-width: 720px; }
.u-maxw-760px.u-maxw-760px.u-maxw-760px.u-maxw-760px { max-width: 760px; }
.u-mb-0.u-mb-0.u-mb-0.u-mb-0 { margin-bottom:0; }
.u-mb-0-2.u-mb-0-2.u-mb-0-2.u-mb-0-2 { margin-bottom: 0; }
.u-mb-0_5rem.u-mb-0_5rem.u-mb-0_5rem.u-mb-0_5rem { margin-bottom: 0.5rem; }
.u-mb-10px.u-mb-10px.u-mb-10px.u-mb-10px { margin-bottom:10px; }
.u-mb-10px-2.u-mb-10px-2.u-mb-10px-2.u-mb-10px-2 { margin-bottom:10px; }
.u-mb-12px.u-mb-12px.u-mb-12px.u-mb-12px { margin-bottom:12px; }
.u-mb-12px-2.u-mb-12px-2.u-mb-12px-2.u-mb-12px-2 { margin-bottom: 12px; }
.u-mb-14px.u-mb-14px.u-mb-14px.u-mb-14px { margin-bottom: 14px; }
.u-mb-16px.u-mb-16px.u-mb-16px.u-mb-16px { margin-bottom: 16px; }
.u-mb-18px.u-mb-18px.u-mb-18px.u-mb-18px { margin-bottom: 18px; }
.u-mb-1_5rem.u-mb-1_5rem.u-mb-1_5rem.u-mb-1_5rem { margin-bottom:1.5rem; }
.u-mb-1rem.u-mb-1rem.u-mb-1rem.u-mb-1rem { margin-bottom: 1rem; }
.u-mb-24px.u-mb-24px.u-mb-24px.u-mb-24px { margin-bottom:24px; }
.u-mb-4px.u-mb-4px.u-mb-4px.u-mb-4px { margin-bottom:4px; }
.u-mb-6px.u-mb-6px.u-mb-6px.u-mb-6px { margin-bottom: 6px; }
.u-mb-6px-2.u-mb-6px-2.u-mb-6px-2.u-mb-6px-2 { margin-bottom:6px; }
.u-mb-8px.u-mb-8px.u-mb-8px.u-mb-8px { margin-bottom:8px; }
.u-minh-60vh_d-flex_ai-center_jc-center.u-minh-60vh_d-flex_ai-center_jc-center.u-minh-60vh_d-flex_ai-center_jc-center.u-minh-60vh_d-flex_ai-center_jc-center { min-height: 60vh; display: flex; align-items: center; justify-content: center; }
.u-minh-80px.u-minh-80px.u-minh-80px.u-minh-80px { min-height: 80px; }
.u-minw-18rem_maxw-100p_p-0_4rem-0_55rem_fw-400.u-minw-18rem_maxw-100p_p-0_4rem-0_55rem_fw-400.u-minw-18rem_maxw-100p_p-0_4rem-0_55rem_fw-400.u-minw-18rem_maxw-100p_p-0_4rem-0_55rem_fw-400 { min-width: 18rem; max-width: 100%; padding: 0.4rem 0.55rem; font-weight: 400; }
.u-ml-auto_ws-nowrap.u-ml-auto_ws-nowrap.u-ml-auto_ws-nowrap.u-ml-auto_ws-nowrap { margin-left:auto;white-space:nowrap; }
.u-mr-4px.u-mr-4px.u-mr-4px.u-mr-4px { margin-right:4px; }
.u-mt-10px.u-mt-10px.u-mt-10px.u-mt-10px { margin-top: 10px; }
.u-mt-10px-2.u-mt-10px-2.u-mt-10px-2.u-mt-10px-2 { margin-top:10px; }
.u-mt-10px-3.u-mt-10px-3.u-mt-10px-3.u-mt-10px-3 { margin-top:10px; }
.u-mt-10px_fs-12px_c-sx-text-3.u-mt-10px_fs-12px_c-sx-text-3.u-mt-10px_fs-12px_c-sx-text-3.u-mt-10px_fs-12px_c-sx-text-3 { margin-top: 10px; font-size: 12px; color: var(--sx-text-3); }
.u-mt-12px.u-mt-12px.u-mt-12px.u-mt-12px { margin-top: 12px; }
.u-mt-12px-2.u-mt-12px-2.u-mt-12px-2.u-mt-12px-2 { margin-top:12px; }
.u-mt-12px-3.u-mt-12px-3.u-mt-12px-3.u-mt-12px-3 { margin-top:12px; }
.u-mt-14px.u-mt-14px.u-mt-14px.u-mt-14px { margin-top: 14px; }
.u-mt-14px-2.u-mt-14px-2.u-mt-14px-2.u-mt-14px-2 { margin-top:14px; }
.u-mt-14px_as-flex-start.u-mt-14px_as-flex-start.u-mt-14px_as-flex-start.u-mt-14px_as-flex-start { margin-top: 14px; align-self: flex-start; }
.u-mt-14px_d-inline-flex.u-mt-14px_d-inline-flex.u-mt-14px_d-inline-flex.u-mt-14px_d-inline-flex { margin-top:14px;display:inline-flex; }
.u-mt-16px.u-mt-16px.u-mt-16px.u-mt-16px { margin-top: 16px; }
.u-mt-16px-2.u-mt-16px-2.u-mt-16px-2.u-mt-16px-2 { margin-top:16px; }
.u-mt-18px.u-mt-18px.u-mt-18px.u-mt-18px { margin-top: 18px; }
.u-mt-20px.u-mt-20px.u-mt-20px.u-mt-20px { margin-top: 20px; }
.u-mt-1rem_c-text-secondary_fs-0_9rem.u-mt-1rem_c-text-secondary_fs-0_9rem.u-mt-1rem_c-text-secondary_fs-0_9rem.u-mt-1rem_c-text-secondary_fs-0_9rem { margin-top: 1rem; color: var(--text-secondary); font-size: 0.9rem; }
.u-mt-20px_maxw-52ch.u-mt-20px_maxw-52ch.u-mt-20px_maxw-52ch.u-mt-20px_maxw-52ch { margin-top: 20px; max-width: 52ch; }
.u-mt-24px.u-mt-24px.u-mt-24px.u-mt-24px { margin-top: 24px; }
.u-mt-24px-2.u-mt-24px-2.u-mt-24px-2.u-mt-24px-2 { margin-top:24px; }
.u-mt-24px_d-flex_gap-10px_fwrap-wrap.u-mt-24px_d-flex_gap-10px_fwrap-wrap.u-mt-24px_d-flex_gap-10px_fwrap-wrap.u-mt-24px_d-flex_gap-10px_fwrap-wrap { margin-top: 24px; display: flex; gap: 10px; flex-wrap: wrap; }
.u-mt-28px.u-mt-28px.u-mt-28px.u-mt-28px { margin-top:28px; }
.u-mt-32px.u-mt-32px.u-mt-32px.u-mt-32px { margin-top: 32px; }
.u-mt-32px-2.u-mt-32px-2.u-mt-32px-2.u-mt-32px-2 { margin-top: 32px; }
.u-mt-32px-3.u-mt-32px-3.u-mt-32px-3.u-mt-32px-3 { margin-top:32px; }
.u-mt-3px.u-mt-3px.u-mt-3px.u-mt-3px { margin-top:3px; }
.u-mt-40px.u-mt-40px.u-mt-40px.u-mt-40px { margin-top: 40px; }
.u-mt-48px_p-0-0-64px.u-mt-48px_p-0-0-64px.u-mt-48px_p-0-0-64px.u-mt-48px_p-0-0-64px { margin-top: 48px; padding: 0 0 64px; }
.u-mt-4px.u-mt-4px.u-mt-4px.u-mt-4px { margin-top:4px; }
.u-mt-56px.u-mt-56px.u-mt-56px.u-mt-56px { margin-top: 56px; }
.u-mt-56px_d-flex_ai-center_gap-8px_fs-11px_c-sx-text-3.u-mt-56px_d-flex_ai-center_gap-8px_fs-11px_c-sx-text-3.u-mt-56px_d-flex_ai-center_gap-8px_fs-11px_c-sx-text-3.u-mt-56px_d-flex_ai-center_gap-8px_fs-11px_c-sx-text-3 { margin-top: 56px; display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--sx-text-3); }
.u-mt-6px.u-mt-6px.u-mt-6px.u-mt-6px { margin-top:6px; }
.u-mt-6px-2.u-mt-6px-2.u-mt-6px-2.u-mt-6px-2 { margin-top:6px; }
.u-mt-6px-3.u-mt-6px-3.u-mt-6px-3.u-mt-6px-3 { margin-top: 6px; }
.u-mt-6px_c-danger-500.u-mt-6px_c-danger-500.u-mt-6px_c-danger-500.u-mt-6px_c-danger-500 { margin-top:6px;color:var(--danger-500); }
.u-mt-80px.u-mt-80px.u-mt-80px.u-mt-80px { margin-top: 80px; }
.u-mt-8px.u-mt-8px.u-mt-8px.u-mt-8px { margin-top: 8px; }
.u-mt-8px-2.u-mt-8px-2.u-mt-8px-2.u-mt-8px-2 { margin-top:8px; }
.u-mt-96px.u-mt-96px.u-mt-96px.u-mt-96px { margin-top: 96px; }
.u-mt-auto_fs-13px_c-sx-text-3.u-mt-auto_fs-13px_c-sx-text-3.u-mt-auto_fs-13px_c-sx-text-3.u-mt-auto_fs-13px_c-sx-text-3 { margin-top: auto; font-size: 13px; color: var(--sx-text-3); }
.u-op-0_4.u-op-0_4.u-op-0_4.u-op-0_4 { opacity: 0.4; }
.u-p-0.u-p-0.u-p-0.u-p-0 { padding: 0; }
.u-p-0-16px.u-p-0-16px.u-p-0-16px.u-p-0-16px { padding: 0 16px; }
.u-p-12px-18px.u-p-12px-18px.u-p-12px-18px.u-p-12px-18px { padding: 12px 18px; }
.u-p-1_25rem_mb-1_25rem.u-p-1_25rem_mb-1_25rem.u-p-1_25rem_mb-1_25rem.u-p-1_25rem_mb-1_25rem { padding: 1.25rem; margin-bottom: 1.25rem; }
.u-p-1_5rem.u-p-1_5rem.u-p-1_5rem.u-p-1_5rem { padding: 1.5rem; }
.u-p-1_5rem_mb-1_5rem.u-p-1_5rem_mb-1_5rem.u-p-1_5rem_mb-1_5rem.u-p-1_5rem_mb-1_5rem { padding: 1.5rem; margin-bottom: 1.5rem; }
.u-p-24px.u-p-24px.u-p-24px.u-p-24px { padding:24px; }
.u-p-28px.u-p-28px.u-p-28px.u-p-28px { padding: 28px; }
.u-p-32px_ta-center.u-p-32px_ta-center.u-p-32px_ta-center.u-p-32px_ta-center { padding: 32px; text-align: center; }
.u-pb-8px.u-pb-8px.u-pb-8px.u-pb-8px { padding-bottom: 8px; }
.u-pl-0.u-pl-0.u-pl-0.u-pl-0 { padding-left:0; }
.u-pos-absolute.u-pos-absolute.u-pos-absolute.u-pos-absolute { position:absolute; }
.u-pos-absolute_t-8px_r-8px.u-pos-absolute_t-8px_r-8px.u-pos-absolute_t-8px_r-8px.u-pos-absolute_t-8px_r-8px { position:absolute;top:8px;right:8px; }
.u-pos-absolute_w-0_h-0_ov-hidden.u-pos-absolute_w-0_h-0_ov-hidden.u-pos-absolute_w-0_h-0_ov-hidden.u-pos-absolute_w-0_h-0_ov-hidden { position: absolute; width: 0; height: 0; overflow: hidden; }
.u-pos-relative.u-pos-relative.u-pos-relative.u-pos-relative { position: relative; }
.u-pos-relative-2.u-pos-relative-2.u-pos-relative-2.u-pos-relative-2 { position:relative; }
.u-pos-static_mt-8px.u-pos-static_mt-8px.u-pos-static_mt-8px.u-pos-static_mt-8px { position:static;margin-top:8px; }
.u-s-1e3db386.u-s-1e3db386.u-s-1e3db386.u-s-1e3db386 { border-left:3px solid var(--pd-type);padding:10px 14px;background:var(--pd-bg-2);margin-bottom:4px;border-radius:0 6px 6px 0; }
.u-s-81598ba5.u-s-81598ba5.u-s-81598ba5.u-s-81598ba5 { scroll-margin-top: 84px; }
.u-s-aaf67cb4.u-s-aaf67cb4.u-s-aaf67cb4.u-s-aaf67cb4 { overflow-wrap:anywhere; user-select:all; }
.u-s-as-f647a65b.u-s-as-f647a65b.u-s-as-f647a65b.u-s-as-f647a65b { align-self: flex-start; font-size: 12px; font-weight: 600; color: var(--sx-brand-3); text-transform: uppercase; letter-spacing: 0.04em; }
.u-s-b6f50529.u-s-b6f50529.u-s-b6f50529.u-s-b6f50529 { font-variant-numeric: tabular-nums; }
.u-s-bd-f37b4240.u-s-bd-f37b4240.u-s-bd-f37b4240.u-s-bd-f37b4240 { border: 1px solid var(--sx-line); border-radius: var(--sx-r-md); padding: 14px 16px; background: var(--sx-surface); }
.u-s-bg-2dd5125e.u-s-bg-2dd5125e.u-s-bg-2dd5125e.u-s-bg-2dd5125e { background: linear-gradient(135deg, #1A1F6B, #3D4DFF); }
.u-s-bg-733e64c8.u-s-bg-733e64c8.u-s-bg-733e64c8.u-s-bg-733e64c8 { background:#f4f4f5;color:#3f3f46;border:1px solid var(--border,#d4d4d8); }
.u-s-c-a23c63d9.u-s-c-a23c63d9.u-s-c-a23c63d9.u-s-c-a23c63d9 { color: var(--sx-brand-text); box-shadow: 0 0 0 1px rgba(61,77,255,0.30) inset; background: rgba(61,77,255,0.08); }
.u-s-c49c1fbc.u-s-c49c1fbc.u-s-c49c1fbc.u-s-c49c1fbc { border-left:3px solid var(--pd-line-strong);padding:10px 14px;background:var(--pd-bg-2);margin-bottom:4px;border-radius:0 6px 6px 0; }
.u-s-d-159d7429.u-s-d-159d7429.u-s-d-159d7429.u-s-d-159d7429 { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 20px; border: 1px solid var(--sx-line); border-radius: var(--sx-r-md); background: var(--sx-surface); }
.u-s-d-9884119f.u-s-d-9884119f.u-s-d-9884119f.u-s-d-9884119f { display: inline-block; padding: 2px 9px; border-radius: 999px; background: rgba(124, 227, 212, 0.16); color: var(--sx-brand-text); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.u-s-d-c19e39a5.u-s-d-c19e39a5.u-s-d-c19e39a5.u-s-d-c19e39a5 { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--sx-line); border-radius: var(--sx-r-md); background: var(--sx-surface); text-decoration: none; color: inherit; }
.u-s-f30ff45b.u-s-f30ff45b.u-s-f30ff45b.u-s-f30ff45b { --tc: var(--sx-brand-3); background: transparent; box-shadow: 0 0 0 1.5px var(--sx-line) inset; justify-content: center; }
.u-s-ff-16d23eed.u-s-ff-16d23eed.u-s-ff-16d23eed.u-s-ff-16d23eed { font-family: var(--sx-countdown-font); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; }
.u-s-ff-32fe512a.u-s-ff-32fe512a.u-s-ff-32fe512a.u-s-ff-32fe512a { font-family: var(--sx-countdown-font); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.u-s-lstyle-4e037a67.u-s-lstyle-4e037a67.u-s-lstyle-4e037a67.u-s-lstyle-4e037a67 { list-style:none;margin:10px 0 0;padding:0;font-size:.82rem;color:var(--text-secondary,#52525b);line-height:1.7; }
.u-s-m-34cb648d.u-s-m-34cb648d.u-s-m-34cb648d.u-s-m-34cb648d { margin: 12px 0 0; padding-left: 22px; display: grid; gap: 8px; color: var(--sx-text-2); font-size: 15px; line-height: 1.6; }
.u-s-m-94731551.u-s-m-94731551.u-s-m-94731551.u-s-m-94731551 { margin:0 0 1.25rem;padding:.7rem 1rem;border-radius:8px;font-weight:600; background:rgba(34,197,94,0.12);color:#15803d;border:1px solid rgba(34,197,94,0.35); }
.u-s-m-9a0ad65c.u-s-m-9a0ad65c.u-s-m-9a0ad65c.u-s-m-9a0ad65c { margin:0 0 1.25rem;padding:.7rem 1rem;border-radius:8px;font-weight:600; background:rgba(239,68,68,0.12);color:#b91c1c;border:1px solid rgba(239,68,68,0.35); }
.u-s-m-af94a181.u-s-m-af94a181.u-s-m-af94a181.u-s-m-af94a181 { margin:16px 0;padding:12px 16px;border:1px solid var(--border);border-radius:10px; }
.u-s-maxw-2354e483.u-s-maxw-2354e483.u-s-maxw-2354e483.u-s-maxw-2354e483 { max-width:720px;margin:0 auto;padding:24px var(--shell-padding,24px) 48px;color:var(--sx-text-3);font-size:12px;text-align:center; }
.u-s-mt-1d5dfd00.u-s-mt-1d5dfd00.u-s-mt-1d5dfd00.u-s-mt-1d5dfd00 { margin-top: 64px; padding: 48px 0; border-top: 1px solid var(--sx-line); }
.u-s-mt-3e24d627.u-s-mt-3e24d627.u-s-mt-3e24d627.u-s-mt-3e24d627 { margin-top:28px;border-top:1px solid var(--border);padding-top:20px; }
.u-s-mt-6bf8d2d9.u-s-mt-6bf8d2d9.u-s-mt-6bf8d2d9.u-s-mt-6bf8d2d9 { margin-top: 72px; scroll-margin-top: 80px; }
.u-s-mt-711425fe.u-s-mt-711425fe.u-s-mt-711425fe.u-s-mt-711425fe { margin-top:14px;padding-top:12px;border-top:1px dashed var(--border,#d4d4d8); }
.u-s-mt-993842eb.u-s-mt-993842eb.u-s-mt-993842eb.u-s-mt-993842eb { margin-top: 56px; padding: 40px 0; border-top: 1px solid var(--sx-line); }
.u-s-p-007fd1b7.u-s-p-007fd1b7.u-s-p-007fd1b7.u-s-p-007fd1b7 { padding: 24px; border: 1px solid var(--sx-line); border-radius: var(--sx-r-md); background: var(--sx-surface-2, var(--sx-surface)); }
.u-s-p-49d7051a.u-s-p-49d7051a.u-s-p-49d7051a.u-s-p-49d7051a { padding:10px 16px;border-radius:8px;background:var(--primary-100);color:var(--primary-500);font-size:0.9rem;margin-bottom:16px; }
.u-s-p-76016db7.u-s-p-76016db7.u-s-p-76016db7.u-s-p-76016db7 { padding: 18px 20px; border: 1px solid var(--sx-line); border-radius: var(--sx-r-md); background: var(--sx-surface-2); color: var(--sx-text-2); font-size: 14px; line-height: 1.6; }
.u-s-pos-3922941c.u-s-pos-3922941c.u-s-pos-3922941c.u-s-pos-3922941c { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block; }
.u-s-pos-42ee8412.u-s-pos-42ee8412.u-s-pos-42ee8412.u-s-pos-42ee8412 { position:relative;min-height:360px;border-radius:var(--sx-r-lg);overflow:hidden;box-shadow:0 0 0 1px var(--sx-line) inset; }
.u-s-pos-a23869e6.u-s-pos-a23869e6.u-s-pos-a23869e6.u-s-pos-a23869e6 { position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none; }
.u-s-w-076e6b34.u-s-w-076e6b34.u-s-w-076e6b34.u-s-w-076e6b34 { width:120px;height:150px;object-fit:cover;border-radius:8px;display:block; box-shadow:0 0 0 1px rgba(0,0,0,0.1); }
.u-s-w-1cb6765b.u-s-w-1cb6765b.u-s-w-1cb6765b.u-s-w-1cb6765b { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--sx-brand-3); background: rgba(61,77,255,0.12); box-shadow: 0 0 0 1px rgba(61,77,255,0.24) inset; }
.u-s-w-3505afe5.u-s-w-3505afe5.u-s-w-3505afe5.u-s-w-3505afe5 { width:100%;max-width:44rem;padding:0.45rem 0.6rem;font:inherit; }
.u-s-w-7d94ae90.u-s-w-7d94ae90.u-s-w-7d94ae90.u-s-w-7d94ae90 { width:auto;padding:10px 12px;border:1px solid var(--border);border-radius:8px; }
.u-s-w-970a10fb.u-s-w-970a10fb.u-s-w-970a10fb.u-s-w-970a10fb { width:100%;box-sizing:border-box;font:inherit;padding:10px;border:1px solid var(--border,#d4d4d8);border-radius:8px;resize:vertical; }
.u-s-w-b29db193.u-s-w-b29db193.u-s-w-b29db193.u-s-w-b29db193 { width:100%; border:0; background:none; text-align:left; cursor:pointer; font:inherit; }
.u-s-w-ba92615c.u-s-w-ba92615c.u-s-w-ba92615c.u-s-w-ba92615c { width:120px;padding:10px 12px;border:1px solid var(--border);border-radius:8px; }
.u-s-w-fe683dbc.u-s-w-fe683dbc.u-s-w-fe683dbc.u-s-w-fe683dbc { width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:8px; background: var(--surface); color: var(--text-primary); }
.u-s-ws-3affaec0.u-s-ws-3affaec0.u-s-ws-3affaec0.u-s-ws-3affaec0 { white-space:pre-wrap;word-break:break-word;background:var(--surface-2, #f6f6f8);border-radius:10px;padding:16px;overflow:auto; }
.u-s-ws-fd9e601c.u-s-ws-fd9e601c.u-s-ws-fd9e601c.u-s-ws-fd9e601c { white-space:pre-wrap;word-break:break-word;background:var(--sunken);border:1px solid var(--border);border-radius:8px;padding:16px 80px 16px 16px;max-height:320px;overflow-y:auto;font-size:0.85rem;line-height:1.5;margin:0; }
.u-ta-center_maxw-480px.u-ta-center_maxw-480px.u-ta-center_maxw-480px.u-ta-center_maxw-480px { text-align: center; max-width: 480px; }
.u-ta-center_p-48px-32px.u-ta-center_p-48px-32px.u-ta-center_p-48px-32px.u-ta-center_p-48px-32px { text-align:center;padding:48px 32px; }
.u-td-none.u-td-none.u-td-none.u-td-none { text-decoration: none; }
.u-w-0p.u-w-0p.u-w-0p.u-w-0p { width:0%; }
.u-w-0p-2.u-w-0p-2.u-w-0p-2.u-w-0p-2 { width: 0%; }
.u-w-100p.u-w-100p.u-w-100p.u-w-100p { width:100%; }
.u-w-100p_jc-center.u-w-100p_jc-center.u-w-100p_jc-center.u-w-100p_jc-center { width:100%; justify-content:center; }
.u-w-100p_jc-center_mt-6px.u-w-100p_jc-center_mt-6px.u-w-100p_jc-center_mt-6px.u-w-100p_jc-center_mt-6px { width:100%; justify-content:center; margin-top: 6px; }
.u-w-100p_maxw-44rem_p-0_45rem-0_6rem.u-w-100p_maxw-44rem_p-0_45rem-0_6rem.u-w-100p_maxw-44rem_p-0_45rem-0_6rem.u-w-100p_maxw-44rem_p-0_45rem-0_6rem { width:100%;max-width:44rem;padding:0.45rem 0.6rem; }
.u-w-10p.u-w-10p.u-w-10p.u-w-10p { width: 10%; }
.u-w-22p.u-w-22p.u-w-22p.u-w-22p { width: 22%; }
.u-w-24p.u-w-24p.u-w-24p.u-w-24p { width: 24%; }
.u-w-80px.u-w-80px.u-w-80px.u-w-80px { width: 80px; }
.u-ws-nowrap_p-10px-12px_fs-0_8rem.u-ws-nowrap_p-10px-12px_fs-0_8rem.u-ws-nowrap_p-10px-12px_fs-0_8rem.u-ws-nowrap_p-10px-12px_fs-0_8rem { white-space:nowrap;padding:10px 12px;font-size:0.8rem; }

/* Hiding an element with a class is only safe when nothing shows it again with
   `el.style.display = ""`. That assignment CLEARS the inline declaration rather
   than setting one, so it cannot outrank a class — the element stays hidden
   forever. (It bit the publish wizard here: the assistant's and persona's own
   content sections became permanently invisible, because item_editor.js reveals
   them with exactly that idiom.) An explicit `= "block"` is fine, since an
   inline value does outrank a class.
   So: a `display:none` that JS clears with `= ""` ships as
   `data-style-vars='{"display":"none"}'` instead — the applier writes it via
   el.style.setProperty(), producing a real inline style that `= ""` clears
   exactly as the original style="" attribute did, and which style-src does not
   govern. Only `u-d-none-3` survives, on the two magic-link/email-signin error
   banners, which JS reveals with `= "block"`. */
.u-d-none-3.u-d-none-3.u-d-none-3.u-d-none-3 { display: none; }
.u-w-100p_h-100p_ofit-cover_br-inherit.u-w-100p_h-100p_ofit-cover_br-inherit.u-w-100p_h-100p_ofit-cover_br-inherit.u-w-100p_h-100p_ofit-cover_br-inherit { width:100%;height:100%;object-fit:cover;border-radius:inherit; }
.u-d-flex_gap-8px_ai-center_m-10px-0.u-d-flex_gap-8px_ai-center_m-10px-0.u-d-flex_gap-8px_ai-center_m-10px-0.u-d-flex_gap-8px_ai-center_m-10px-0 { display:flex;gap:8px;align-items:center;margin:10px 0; }

/* components/scroll_reveal.html (#3985 C6): this used to be injected via a JS
   `document.createElement("style")` call, which style-src without
   'unsafe-inline' blocks unless the element carries a nonce. The ruleset is
   static — only the .has-reveal/.sx-reveal/.in classes it targets are ever
   toggled by the script — so it lives here instead, and the script only
   toggles classes. */
@media (prefers-reduced-motion: no-preference) {
  html.has-reveal .sx-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
  }
  html.has-reveal .sx-reveal.in {
    opacity: 1;
    transform: none;
  }
}

/* Inline-style migration utility classes, Bucket 4 (CSP style-src hardening,
   #3985 C6): static style="" attributes built into JS-generated HTML
   strings. Same 4x compound-selector specificity as the template-sourced
   .u-* classes above, for the same reason (this codebase's .sx tag/class
   resets and two-class component rules beat a plain (0,1,0) class). */
.u-m-0_fs-0_85rem.u-m-0_fs-0_85rem.u-m-0_fs-0_85rem.u-m-0_fs-0_85rem { margin: 0; font-size: 0.85rem; }
.u-ml-6px.u-ml-6px.u-ml-6px.u-ml-6px { margin-left: 6px; }
.u-all-unset_cursor-pointer_fw-650.u-all-unset_cursor-pointer_fw-650.u-all-unset_cursor-pointer_fw-650.u-all-unset_cursor-pointer_fw-650 { all: unset; cursor: pointer; font-weight: 650; }
.u-ta-right.u-ta-right.u-ta-right.u-ta-right { text-align: right; }
.u-cursor-pointer.u-cursor-pointer.u-cursor-pointer.u-cursor-pointer { cursor: pointer; }
.u-fs-15px.u-fs-15px.u-fs-15px.u-fs-15px { font-size: 15px; }
.u-fs-12px.u-fs-12px.u-fs-12px.u-fs-12px { font-size: 12px; }
.u-ta-right_ws-nowrap.u-ta-right_ws-nowrap.u-ta-right_ws-nowrap.u-ta-right_ws-nowrap { text-align: right; white-space: nowrap; }
.u-bg-transparent_bd-0_p-0.u-bg-transparent_bd-0_p-0.u-bg-transparent_bd-0_p-0.u-bg-transparent_bd-0_p-0 { background: transparent; border: 0; padding: 0; }
.u-fw-400_fs-0_8rem_c-text-secondary.u-fw-400_fs-0_8rem_c-text-secondary.u-fw-400_fs-0_8rem_c-text-secondary.u-fw-400_fs-0_8rem_c-text-secondary { font-weight: 400; font-size: 0.8rem; color: var(--text-secondary); }
.u-m-0_ws-pre-wrap.u-m-0_ws-pre-wrap.u-m-0_ws-pre-wrap.u-m-0_ws-pre-wrap { margin: 0; white-space: pre-wrap; }
.u-m-0-0-8px.u-m-0-0-8px.u-m-0-0-8px.u-m-0-0-8px { margin: 0 0 8px; }
.u-ws-pre-wrap_wb-break-word.u-ws-pre-wrap_wb-break-word.u-ws-pre-wrap_wb-break-word.u-ws-pre-wrap_wb-break-word { white-space: pre-wrap; word-break: break-word; }
.u-m-8px-0-0_c-danger.u-m-8px-0-0_c-danger.u-m-8px-0-0_c-danger.u-m-8px-0-0_c-danger { margin: 8px 0 0; color: var(--danger, #c0392b); }
.u-d-flex_gap-8px_ai-baseline.u-d-flex_gap-8px_ai-baseline.u-d-flex_gap-8px_ai-baseline.u-d-flex_gap-8px_ai-baseline { display: flex; gap: 8px; align-items: baseline; }
.u-c-success.u-c-success.u-c-success.u-c-success { color: var(--success, #16a34a); }
.u-c-danger.u-c-danger.u-c-danger.u-c-danger { color: var(--danger, #c0392b); }
.u-fw-700.u-fw-700.u-fw-700.u-fw-700 { font-weight: 700; }
.u-p-12px.u-p-12px.u-p-12px.u-p-12px { padding: 12px; }
.u-mb-8px_d-flex_gap-8px_ai-center_fwrap-wrap.u-mb-8px_d-flex_gap-8px_ai-center_fwrap-wrap.u-mb-8px_d-flex_gap-8px_ai-center_fwrap-wrap.u-mb-8px_d-flex_gap-8px_ai-center_fwrap-wrap { margin-bottom: 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.u-flex-1_minw-160px.u-flex-1_minw-160px.u-flex-1_minw-160px.u-flex-1_minw-160px { flex: 1; min-width: 160px; }

/* ==== bundled from: css/sx-home.css ==== */
/* ---------- Sigrix Refined Design System — Light home page ----------
 * Lifted from Sigrix_new/Sigrix Home - Light.html. Light variant only;
 * dark variant will be ported in a follow-up. All rules are scoped under
 * `.sx` / `.sx-*` so they cannot bleed into other pages. */

.sx {
  /* refined palette — Light defaults */
  --sx-bg: #FAFAFB;
  --sx-bg-2: #F4F5F8;
  --sx-surface: #FFFFFF;
  --sx-surface-2: #F7F8FB;
  --sx-line: #E6E8EE;
  --sx-line-2: #D6D9E1;
  --sx-text: #0E1320;
  --sx-text-2: #4B5263;
  --sx-text-3: #616879;
  --sx-mute: #B7BCC8;

  --sx-brand: #2A33C4;
  --sx-brand-2: #1A1F6B;
  --sx-brand-3: #3D4DFF;
  --sx-brand-ink: #FFFFFF;
  --sx-accent: #14B8A6;
  --sx-warn: #C77800;
  --sx-danger: #DC2C50;
  --sx-ok: #1F9D55;

  /* Ink counterparts to the fills above -- see the note in base.html. The .sx
   * scope re-declares this family, so a token defined in only one of the two
   * places resolves on some pages and paints its fallback on the rest. */
  --sx-warn-text: #8C5600;
  --sx-danger-text: #B3243F;
  --sx-ok-text: #146B3A;
  --sx-accent-text: #0C7065;

  --sx-countdown-font: 'Space Grotesk', 'Geist', ui-sans-serif, system-ui, sans-serif;
  --sx-font-display: 'Geist', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --sx-font-body: 'Geist', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --sx-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  --sx-r-sm: 6px;
  --sx-r-md: 10px;
  --sx-r-lg: 14px;
  --sx-r-xl: 20px;

  --sx-shadow-1: 0 1px 0 rgba(255,255,255,0.03) inset, 0 1px 2px rgba(0,0,0,0.4);
  --sx-shadow-2: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px -12px rgba(0,0,0,0.6);

  --sx-1: 4px; --sx-2: 8px; --sx-3: 12px; --sx-4: 16px;
  --sx-5: 20px; --sx-6: 24px; --sx-8: 32px; --sx-10: 40px;
  --sx-12: 48px; --sx-16: 64px; --sx-20: 80px;
}

.sx, .sx * { box-sizing: border-box; }
.sx {
  font-family: var(--sx-font-body);
  color: var(--sx-text);
  background: var(--sx-bg);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
  line-height: 1.5;
  min-height: 100%;
}
.sx a { color: inherit; text-decoration: none; }
.sx h1, .sx h2, .sx h3, .sx h4, .sx h5 { font-family: var(--sx-font-display); margin: 0; letter-spacing: -0.02em; line-height: 1.1; }
.sx p { margin: 0; }
:where(.sx) button { font-family: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; padding: 0; }
/* `:where(.sx)` contributes no specificity and `button` contributes one type,
 * so this reset is **(0,0,1)**: it strips the UA's own button chrome and loses
 * to every author rule, which is what a reset is for. It is deliberately NOT
 * `.sx :where(button)` — that spelling is (0,1,0), a TIE with every
 * single-class rule in the tree, and this sheet ships in
 * css/sx-shell-bundle.css, which base.html links after the head bundle. So the
 * tie was broken by document order and the reset won it against rules in
 * style.css / base.css / sx-nav-actions.css.
 *
 * Measured across all 111 `.sx` pages before the change (#5699): 1394 rendered
 * controls in 8 class families were having their own border, fill or padding
 * replaced by this rule, and 7 of the 8 also render OUTSIDE a `.sx` page with
 * that chrome intact — one widget, two appearances, decided by the body class
 * of whatever page it landed on. The feedback widget's intent cards were the
 * clearest case: bordered and padded on /admin/review, flat on
 * /account/dashboard, from one partial.
 *
 * Author origin beats UA origin regardless of specificity, so lowering it does
 * not weaken the reset's actual job — verified in Chromium, a classless
 * <button> computes `0px none` here and `2px outset` with the rule removed.
 * tests/test_sx_button_reset_ties.py refuses to let it climb back. */

/* ---------- Buttons ---------- */
/* `.sx-btn.sx-btn` is not a typo: repeating the class is (0,2,0) with an
 * identical match set, which is what lifts it over the reset above without
 * dropping the <a> and <span> that also carry it. The variants below repeat
 * the base for the same reason — and the whole family moves together, or a
 * variant left at (0,1,0) silently decides whichever property its bumped
 * siblings do not declare. */
.sx-btn.sx-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; min-height: 0; padding: 0 16px;
  border-radius: var(--sx-r-md);
  font-size: 14px; font-weight: 500;
  font-weight: 500;
  text-transform: none;
  letter-spacing: -0.005em;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 80ms ease;
  white-space: nowrap;
  text-decoration: none;
}
/* Bump specificity (0,2,0) so .sx-btn wins over base.css `button { min-height: 38px }`
 * (0,1,0) and base.css ghost-button rules. */
button.sx-btn { min-height: 0; font-weight: 500; text-transform: none; letter-spacing: -0.005em; box-shadow: none; border: 0; }
button.sx-btn--primary { font-weight: 600; box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 0 0 1px rgba(26,31,107,0.6), 0 1px 2px rgba(26,31,107,0.30); }
button.sx-btn--secondary { box-shadow: 0 0 0 1px var(--sx-line) inset; }
.sx-btn:active { transform: translateY(1px); }
.sx-btn.sx-btn--lg { height: 44px; padding: 0 20px; font-size: 15px; }
.sx-btn.sx-btn--sm { height: 30px; padding: 0 12px; font-size: 13px; border-radius: var(--sx-r-sm); }

.sx-btn.sx-btn--primary {
  background: linear-gradient(135deg, #3D4DFF 0%, #1A1F6B 100%);
  color: var(--sx-brand-ink);
  font-weight: 600;
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 0 0 1px rgba(26,31,107,0.6), 0 1px 2px rgba(26,31,107,0.30);
}
.sx-btn--primary:hover { background: var(--sx-brand-2); }

.sx-btn.sx-btn--secondary {
  background: var(--sx-surface);
  color: var(--sx-text);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
}
.sx-btn--secondary:hover { background: var(--sx-surface-2); box-shadow: 0 0 0 1px var(--sx-line-2) inset; }

.sx-btn.sx-btn--ghost {
  background: transparent;
  color: var(--sx-text-2);
}
.sx-btn--ghost:hover { background: var(--sx-surface); color: var(--sx-text); }

.sx-btn.sx-btn--link {
  height: auto; padding: 0; color: var(--sx-text-2);
  font-weight: 500;
}
.sx-btn--link:hover { color: var(--sx-text); }

/* Bump specificity (0,2,0) so anchor-buttons beat the `.sx a { color: inherit }`
 * reset (0,1,1) and pick up their declared colors instead of inheriting
 * the page text color. */
a.sx-btn--primary, button.sx-btn--primary { color: var(--sx-brand-ink); }
a.sx-btn--secondary, button.sx-btn--secondary { color: var(--sx-text); }
a.sx-btn--ghost, button.sx-btn--ghost { color: var(--sx-text-2); }
a.sx-btn--ghost:hover, button.sx-btn--ghost:hover { color: var(--sx-text); }
a.sx-btn--link, button.sx-btn--link { color: var(--sx-text-2); }
a.sx-btn--link:hover, button.sx-btn--link:hover { color: var(--sx-text); }

/* ---------- Chips / Tags ---------- */
.sx-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 8px;
  border-radius: 4px;
  /* Declared rather than inherited: the `.sx` page scope re-declares the page's
     typography, and a chip inside a mono-titled surface would otherwise take
     the display or mono family. system/listing-card.css carries the same line. */
  font-family: var(--sx-font-body);
  background: var(--sx-surface-2);
  color: var(--sx-text-2);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  box-shadow: 0 0 0 1px var(--sx-line) inset;
}
/* Canonical listing-type accent colors — the single source of truth for every
   CSS surface that tints by listing type (the card cover-tag dot further down
   and the inline .sx-chip--type-* chips below). Keep in lockstep with
   LISTING_TYPE_ACCENTS in templates/components/_listing_type_colors.html — the
   matching source of truth for template surfaces (the nav dropdown glyph, card
   cover art, per-type hub). tests/test_listing_type_colors.py fails on drift. */
:root {
  --sx-lt-prompt: #5B7CFF;
  --sx-lt-skill: #22C55E;
  --sx-lt-persona: #F5B454;
  --sx-lt-assistant: #B48CFF;
  --sx-lt-agent: #F47B7B;
  --sx-lt-crew: #7CE3D4;
  --sx-lt-product: #EC6AB8;
  --sx-lt-mcp_server: #4F46E5;
  --sx-lt-system: #EA580C;
}
.sx-chip--type-prompt     { color: #1A1F6B; box-shadow: 0 0 0 1px rgba(91,124,255,0.30) inset; background: rgba(91,124,255,0.08); }
.sx-chip--type-skill      { color: #047857; box-shadow: 0 0 0 1px rgba(34,197,94,0.30) inset; background: rgba(34,197,94,0.09); }
.sx-chip--type-persona    { color: #92400E; box-shadow: 0 0 0 1px rgba(199,120,0,0.25) inset; background: rgba(245,180,84,0.10); }
.sx-chip--type-assistant  { color: #6D28D9; box-shadow: 0 0 0 1px rgba(180,140,255,0.30) inset; background: rgba(180,140,255,0.08); }
.sx-chip--type-agent      { color: #B42318; box-shadow: 0 0 0 1px rgba(244,123,123,0.35) inset; background: rgba(244,123,123,0.10); }
.sx-chip--type-crew       { color: #0F766E; box-shadow: 0 0 0 1px rgba(124,227,212,0.35) inset; background: rgba(124,227,212,0.12); }
.sx-chip--type-product    { color: #A83277; box-shadow: 0 0 0 1px rgba(236,106,184,0.30) inset; background: rgba(236,106,184,0.09); }
.sx-chip--type-mcp_server { color: #3730A3; box-shadow: 0 0 0 1px rgba(79,70,229,0.30) inset; background: rgba(79,70,229,0.08); }
.sx-chip--type-system     { color: #9A3412; box-shadow: 0 0 0 1px rgba(234,88,12,0.30) inset; background: rgba(234,88,12,0.08); }
/* Graphic prompts (#3653): Midjourney target badge on image-prompt cards. */
.sx-chip--target-midjourney { color: #4338CA; box-shadow: 0 0 0 1px rgba(67,56,202,0.30) inset; background: rgba(67,56,202,0.07); }
/* Curation slots (#4708) on the marketplace featured rail. "Promoted" reads as
   a paid/scheduled placement and "Staff pick" as an editorial one — both are
   solid rather than soft so the label is unmissable at card scale. A promoted
   slot that a buyer cannot tell apart from an organic one is a dark pattern. */
.sx-chip--promoted   { color: #0F2F70; box-shadow: 0 0 0 1px rgba(15,47,112,0.28) inset; background: rgba(91,124,255,0.12); font-weight: 700; }
.sx-chip--staff-pick { color: #2C1450; box-shadow: 0 0 0 1px rgba(44,20,80,0.24) inset; background: rgba(160,120,240,0.13); font-weight: 700; }
/* Community choice (#4710) — earned, not placed, so it reads warmer than the
   two curated chips above. Shown for the duration of the winning cycle. */
.sx-chip--community-choice { color: #8A5300; box-shadow: 0 0 0 1px rgba(245,180,84,0.45) inset; background: rgba(245,180,84,0.16); font-weight: 700; }

/* Badge-axis icon colours (#4000): components/_badge_visuals.html's
   badge_visual_icon() macro emits one of these five classes on the icon
   <svg> itself, next to a chip whose own text colour is left untouched — the
   chips this renders inside sit on cover-image scrims and gradient hero
   bands already tuned for contrast, so only the icon (via `currentColor`,
   which the sprite's paths inherit) carries the per-axis hue. Reuses the
   moderator console's own admin=gold / founding_seller=violet /
   trusted_user=green scheme (base.css's .pill-badge--* rules) via the
   equivalent --sx-*-text tokens; verified and polished have no moderator
   counterpart and take --sx-accent-text / --sx-brand-text. */
.badge-visual-icon--official { color: var(--sx-warn-text); }
.badge-visual-icon--founding { color: var(--sx-badge-founding); }
.badge-visual-icon--verified { color: var(--sx-accent-text); }
.badge-visual-icon--trusted  { color: var(--sx-ok-text); }
.badge-visual-icon--polished { color: var(--sx-brand-text); }

.sx-chip--soft {
  background: transparent;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  color: var(--sx-text-3);
  font-weight: 500;
  box-shadow: 0 0 0 1px var(--sx-line) inset;
}
.sx-chip--ok { color: #166534; box-shadow: 0 0 0 1px rgba(31,157,85,0.3) inset; background: rgba(31,157,85,0.08); }
/* Automated-test verdict badge, warn state (#3117) — same family as --ok,
   built off --sx-warn's RGB so it tracks the token's dark-mode flip below. */
.sx-chip--warn { color: #92400E; box-shadow: 0 0 0 1px rgba(199,120,0,0.3) inset; background: rgba(199,120,0,0.08); }
/* Typography-only modifier: a chip whose content is a version, a licence
   identifier or any other string the reader is meant to match character for
   character. No colour of its own, so it composes with --ok / --warn / --brand. */
.sx-chip--mono {
  font-family: var(--sx-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
}
/* Brand-tinted chip. `--sx-brand-text` rather than `--sx-brand-2`: this is ink
   on a tint, and --sx-brand-2 is the same #1A1F6B in both themes, so it reads
   at 1.08:1 on a dark surface (CLAUDE.md). The token is declared per theme in
   base.html, which is why there is no dark override here. */
.sx-chip--brand {
  color: var(--sx-brand-text);
  box-shadow: 0 0 0 1px rgba(61,77,255,0.30) inset;
  background: rgba(61,77,255,0.07);
}

/* Token-weight chip — relative per-run consumption signal sourced from
   the platform's compile-time estimate. Bolt-color encodes the bucket. */
.sx-chip--tokens {
  background: transparent;
  text-transform: none;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: var(--sx-text-2);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.sx-chip--tokens svg { flex-shrink: 0; opacity: 0.85; }
.sx-chip--tokens-low  { color: var(--sx-text-2); }
.sx-chip--tokens-low  svg { color: #7CE3D4; opacity: 1; }
.sx-chip--tokens-med  svg { color: #F5B454; opacity: 1; }
.sx-chip--tokens-high svg { color: #F47B7B; opacity: 1; }
.sx-chip--tokens-high { color: var(--sx-text); }

.sx-price {
  font-family: var(--sx-font-mono);
  font-size: 12px;
  letter-spacing: -0.01em;
  color: var(--sx-text);
}

/* ---------- Eyebrow / micro labels ---------- */
.sx-eyebrow {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sx-text-3);
  font-weight: 600;
}

/* ---------- Cards ---------- */
.sx-card {
  background: var(--sx-surface);
  border-radius: var(--sx-r-lg);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  overflow: hidden;
  transition: box-shadow 160ms ease, transform 160ms ease, background 160ms ease;
  display: flex; flex-direction: column;
  height: 100%;
  /* Establishes the containment context the meta row's chip-drop query reads
     below. The card is laid out by whatever grid holds it, so its own width —
     not the viewport's — is what decides whether a second chip fits. */
  container-type: inline-size;
}
/* Pointer only where the card actually links. */
.sx-card[href] { cursor: pointer; }
.sx-card-body { flex: 1; display: flex; flex-direction: column; padding: 14px 16px 16px; }
.sx-card-foot { margin-top: auto; }
.sx-card:hover {
  box-shadow: 0 0 0 1px var(--sx-line-2) inset, 0 12px 30px -16px rgba(14,19,32,0.18);
}

/* ---------- Layout helpers ---------- */
.sx-container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.sx-row { display: flex; align-items: center; gap: 12px; }
.sx-stack { display: flex; flex-direction: column; }
.sx-divider { height: 1px; background: var(--sx-line); }

/* ---------- Nav ---------- */
/* The base sx-nav chrome (.sx-nav / .sx-nav-inner / .sx-logo / .sx-nav-links
 * / .sx-nav-link / .sx-nav-actions) plus the search styles and the dark-mode
 * glass override now live in css/sx-nav-actions.css, which base.html loads on
 * every page. Keeping them there — not here — is what lets the moderator and
 * admin shells (which never opt into sx-home.css) render the same top bar. */

/* ---------- Theme toggle ---------- */
button.sx-theme-toggle {
  position: relative;
  width: 56px; height: 30px;
  /* base.css applies `button { min-height: 44px }` (mobile tap target)
   * and `button { min-height: 38px }`. Override both so the pill stays
   * 30 px tall — otherwise the absolute-positioned thumb (top:3px,
   * height:24px) sits off-center. */
  min-height: 0;
  flex: 0 0 auto;
  border-radius: 999px;
  /* Local fallbacks: the mobile nav drawer reuses this toggle, and the drawer
   * sits outside the .sx shell on pages whose <body> isn't .sx (e.g. admin
   * `shell-flush`). On .sx pages the real palette overrides these. */
  background: var(--sx-bg-2, #F4F5F8);
  box-shadow: 0 0 0 1px var(--sx-line, #E6E8EE) inset;
  color: var(--sx-text, #0E1320);
  cursor: pointer;
  padding: 0;
  display: inline-flex; align-items: center;
  transition: background 160ms ease, box-shadow 160ms ease;
  border: 0;
}
.sx-theme-toggle:hover { box-shadow: 0 0 0 1px var(--sx-line-2, #D6D9E1) inset; }
.sx-theme-toggle:focus-visible { outline: 2px solid var(--sx-brand, #2A33C4); outline-offset: 2px; }
.sx-theme-toggle-thumb {
  position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--sx-surface, #FFFFFF);
  box-shadow: 0 0 0 1px var(--sx-line, #E6E8EE) inset, 0 1px 2px rgba(0,0,0,0.18);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--sx-text, #0E1320);
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1), background 160ms ease;
}
[data-theme="light"] .sx-theme-toggle-thumb { transform: translateX(26px); }
.sx-theme-toggle-icon { width: 14px; height: 14px; display: block; }
.sx-theme-toggle-track-icon {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 12px; height: 12px;
  color: var(--sx-text-2, #4B5263);
  opacity: 0.55;
  pointer-events: none;
}
.sx-theme-toggle-track-icon--moon { left: 9px; }
.sx-theme-toggle-track-icon--sun  { right: 9px; }
[data-theme="dark"]  .sx-theme-toggle-track-icon--moon { opacity: 0; }
[data-theme="light"] .sx-theme-toggle-track-icon--sun  { opacity: 0; }
.sx-theme-toggle-thumb-icon--moon { display: none; }
[data-theme="dark"] .sx-theme-toggle-thumb-icon--sun  { display: none; }
[data-theme="dark"] .sx-theme-toggle-thumb-icon--moon { display: block; }

/* ---------- Section header ---------- */
.sx-section-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  margin-bottom: 24px;
}
.sx-section-head h2 {
  font-size: 28px; font-weight: 600;
  margin-top: 10px;
}
.sx-section-head .sub {
  color: var(--sx-text-2); font-size: 15px; margin-top: 6px;
}
/* Trailing controls in a section header — a "See all" button on its own, or
 * a tablist sitting beside one (the home catalogue). */
.sx-section-head-actions {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}

/* ---------- Full-bleed breakout — single source of truth (#3080) ----------
 * Every page's `{% block content %}` is rendered inside
 * `<div class="container">` (base.html), which base.css clamps to
 * `max-width: 1200px`. Sections meant to render edge-to-edge (hero
 * gradients + grids, sticky toolbars, the legal/article doc headers) must
 * break out of that box: negative side margins span the full viewport while
 * the inner `.sx-container` keeps content centered at 1200px.
 *
 * This rule is the ONLY place the breakout is declared. New full-bleed
 * sections opt in with the `.sx-bleed` utility class — do NOT re-declare
 * `margin-*: calc(50% - 50vw)` in a page stylesheet. The page-specific
 * classes listed below are existing heroes/headers grandfathered into the
 * utility. Enforced by tests/test_sx_bleed_breakout_contract.py.
 *
 * `body.{home-page,sx-shell,hub-page}` declare `overflow-x: clip` (below)
 * so the breakout never introduces a horizontal scrollbar. */
.sx-bleed,
.sx-hero, .mp-hero, .hub-hero, .mp-toolbar,
.mx-hero, .lrn-hero, .lrn-rail,
.legal-header, .art-header, .pp-hub-topicsbar,
.bb-hero, .wl, .nf {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ---------- Hero ---------- */
.sx-hero {
  position: relative;
  padding: 96px 0 72px;
  overflow: hidden;
}
.sx-hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 400px at 20% 0%, rgba(26,31,107,0.14), transparent 60%),
    radial-gradient(700px 360px at 90% 20%, rgba(61,77,255,0.10), transparent 60%);
  pointer-events: none;
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}
.sx-hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(14,19,32,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(14,19,32,0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(700px 380px at 50% 0%, black, transparent 70%);
  pointer-events: none;
}
.sx-hero h1 {
  font-size: 64px;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.02;
  max-width: 18ch;
}
.sx-hero h1 .accent { color: var(--sx-text-2); }
.sx-hero .lede {
  margin-top: 20px; font-size: 18px; color: var(--sx-text-2); max-width: 60ch;
}
.sx-hero .lede b { color: var(--sx-text); font-weight: 600; }
/* Hero listing cards — the product itself, in the hero's right column.
   A compact sibling of `.sx-card`, not a variant of it: no author avatar, no
   stats row, no add-to-cart, and a 2-line clamped title. `min-height` on the
   title holds the four covers on one baseline when a title wraps to one line
   rather than two. */
.sx-hero-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sx-hc {
  display: flex; flex-direction: column;
  background: var(--sx-surface);
  border-radius: var(--sx-r-lg);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  overflow: hidden; text-decoration: none;
  transition: box-shadow 160ms, transform 160ms, background 160ms;
}
.sx-hc:hover {
  background: var(--sx-surface-2);
  box-shadow: 0 0 0 1px var(--sx-line-2) inset, 0 14px 32px -18px rgba(14, 19, 32, 0.22);
  transform: translateY(-2px);
}
[data-theme="dark"] .sx-hc:hover {
  box-shadow: 0 0 0 1px var(--sx-line-2) inset, 0 14px 32px -18px rgba(0, 0, 0, 0.7);
}
.sx-hc-cover {
  position: relative; display: block;
  aspect-ratio: 16 / 10;
  background: var(--sx-bg-2); overflow: hidden;
}
.sx-hc-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sx-hc-cover::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0) 46%);
}
.sx-hc-tags { position: absolute; top: 9px; left: 9px; z-index: 1; display: flex; align-items: center; gap: 6px; }
.sx-hc-tags .sx-chip {
  background: rgba(255, 255, 255, 0.92);
  color: var(--sx-text);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.10) inset;
}
[data-theme="dark"] .sx-hc-tags .sx-chip {
  background: rgba(11, 13, 18, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset;
}
.sx-hc-b { display: flex; flex-direction: column; gap: 5px; padding: 12px 14px 14px; }
.sx-hc-t {
  font-family: var(--sx-font-display);
  font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--sx-text); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: calc(13.5px * 1.35 * 2);
}
.sx-hc-m { font-family: var(--sx-font-mono); font-size: 11px; color: var(--sx-text-3); }
@media (max-width: 560px) {
  /* One column, and the grid drops to the first two cards rather than
     stacking four covers above the fold. */
  .sx-hero-cards { grid-template-columns: 1fr; }
  .sx-hero-cards .sx-hc:nth-child(n + 3) { display: none; }
}

/* Hero search — the hero's primary action, above the quicklinks and buttons.
   The prototype authors its focus ring dark-first under `.sx[data-theme]`;
   this app puts `data-theme` on the root element and defaults to light, so
   the unprefixed rule carries the light values and `[data-theme="dark"]`
   overrides — the inverse nesting of the design file. */
.sx-hero-search {
  margin-top: 26px;
  display: flex;
  align-items: center;
  gap: 11px;
  height: 52px;
  padding: 0 7px 0 16px;
  max-width: 520px;
  background: var(--sx-surface);
  border-radius: var(--sx-r-lg);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  transition: box-shadow 140ms;
}
.sx-hero-search:focus-within {
  box-shadow: 0 0 0 1px var(--sx-brand) inset, 0 0 0 4px rgba(61, 77, 255, 0.12);
}
[data-theme="dark"] .sx-hero-search:focus-within {
  box-shadow: 0 0 0 1px var(--sx-brand-3) inset, 0 0 0 4px rgba(107, 120, 255, 0.14);
}
.sx-hero-search > svg { flex: none; color: var(--sx-text-3); }
.sx-hero-search input {
  flex: 1; min-width: 0; height: 100%;
  border: 0; background: transparent; outline: none;
  font-family: inherit; font-size: 15px;
  color: var(--sx-text); letter-spacing: -0.005em;
}
.sx-hero-search input::placeholder { color: var(--sx-text-3); }
.sx-hero-search input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
/* `min-height: 0` is not tidiness: responsive.css sets a site-wide
   `min-height: 44px` floor on every `button`, and min-height beats height —
   so without this the submit button renders 44px inside a 52px bar (and
   overflows the 46px bar at ≤560px) while the declaration below reads as
   applied. */
.sx-hero-search button { flex: none; height: 38px; min-height: 0; }
@media (max-width: 560px) {
  .sx-hero-search { height: 46px; }
}
.sx-hero-actions { margin-top: 22px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sx-hero-quicklinks { margin-top: 18px; display: flex; gap: 8px; flex-wrap: wrap; }
.sx-quicklink {
  display: inline-flex; align-items: center; gap: 8px;
  height: 30px; padding: 0 12px;
  border-radius: 999px;
  font-size: 13px; color: var(--sx-text-2);
  background: var(--sx-surface);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
}
.sx-quicklink:hover { color: var(--sx-text); box-shadow: 0 0 0 1px var(--sx-line-2) inset; }
.sx-quicklink .dot { width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(135deg, #3D4DFF 0%, #1A1F6B 100%); }
/* One rule per canonical type, so the hero's quick-links tint from the same
   palette as the marketplace tabs, the hub chips and the card cover chips —
   `--sx-lt-*` is declared at the top of this file. These shipped as literal
   hexes (`u-bg-5BD8A0` and four siblings) and three of them had drifted: the
   agents dot was `#7CE3D4`, which is *crew*, so the homepage named one type in
   another type's colour. The fallback is the palette's own value, for a sheet
   loaded before this file's `:root` block.

   Written at (0,3,0) rather than the (0,2,0) of the rule above, so this wins on
   specificity — a tie decided by document order would break the moment either
   rule moved. The gradient above stays as the default for a `.dot` carrying no
   type, and adding a tenth type is a template edit alone. */
.sx .sx-quicklink .dot--prompt     { background: var(--sx-lt-prompt, #5B7CFF); }
.sx .sx-quicklink .dot--skill      { background: var(--sx-lt-skill, #22C55E); }
.sx .sx-quicklink .dot--persona    { background: var(--sx-lt-persona, #F5B454); }
.sx .sx-quicklink .dot--assistant  { background: var(--sx-lt-assistant, #B48CFF); }
.sx .sx-quicklink .dot--agent      { background: var(--sx-lt-agent, #F47B7B); }
.sx .sx-quicklink .dot--crew       { background: var(--sx-lt-crew, #7CE3D4); }
.sx .sx-quicklink .dot--product    { background: var(--sx-lt-product, #EC6AB8); }
.sx .sx-quicklink .dot--mcp_server { background: var(--sx-lt-mcp_server, #4F46E5); }
.sx .sx-quicklink .dot--system     { background: var(--sx-lt-system, #EA580C); }

/* hero meta strip */
.sx-hero-strip {
  margin-top: 56px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 18px 0;
  border-top: 1px solid var(--sx-line);
  border-bottom: 1px solid var(--sx-line);
}
/* The experimental-tier flag banner above already separates this strip from
   the hero, so it needs less top margin than the default (56px) placement
   right under the hero -- was a conditional inline style, moved to a data
   attribute (#3985 C6) rather than a conditional class so the `class="sx-hero-strip"`
   marker several tests key off stays exact regardless of tier. */
.sx-hero-strip[data-experimental-spacing="true"] { margin-top: 12px; }
.sx-hero-strip > div { padding: 0 24px; border-left: 1px solid var(--sx-line); }
.sx-hero-strip > div:first-child { border-left: 0; padding-left: 0; }
.sx-hero-strip .label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sx-text-3); }
.sx-hero-strip .val { font-family: var(--sx-font-display); font-size: 20px; font-weight: 600; margin-top: 4px; letter-spacing: -0.02em; }

/* ---------- Listing cards ---------- */
.sx-listing-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
/* The design's cadence (system/listing-card.css): 4 -> 3 -> 2 -> 1. These live
   beside the grid rather than in the responsive block at the foot of the file
   so the whole ramp reads in one place; the widths are the design's, not the
   960/640 pair this grid used to share with the rest of the page. */
@media (max-width: 1120px) { .sx-listing-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 840px)  { .sx-listing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .sx-listing-grid { grid-template-columns: 1fr; } }
/* "Browse by creator" strip — a 4-up row of seller cards (.sh-card from
   css/sx-sellers.css). Mirrors the listing grid's responsive cadence. */
.sx-creator-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.sx-card-cover {
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, #EEF1F8 0%, #F7F8FB 100%);
  position: relative;
  overflow: hidden;
}
.sx-card-cover-art {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sx-font-display);
  font-weight: 600;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: rgba(14,19,32,0.55);
  text-align: center;
  padding: 20px;
}
.sx-card-cover-art svg { width: 100%; height: 100%; display: block; }
.sx-card-cover-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(14,19,32,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(14,19,32,0.04) 1px, transparent 1px);
  background-size: 24px 24px;
  mix-blend-mode: multiply;
  opacity: 0.5;
  pointer-events: none;
}
.sx-card-cover img.sx-card-cover-image {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.sx-card-cover-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 65%, rgba(0,0,0,0.25) 100%);
  pointer-events: none;
}
.sx-card-cover-tag {
  position: absolute; top: 10px; left: 10px;
  /* A flex row so the gap between chips is declared rather than inherited from
     inline whitespace. `flex-wrap` is a deliberate departure from the design
     file, which assumes one chip: this card can carry up to five (Featured,
     a curation slot, Community choice, the type, and a graphic prompt's
     target), and an unwrapped row of those overflows the cover art. */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
/* "New" badge — a recently published listing. A solid brand fill rather than
   the translucent white the sibling chips use, because it marks recency
   rather than naming a facet of the listing, and should not read as one more
   type chip. `--sx-brand-ink` on `--sx-brand` measures 8.86:1 light and
   5.67:1 dark, so the pair needs no per-theme override. Not subject to the
   44px tap-target floor in responsive.css: that rule matches
   button/.btn/a.button/input/select/textarea, and this is a bare span. */
.sx-card-new {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sx-brand-ink);
  background: var(--sx-brand);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.20) inset, 0 1px 2px rgba(0, 0, 0, 0.25);
}
.sx-card-cover-tag .sx-chip {
  background: rgba(255,255,255,0.92);
  color: var(--sx-text);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.10) inset, 0 1px 2px rgba(0,0,0,0.06);
}
/* Color dot before the type label */
.sx-card-cover-tag .sx-chip::before {
  content: ""; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  margin-right: 6px;
  background: currentColor;
  flex-shrink: 0;
}
.sx-card-cover-tag .sx-chip--type-prompt::before     { background: var(--sx-lt-prompt); }
.sx-card-cover-tag .sx-chip--type-skill::before      { background: var(--sx-lt-skill); }
.sx-card-cover-tag .sx-chip--type-persona::before    { background: var(--sx-lt-persona); }
.sx-card-cover-tag .sx-chip--type-assistant::before  { background: var(--sx-lt-assistant); }
.sx-card-cover-tag .sx-chip--type-agent::before      { background: var(--sx-lt-agent); }
.sx-card-cover-tag .sx-chip--type-crew::before       { background: var(--sx-lt-crew); }
.sx-card-cover-tag .sx-chip--type-product::before    { background: var(--sx-lt-product); }
.sx-card-cover-tag .sx-chip--type-mcp_server::before { background: var(--sx-lt-mcp_server); }
.sx-card-cover-tag .sx-chip--type-system::before     { background: var(--sx-lt-system); }
.sx-card-cover-tag .sx-chip--target-midjourney::before { background: #4338CA; }
.sx-card-cover-price {
  position: absolute; top: 10px; right: 10px;
  height: 22px; padding: 0 8px;
  display: inline-flex; align-items: center;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 4px;
  font-family: var(--sx-font-mono);
  font-size: 11px;
  color: var(--sx-text);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.10) inset, 0 1px 2px rgba(0,0,0,0.06);
}
.sx-card-meta {
  display: flex; gap: 6px; flex-wrap: nowrap;
  align-items: center;
  margin-bottom: 8px;
  /* Reserve exactly one chip row so titles and footers align across a grid.
     `max-height` with `overflow: hidden` is what makes that a guarantee rather
     than a hope: a card that resolves more chips than fit drops the overflow
     instead of growing a second row and pushing its own title down. Which
     chips get the room is decided in components/sx_listing_card.html, in
     source order — category, the test verdict, then token weight. */
  min-height: 22px; max-height: 22px;
  overflow: hidden;
}
.sx-card-meta > * { flex-shrink: 0; }
/* block, not inline-flex, so text-overflow actually renders an ellipsis */
.sx-card-meta .sx-chip--soft { display: block; line-height: 22px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-card-meta .sx-chip--soft:first-child { flex-shrink: 1; min-width: 0; }
/* Narrow cards drop a second soft chip so the category stays readable rather
   than collapsing to a single letter. Category ellipsises only after that. */
@container (max-width: 268px) { .sx-card-meta .sx-chip--soft:nth-child(2) { display: none; } }
.sx-card-title {
  /* Line-height and slot are one property and one expression, because the two
     drifting apart is the bug the scoped rule below records: the slot has to be
     sized from the line box that is actually painted, not from a literal that
     restates it. */
  --sx-card-title-lh: 1.35;
  --sx-card-title-slot: calc(15px * var(--sx-card-title-lh) * 2);
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--sx-text); margin-bottom: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  line-height: var(--sx-card-title-lh);
  min-height: var(--sx-card-title-slot);
}
/* (0,2,0), and it has to be: `.sx h1, .sx h2, .sx h3, .sx h4, .sx h5` at the
   top of this sheet is (0,1,1), so it beat the (0,1,0) rule above on both
   properties they share. The card title is an <h3>, so inside the .sx scope it
   painted at line-height 1.1 — a 16.5px line box — while its own min-height
   went on reserving 15px * 1.35 * 2 = 40.5px. The clamp cut a long title at two
   lines (33px) and the third line rendered into the remaining 7.5px, clipped
   mid-glyph, over the description; the same reset zeroed the 6px margin, so
   there was nothing between them. `max-height` is the belt to that braces: with
   the slot and the line box agreeing there is no slack to paint into, and this
   makes that a guarantee rather than an arithmetic coincidence — the same thing
   .sx-card-meta says about its own single chip row above.

   Scoped to .sx-card-body rather than written on .sx-card-title, because that
   class is two components: sigrix_submit.html gives its section headings the
   same name (its own <style> resizes them to 1.25rem) and they are not in a
   card body, so the two-line slot must not reach them. */
.sx-card-body .sx-card-title {
  line-height: var(--sx-card-title-lh);
  margin-bottom: 6px;
  max-height: var(--sx-card-title-slot);
}
.sx-card-desc {
  /* Same shape as the title, so the same drift is unspellable here. Nothing
     outranks this rule's line-height today — `.sx p` only zeroes the margin —
     and the max-height is what keeps the slot honest if something ever does.
     Left at (0,1,0) on purpose: sx-marketplace.css relaxes the min-height for
     the list view at (0,2,0), and a scoped rule here would tie with it. */
  --sx-card-desc-lh: 1.5;
  --sx-card-desc-slot: calc(13px * var(--sx-card-desc-lh) * 2);
  font-size: 13px; color: var(--sx-text-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  line-height: var(--sx-card-desc-lh);
  min-height: var(--sx-card-desc-slot);
  max-height: var(--sx-card-desc-slot);
}
/* One row: attribution on the left, stats on the right. The card used to carry
   a second chip row here (setup complexity, assistant setup mode, crew cost,
   token weight); those moved to the meta row above or off the card entirely, so
   every card's footer is now the same shape and the same height. */
.sx-card-foot {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--sx-line);
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
}
.sx-author { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--sx-text-2); min-width: 0; }
.sx-author-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-avatar {
  width: 20px; height: 20px; border-radius: 50%;
  background: linear-gradient(135deg, #E6E8EE, #FFFFFF);
  box-shadow: 0 0 0 1px var(--sx-line);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--sx-text-2); font-weight: 600;
  overflow: hidden;
  flex-shrink: 0;
}
.sx-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sx-stats { display: inline-flex; gap: 10px; font-size: 12px; color: var(--sx-text-3); font-variant-numeric: tabular-nums; }
.sx-stats span { display: inline-flex; align-items: center; gap: 4px; }
.sx-stats .sx-stat-rating { color: var(--sx-warn-text); font-weight: 600; }

/* ---------- Related-listings row ----------
   Section chrome for the "you might also like" row under a listing detail
   page. The cards inside it are the shared .sx-card in a .sx-listing-grid,
   so only the heading and the browse link are declared here. Lives in this
   sheet — which _SHELL_CORE puts on every page — because the row renders on
   detail pages of three different generations, each loading a different
   variant stylesheet. */
.sx-related {
  margin-top: 56px;
  padding-top: 36px;
  border-top: 1px solid var(--sx-line);
}
.sx-related-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 22px;
}
.sx-related-title {
  font-family: var(--sx-font-display);
  font-size: 24px; font-weight: 600; letter-spacing: -0.02em;
  margin: 0; color: var(--sx-text);
}
.sx-related-more {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 500; text-decoration: none;
  color: var(--sx-text-2);
  transition: color 120ms ease;
}
.sx-related-more:hover { color: var(--sx-text); }
.sx-related-more svg { display: block; }

/* ---------- How it works ---------- */
.sx-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sx-step { padding: 24px; border-radius: var(--sx-r-lg); background: var(--sx-surface); box-shadow: 0 0 0 1px var(--sx-line) inset; }
.sx-step-num { font-family: var(--sx-font-mono); font-size: 12px; color: var(--sx-text-3); }
.sx-step h3 { font-size: 18px; margin-top: 12px; font-weight: 600; }
.sx-step p { color: var(--sx-text-2); font-size: 14px; margin-top: 6px; }

/* ---------- Founding panel ---------- */
.sx-founding {
  position: relative;
  padding: 32px;
  border-radius: var(--sx-r-xl);
  background:
    radial-gradient(600px 220px at 100% 0%, rgba(26,31,107,0.14), transparent 60%),
    radial-gradient(400px 200px at 0% 100%, rgba(26,31,107,0.10), transparent 60%),
    var(--sx-surface);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  overflow: hidden;
}
.sx-founding h2 { font-size: 28px; font-weight: 600; max-width: 14ch; }
.sx-founding ul { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.sx-founding li { font-size: 14px; color: var(--sx-text-2); display: flex; gap: 10px; }
.sx-founding li b { color: var(--sx-text); font-weight: 600; }
.sx-founding li::before {
  content: ""; flex: none; width: 14px; height: 14px; border-radius: 4px;
  background: linear-gradient(135deg, #1A1F6B 0%, #3D4DFF 100%);
  margin-top: 4px;
}
.sx-counter { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-top: 20px; }
.sx-counter-cell {
  padding: 12px;
  background: var(--sx-bg);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  border-radius: var(--sx-r-md);
  text-align: center;
}
.sx-counter-cell .num {
  font-family: var(--sx-countdown-font);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: transparent;
  background: linear-gradient(135deg, #3D4DFF 0%, #1A1F6B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "ss01" 1;
}
.sx-counter-cell .lbl { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sx-text-3); margin-top: 8px; }
.sx-seats {
  margin-top: 16px; padding: 14px; border-radius: var(--sx-r-md); background: var(--sx-bg);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
}
.sx-seats-bar { height: 6px; border-radius: 3px; background: var(--sx-line); margin-top: 10px; overflow: hidden; }
.sx-seats-bar > div { height: 100%; background: linear-gradient(90deg, #1A1F6B, #3D4DFF); }

/* Small inline chip showing founding-seat counter. Used in hub panel
   headers and other compact contexts where the seat count needs to ride
   alongside a heading. Mirrors the convention of the big banner:
   X = claimed, Y = total. */
.sx-founding-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
  background: rgba(61,77,255,0.07);
  color: var(--sx-text);
  font-size: 12px; font-weight: 500;
  box-shadow: 0 0 0 1px rgba(61,77,255,0.25) inset;
  line-height: 1;
  white-space: nowrap;
}
.sx-founding-chip-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #3D4DFF;
  box-shadow: 0 0 0 3px rgba(61,77,255,0.15);
  flex-shrink: 0;
}
.sx-founding-chip-val {
  font-family: var(--sx-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--sx-text);
}
.sx-founding-chip-val strong { font-weight: 600; }
.sx-founding-chip-meta {
  color: var(--sx-text-3);
  font-size: 11px; letter-spacing: 0.02em;
  padding-left: 6px; margin-left: 2px;
  border-left: 1px solid var(--sx-line);
}
.sx-founding-chip.is-full {
  background: rgba(245,180,84,0.10);
  box-shadow: 0 0 0 1px rgba(199,120,0,0.25) inset;
}
.sx-founding-chip.is-full .sx-founding-chip-dot {
  background: #C77800;
  box-shadow: 0 0 0 3px rgba(199,120,0,0.18);
}
[data-theme="dark"] .sx-founding-chip {
  background: rgba(61,77,255,0.18);
  box-shadow: 0 0 0 1px rgba(124,138,255,0.35) inset;
}
[data-theme="dark"] .sx-founding-chip.is-full {
  background: rgba(245,180,84,0.18);
  box-shadow: 0 0 0 1px rgba(245,180,84,0.40) inset;
}
.sx-live-badge {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(31,157,85,0.08);
  color: var(--sx-ok);
  font-size: 13px; font-weight: 500;
  box-shadow: 0 0 0 1px rgba(31,157,85,0.3) inset;
}
.sx-live-badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--sx-ok);
  box-shadow: 0 0 0 4px rgba(31,157,85,0.25);
}

/* ---------- Updates section (changelog rows) ---------- */
/* "Latest" activity feed. Replaces the changelog list below in the same
   column, and carries a colour dot per kind so a reader can tell a release
   from a new listing without reading the label.

   Those dots used to be literals, on the reasoning that a per-kind palette has
   "no semantic token behind it". Half of that was wrong: four of the six are
   exactly what a token already resolves to under [data-theme="dark"] .sx —
   #7CE3D4 is --sx-accent, #F5B454 is --sx-warn, #6B78FF is --sx-brand-3. The
   prototype sets them inline from its own FEED_COLOR map and is authored in
   dark, so the port carried one theme's values into both and light mode was
   painting dark colours. Those four now read their token, which leaves dark
   byte-identical and gives light its proper values.

   The other half of that reasoning still holds — nothing else on the site needs
   "the blog colour" — so blog and seller take a local pair rather than a global
   token. Their light values are derived, not picked: the same lightness shift
   this sheet's ramp already applies to the nearest hue family (accent for the
   cyan, brand-3 for the violet). That lands them further apart than the dark
   set they mirror (listing/seller 91 against dark's 76, release/blog 53 against
   47), so the kinds stay at least as separable in light as the design makes
   them in dark.

   The literals also doubled as listing-type colours — #7CE3D4 is --sx-lt-crew,
   #F5B454 is --sx-lt-persona, #B48CFF is --sx-lt-assistant — on a page whose
   cards tint their type chip from that palette. The light values are clear of
   it; in dark the three overlaps survive, because they belong to --sx-accent,
   --sx-warn and the seller pair's design-given value rather than to these dots.
   tests/test_palette_overlap.py owns that fact for the whole ramp and asserts
   it for equality.

   update and seat share a colour on purpose: the prototype does the same (with
   `pick` where this feed has `update`), and every row states its kind in the
   .lb label beside the dot, so the hue reinforces the label rather than
   replacing it. */
.sx-feed { border-top: 1px solid var(--sx-line); }
.sx-feed a {
  display: grid; grid-template-columns: 7px minmax(0, 1fr) auto;
  gap: 14px; align-items: start;
  padding: 15px 8px; margin: 0 -8px;
  border-bottom: 1px solid var(--sx-line);
  text-decoration: none; transition: background 120ms;
}
.sx-feed a:hover { background: var(--sx-surface); }
.sx-feed .k {
  display: block; width: 7px; height: 7px; border-radius: 50%;
  margin-top: 7px; background: var(--sx-text-3);
}
.sx-feed { --sx-feed-blog: #0884A8; --sx-feed-seller: #965EFF; }
[data-theme="dark"] .sx-feed { --sx-feed-blog: #5BC8E8; --sx-feed-seller: #B48CFF; }
.sx-feed [data-feed-kind="release"] .k { background: var(--sx-accent); }
.sx-feed [data-feed-kind="update"]  .k { background: var(--sx-warn); }
.sx-feed [data-feed-kind="blog"]    .k { background: var(--sx-feed-blog); }
.sx-feed [data-feed-kind="listing"] .k { background: var(--sx-brand-3); }
.sx-feed [data-feed-kind="seller"]  .k { background: var(--sx-feed-seller); }
.sx-feed [data-feed-kind="seat"]    .k { background: var(--sx-warn); }
.sx-feed .tx { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.sx-feed .lb {
  font-size: 10px; font-weight: 700; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--sx-text-3);
}
.sx-feed .t {
  font-size: 14.5px; font-weight: 500; color: var(--sx-text-2);
  letter-spacing: -0.01em; line-height: 1.45;
  text-wrap: pretty; transition: color 120ms;
}
.sx-feed a:hover .t { color: var(--sx-text); }
.sx-feed .w {
  font-family: var(--sx-font-mono); font-size: 11.5px;
  color: var(--sx-text-3); white-space: nowrap;
  padding-top: 2px; font-variant-numeric: tabular-nums;
}
.sx-feed-foot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
/* Scoped `.sx .sx-feed-foot a` rather than a bare class: the `.sx` page scope
   resets `a { color: inherit }`, and these are pill-shaped links rather than
   inline text, so they need to out-specify it. */
.sx .sx-feed-foot a {
  display: inline-flex; align-items: center;
  height: 32px; padding: 0 13px; border-radius: 8px;
  font-size: 13px; font-weight: 500;
  color: var(--sx-text-2); text-decoration: none;
  background: var(--sx-surface);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  transition: color 120ms, box-shadow 120ms;
}
.sx .sx-feed-foot a:hover { color: var(--sx-text); box-shadow: 0 0 0 1px var(--sx-line-2) inset; }
@media (max-width: 560px) {
  /* The age drops off rather than squeezing the title into a narrow column;
     the feed is newest-first, so relative order survives without it. */
  .sx-feed a { grid-template-columns: 7px minmax(0, 1fr); }
  .sx-feed .w { display: none; }
}

/* ---------- Picks — moderator spotlight + loved by the community ---------- */
.sx-picks { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: stretch; }
.sx-picks.sx-picks--single { grid-template-columns: 1fr; }
.sx-pick-spot {
  display: grid;
  grid-template-columns: minmax(0, 40%) 1fr;
  background: var(--sx-surface);
  border-radius: var(--sx-r-lg);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow 160ms ease, background 160ms ease;
}
.sx-pick-spot:hover {
  background: var(--sx-surface-2);
  box-shadow: 0 0 0 1px var(--sx-line-2) inset, 0 12px 30px -16px rgba(14,19,32,0.18);
}
.sx-pick-cover { position: relative; min-height: 270px; overflow: hidden; background: var(--sx-bg-2); }
.sx-pick-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sx-pick-cover-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0) 60%); }
.sx-pick-body { padding: 26px 28px; display: flex; flex-direction: column; gap: 14px; }
.sx-pick-badge {
  display: inline-flex; align-items: center; gap: 7px;
  align-self: flex-start;
  height: 24px; padding: 0 10px;
  border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sx-brand-3);
  background: rgba(107,120,255,0.10);
  box-shadow: 0 0 0 1px rgba(107,120,255,0.30) inset;
}
.sx-pick-badge svg { color: var(--sx-warn); }
.sx-pick-body h3 { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; color: var(--sx-text); }
.sx-pick-quote {
  font-size: 15px; line-height: 1.6; color: var(--sx-text-2);
  padding-left: 15px;
  border-left: 2px solid var(--sx-brand-3);
}
.sx-pick-flags { display: flex; flex-wrap: wrap; gap: 7px; }
.sx-pick-foot {
  margin-top: auto; padding-top: 16px;
  border-top: 1px solid var(--sx-line);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.sx-pick-foot .who { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--sx-text-2); }
.sx-pick-foot .go { font-size: 13px; font-weight: 500; color: var(--sx-brand-3); }

.sx-loved {
  background: var(--sx-surface);
  border-radius: var(--sx-r-lg);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  padding: 8px 8px 10px;
  display: flex; flex-direction: column;
}
.sx-loved-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 14px 12px; }
.sx-loved-head .t { font-size: 13px; font-weight: 600; letter-spacing: -0.005em; color: var(--sx-text); }
.sx-loved-head .k { font-size: 11px; color: var(--sx-text-3); font-family: var(--sx-font-mono); }
.sx-loved-row {
  display: grid;
  grid-template-columns: 14px 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border-radius: 10px;
  text-decoration: none;
  transition: background 120ms ease;
}
.sx-loved-row:hover { background: var(--sx-surface-2); }
.sx-loved-rank { font-family: var(--sx-font-mono); font-size: 11px; color: var(--sx-text-3); font-variant-numeric: tabular-nums; }
.sx-loved-thumb {
  width: 44px; height: 32px;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  background: var(--sx-bg-2);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
}
.sx-loved-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sx-loved-tx { min-width: 0; display: flex; flex-direction: column; }
.sx-loved-tx .t, .sx-loved-tx .m { display: block; }
.sx-loved-tx .t {
  font-size: 13.5px; font-weight: 500; color: var(--sx-text); letter-spacing: -0.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sx-loved-tx .m { font-size: 11px; color: var(--sx-text-3); font-family: var(--sx-font-mono); margin-top: 2px; }
.sx-loved-hearts {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--sx-font-mono); font-size: 12px; color: var(--sx-text-2);
  font-variant-numeric: tabular-nums;
}
.sx-loved-hearts svg { color: var(--sx-danger); }
.sx-loved-foot { margin-top: auto; padding: 12px 14px 4px; border-top: 1px solid var(--sx-line); font-size: 12px; color: var(--sx-text-3); }
@media (max-width: 1000px) {
  .sx-picks { grid-template-columns: 1fr; }
  .sx-pick-spot { grid-template-columns: 1fr; }
  .sx-pick-cover { min-height: 180px; }
}

/* ---------- CTA strip ---------- */
.sx-cta-strip {
  padding: 56px 48px;
  border-radius: var(--sx-r-xl);
  background: radial-gradient(800px 300px at 100% 50%, rgba(91,124,255,0.12), transparent 60%), var(--sx-surface);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap;
}
.sx-cta-strip h2 { font-size: 32px; font-weight: 600; }
.sx-cta-strip p { color: var(--sx-text-2); margin-top: 10px; font-size: 16px; }
.sx-cta-strip-actions { display: flex; gap: 10px; }

/* ---------- Footer ----------
 * The site footer chrome (.sx-footer / .sx-footer-grid / .sx-footer-bottom /
 * .sx-social) lives in css/sx-footer.css, which base.html loads globally so
 * every page — including admin/moderator shells and detail pages that never
 * opt into this stylesheet — gets a styled footer. Mirrors the sx-nav chrome
 * in css/sx-nav-actions.css. */

/* ---------- FAQ section overrides (keeps current accordion markup so faq.js stays wired) ---------- */
.sx .faq-section { margin-top: 96px; }
.sx .faq-section .page-shell { padding: 0; }
.sx .faq-accordion {
  background: var(--sx-surface);
  border-radius: var(--sx-r-lg);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  overflow: hidden;
}
.sx .faq-item { border-bottom: 1px solid var(--sx-line); }
.sx .faq-item:last-child { border-bottom: 0; }
.sx .faq-question {
  width: 100%; text-align: left;
  padding: 18px 20px;
  background: transparent; border: 0;
  color: var(--sx-text);
  font-size: 15px; font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: -0.005em;
}
.sx .faq-question:hover { background: var(--sx-surface-2); }
.sx .faq-answer {
  padding: 0 20px 18px;
  color: var(--sx-text-2);
  font-size: 14px; line-height: 1.6;
}
.sx .faq-answer p { margin: 0; }
.sx .quiet-link {
  display: inline-block;
  margin-top: 16px;
  color: var(--sx-text-2);
  font-size: 13px;
}
.sx .quiet-link:hover { color: var(--sx-text); }

/* Hamburger (#nav-toggle) styles + responsive mobile collapse live in
 * css/sx-nav-actions.css so every page that renders sx_nav.html gets the
 * same mobile chrome — not just the ones that opt into sx-home.css. */

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .sx-creator-row { grid-template-columns: repeat(2, 1fr); }
  .sx-founding { grid-template-columns: 1fr; }
  .sx-hero h1 { font-size: 48px; }
  .sx-hero { padding: 64px 0 48px; }
  .sx-hero-strip { grid-template-columns: repeat(2, 1fr); gap: 16px 0; }
  .sx-hero-strip > div { padding: 0 16px; }
  .sx-hero-strip > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .sx-steps { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .sx-creator-row { grid-template-columns: 1fr; }
  .sx-hero h1 { font-size: 36px; }
  .sx-hero .lede { font-size: 16px; }
  .sx-section-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .sx-cta-strip { padding: 32px 24px; }
  .sx-cta-strip h2 { font-size: 24px; }
  .sx-container { padding: 0 20px; }
  .sx-hero-strip { grid-template-columns: 1fr; }
  .sx-hero-strip > div { border-left: 0; padding: 8px 0 !important; border-top: 1px solid var(--sx-line); }
  .sx-hero-strip > div:first-child { border-top: 0; }
}

/* ---------- Match the new background on every page that opts into the shell ---------- */
body.home-page,
body.sx-shell { background: var(--sx-bg, #FAFAFB); }

/* ---------- Sticky nav fix ----------
 * base.css sets `html, body { overflow-x: hidden; }` which makes <body>
 * its own scroll container and breaks `position: sticky` on body's
 * direct children (the nav never moves because body itself doesn't
 * scroll — the window does). `overflow-x: clip` keeps the same
 * horizontal-overflow guard without creating a scroll container, so
 * sticky resolves against the window scroll like the mock expects. */
html:has(body.home-page),
html:has(body.sx-shell),
html:has(body.hub-page),
body.home-page,
body.sx-shell,
body.hub-page { overflow-x: clip; }

/* ---------- "Owned" / "Creator" pill on listing cover ---------- */
.sx-card-cover-owned {
  position: absolute; bottom: 10px; left: 10px;
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 8px;
  border-radius: 4px;
  background: rgba(31,157,85,0.14);
  color: var(--sx-ok, #1F9D55);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(31,157,85,0.30) inset;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1;
}

/* ---------- Hide cards filtered out by marketplace.js ---------- */
.sx-card.is-hidden { display: none !important; }

/* ---------- Quick add-to-cart button on listing card cover ---------- */
.sx-card-cart {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  flex: 0 0 30px;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(11, 13, 18, 0.78);
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.18) inset,
    0 4px 10px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 180ms ease, transform 180ms ease, background-color 180ms ease, color 180ms ease;
  z-index: 2;
}
.sx-card-cart:hover { background: var(--sx-brand, #5B7CFF); color: #fff; }
.sx-card-cart:focus-visible {
  outline: none;
  opacity: 1;
  transform: translateY(0);
  box-shadow:
    0 0 0 2px var(--sx-bg, #FFFFFF),
    0 0 0 4px var(--sx-brand, #5B7CFF);
}
.sx-card:hover .sx-card-cart,
.sx-card:focus-within .sx-card-cart {
  opacity: 1;
  transform: translateY(0);
}
.sx-card-cart .sx-card-cart-icon-added { display: none; }
.sx-card-cart.is-added,
.sx-card-cart[data-in-cart="true"] {
  opacity: 1;
  transform: translateY(0);
  background: #2EBD85;
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.22) inset,
    0 4px 10px rgba(46, 189, 133, 0.35);
}
.sx-card-cart.is-added .sx-card-cart-icon-default,
.sx-card-cart[data-in-cart="true"] .sx-card-cart-icon-default { display: none; }
.sx-card-cart.is-added .sx-card-cart-icon-added,
.sx-card-cart[data-in-cart="true"] .sx-card-cart-icon-added { display: inline-block; }
[data-theme="light"] .sx-card-cart {
  background: rgba(255, 255, 255, 0.95);
  color: var(--sx-text);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.10) inset,
    0 4px 10px rgba(14, 19, 32, 0.12);
}
[data-theme="light"] .sx-card-cart:hover { background: var(--sx-brand, #5B7CFF); color: #fff; }
@media (hover: none) {
  .sx-card-cart { opacity: 1; transform: none; }
}

/* ============================================================
 * v1 home sections — ported from Sigrix_new/Site - Home.html
 * (What-is grid, use-case chips, Sigrix Learn cards). Tokens are
 * theme-agnostic; the two accent colors default to the light brand
 * here and are brightened under [data-theme="dark"] below.
 * ============================================================ */

/* What is an AI marketplace — definition strip (replaces 3 dense SEO cards) */
.sx-def-lead {
  font-size: 17px; line-height: 1.6; color: var(--sx-text-2);
  max-width: 78ch;
}
.sx-def-lead b { color: var(--sx-text); font-weight: 600; }
.sx-def-lead a {
  color: var(--sx-brand-3);
  text-decoration: underline;
  text-decoration-color: rgba(107,120,255,0.35);
  text-underline-offset: 3px;
  transition: text-decoration-color 120ms ease;
}
.sx-def-lead a:hover { text-decoration-color: currentColor; }
.sx-def-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 32px;
  border-top: 1px solid var(--sx-line);
}
.sx-def {
  padding: 22px 28px 4px;
  border-left: 1px solid var(--sx-line);
}
.sx-def:first-child { border-left: 0; padding-left: 0; }
.sx-def h3 {
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--sx-text);
}
.sx-def p {
  font-size: 14px; line-height: 1.55; color: var(--sx-text-2);
  margin-top: 7px;
}
.sx-def a { color: var(--sx-brand-3); font-weight: 500; }
.sx-def a:hover { text-decoration: underline; }
@media (max-width: 900px) {
  .sx-def-grid { grid-template-columns: 1fr; }
  .sx-def { border-left: 0; padding: 20px 0 4px; border-top: 1px solid var(--sx-line); }
  .sx-def:first-child { border-top: 0; }
}

/* Sigrix Learn cards */
.sx-learn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.sx-learn-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 28px;
  border-radius: var(--sx-r-lg);
  background: var(--sx-surface);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  transition: box-shadow 160ms, background 160ms, transform 160ms;
  text-decoration: none;
}
.sx-learn-card:hover {
  background: var(--sx-surface-2);
  box-shadow: 0 0 0 1px var(--sx-line-2) inset, 0 12px 30px -16px rgba(14,19,32,0.18);
}
.sx-learn-card-eyebrow {
  font-family: var(--sx-font-mono);
  font-size: 11px; color: var(--sx-text-3);
  letter-spacing: 0.04em;
}
.sx-learn-card h3 {
  font-size: 22px; font-weight: 600; letter-spacing: -0.015em;
  color: var(--sx-text); line-height: 1.2;
}
.sx-learn-card p {
  font-size: 14px; color: var(--sx-text-2); line-height: 1.6;
  flex: 1;
}
.sx-learn-card-link {
  margin-top: 6px;
  font-size: 13px; color: var(--sx-brand); font-weight: 500;
}
@media (max-width: 900px) {
  .sx-learn-grid { grid-template-columns: 1fr; }
}

/* ============================================================
 * Dark theme overrides
 * ----------------------------------------------------------------
 * `data-theme="dark"` is set on <html> by the theme-toggle script
 * (src/templates/base.html). `.sx` lives on <body>, so the selector
 * `[data-theme="dark"] .sx` matches the body and any descendant with
 * `.sx-*` classes. We redefine the design tokens for dark and patch
 * the handful of elements that hard-code light colors.
 * Mirrors Sigrix_new/Sigrix Home.html and Sigrix_new/styles.css.
 * ============================================================ */
[data-theme="dark"] .sx {
  --sx-bg: #0B0D12;
  --sx-bg-2: #0F1218;
  --sx-surface: #14181F;
  --sx-surface-2: #1A1F28;
  --sx-line: #232936;
  --sx-line-2: #2C3342;
  --sx-text: #E7EAF0;
  --sx-text-2: #AAB2C0;
  --sx-text-3: #858DA0;
  --sx-mute: #4A5161;

  --sx-brand: #3D4DFF;
  --sx-brand-2: #1A1F6B;
  --sx-brand-3: #6B78FF;
  --sx-brand-ink: #FFFFFF;
  --sx-accent: #7CE3D4;
  --sx-warn: #F5B454;
  --sx-danger: #F47B7B;
  --sx-ok: #6EE7A1;

  --sx-warn-text: #F5B454;
  --sx-danger-text: #F47B7B;
  --sx-ok-text: #6EE7A1;
  --sx-accent-text: #7CE3D4;

  color-scheme: dark;
}

/* Primary button — brighter top stop so it lifts off the dark surface */
[data-theme="dark"] .sx-btn--primary,
[data-theme="dark"] button.sx-btn--primary {
  background: linear-gradient(135deg, #6B78FF 0%, #1A1F6B 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 0 0 1px rgba(91,124,255,0.55), 0 1px 2px rgba(0,0,0,0.4);
}
[data-theme="dark"] .sx-btn--primary:hover { background: linear-gradient(135deg, #8089FF 0%, #1A1F6B 100%); }

/* Type chips — restore the dark-on-color variants from the design system */
[data-theme="dark"] .sx-chip--type-prompt     { color: #B7D5FF; box-shadow: 0 0 0 1px rgba(91,124,255,0.35) inset; background: rgba(91,124,255,0.08); }
[data-theme="dark"] .sx-chip--type-skill      { color: #C8F2DD; box-shadow: 0 0 0 1px rgba(34,197,94,0.32) inset; background: rgba(34,197,94,0.09); }
[data-theme="dark"] .sx-chip--type-persona    { color: #FFD3B7; box-shadow: 0 0 0 1px rgba(245,180,84,0.30) inset; background: rgba(245,180,84,0.08); }
[data-theme="dark"] .sx-chip--type-assistant  { color: #E2C7FF; box-shadow: 0 0 0 1px rgba(180,140,255,0.30) inset; background: rgba(180,140,255,0.08); }
[data-theme="dark"] .sx-chip--type-agent      { color: #FFC2BC; box-shadow: 0 0 0 1px rgba(244,123,123,0.32) inset; background: rgba(244,123,123,0.09); }
[data-theme="dark"] .sx-chip--type-crew       { color: #C2F5E6; box-shadow: 0 0 0 1px rgba(124,227,212,0.30) inset; background: rgba(124,227,212,0.08); }
[data-theme="dark"] .sx-chip--type-product    { color: #F9BFE0; box-shadow: 0 0 0 1px rgba(236,106,184,0.30) inset; background: rgba(236,106,184,0.08); }
[data-theme="dark"] .sx-chip--type-mcp_server { color: #A5B4FC; box-shadow: 0 0 0 1px rgba(79,70,229,0.32) inset; background: rgba(79,70,229,0.09); }
[data-theme="dark"] .sx-chip--type-system     { color: #FDBA74; box-shadow: 0 0 0 1px rgba(234,88,12,0.32) inset; background: rgba(234,88,12,0.09); }
[data-theme="dark"] .sx-chip--target-midjourney { color: #C7C9FF; box-shadow: 0 0 0 1px rgba(129,137,255,0.35) inset; background: rgba(129,137,255,0.08); }
[data-theme="dark"] .sx-chip--ok             { color: var(--sx-ok); box-shadow: 0 0 0 1px rgba(110,231,161,0.3) inset; background: rgba(110,231,161,0.06); }
[data-theme="dark"] .sx-chip--warn           { color: var(--sx-warn); box-shadow: 0 0 0 1px rgba(245,180,84,0.3) inset; background: rgba(245,180,84,0.06); }
[data-theme="dark"] .sx-chip--brand          { box-shadow: 0 0 0 1px rgba(107,120,255,0.35) inset; background: rgba(107,120,255,0.08); }

/* Glass nav over dark backdrop — moved to css/sx-nav-actions.css alongside the
 * base .sx-nav chrome so it applies on every page that renders sx_nav.html. */

/* Theme-toggle thumb sits on dark surface, needs darker shadow */
[data-theme="dark"] .sx-theme-toggle-thumb {
  box-shadow: 0 0 0 1px var(--sx-line, #E6E8EE) inset, 0 1px 2px rgba(0,0,0,0.4);
}

/* Hero glow + grid lines */
[data-theme="dark"] .sx-hero-bg {
  background:
    radial-gradient(900px 400px at 20% 0%, rgba(61,77,255,0.22), transparent 60%),
    radial-gradient(700px 360px at 90% 20%, rgba(26,31,107,0.30), transparent 60%);
}
[data-theme="dark"] .sx-hero-grid {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
}

/* Listing-card cover: dark gradient with white art and white-on-glass tags */
[data-theme="dark"] .sx-card-cover {
  background: linear-gradient(135deg, #1B2230 0%, #131722 100%);
}
[data-theme="dark"] .sx-card-cover-art { color: rgba(255,255,255,0.85); }
[data-theme="dark"] .sx-card-cover-grid {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
  mix-blend-mode: normal;
  opacity: 1;
}
[data-theme="dark"] .sx-card-cover-tag .sx-chip {
  background: rgba(11,13,18,0.72);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.18) inset, 0 1px 2px rgba(0,0,0,0.25);
}
[data-theme="dark"] .sx-card-cover-price {
  background: rgba(11,13,18,0.72);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.18) inset, 0 1px 2px rgba(0,0,0,0.25);
}
[data-theme="dark"] .sx-avatar {
  background: linear-gradient(135deg, #2C3342, #1A1F28);
  color: var(--sx-text-2);
}
[data-theme="dark"] .sx-card:hover {
  box-shadow: 0 0 0 1px var(--sx-line-2) inset, 0 12px 30px -16px rgba(0,0,0,0.7);
  background: var(--sx-surface-2);
}

/* Quicklink dot — keep the brand gradient (no override needed) */

/* Founding panel — boost the indigo glow to read on the dark surface */
[data-theme="dark"] .sx-founding {
  background:
    radial-gradient(600px 220px at 100% 0%, rgba(61,77,255,0.22), transparent 60%),
    radial-gradient(400px 200px at 0% 100%, rgba(26,31,107,0.18), transparent 60%),
    var(--sx-surface);
}
[data-theme="dark"] .sx-counter-cell .num {
  background: linear-gradient(135deg, #6B78FF 0%, #3D4DFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Picks / CTA strip */
[data-theme="dark"] .sx-pick-spot:hover {
  box-shadow: 0 0 0 1px var(--sx-line-2) inset, 0 12px 30px -16px rgba(0,0,0,0.7);
}
[data-theme="dark"] .sx-pick-foot .go { color: var(--sx-brand-3); }
[data-theme="dark"] .sx-cta-strip {
  background: radial-gradient(800px 300px at 100% 50%, rgba(91,124,255,0.16), transparent 60%), var(--sx-surface);
}

/* v1 home sections — brighten accents + deepen hover shadow on dark */
[data-theme="dark"] .sx-learn-card:hover {
  box-shadow: 0 0 0 1px var(--sx-line-2) inset, 0 12px 30px -16px rgba(0,0,0,0.7);
}
[data-theme="dark"] .sx-learn-card-link { color: var(--sx-brand-3); }

/* Body background: home + sx-shell pages keep the dark canvas */
[data-theme="dark"] body.home-page,
[data-theme="dark"] body.sx-shell { background: #0B0D12; }

/* ---------- Founding sellers — compact homepage teaser ---------- */
/* Rendered by components/_founding_teaser.html; theme-aware via design tokens. */
.sx-fs-teaser {
  position: relative;
  padding: 36px 40px;
  border-radius: var(--sx-r-xl);
  background:
    radial-gradient(700px 240px at 100% 0%, rgba(61, 77, 255, 0.14), transparent 60%),
    var(--sx-surface);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: center;
  overflow: hidden;
}
.sx-fs-teaser h2 {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin-top: 12px;
}
.sx-fs-teaser h2 .accent { color: var(--sx-brand); }
.sx-fs-teaser .lede {
  color: var(--sx-text-2);
  font-size: 14.5px;
  line-height: 1.55;
  margin-top: 14px;
  max-width: 50ch;
}
/* The teaser's own seat counter and progress bar were removed in #4848 — the
 * founding-seller program panel renders directly above it and already states
 * the count and draws the bar. Their rules went with them. */

.sx-fs-teaser-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding-left: 24px;
  border-left: 1px solid var(--sx-line);
}
.sx-fs-teaser-avis {
  display: flex;
  align-items: center;
  gap: 14px;
}
.sx-fs-teaser-stack { display: flex; }
.sx-fs-teaser-stack .av {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(61, 77, 255, 0.22), rgba(61, 77, 255, 0.06));
  box-shadow: 0 0 0 2px var(--sx-surface), 0 0 0 3px rgba(61, 77, 255, 0.30);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sx-brand);
  font-weight: 700;
  font-size: 16px;
  font-family: var(--sx-font-display);
  margin-left: -10px;
  overflow: hidden;
}
.sx-fs-teaser-stack .av:first-child { margin-left: 0; }
.sx-fs-teaser-stack .av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.sx-fs-teaser-stack .av.empty {
  background: var(--sx-bg);
  box-shadow: 0 0 0 2px var(--sx-surface), 0 0 0 3px var(--sx-line);
  color: var(--sx-text-3);
  font-size: 14px;
  font-family: var(--sx-font-mono);
  font-weight: 500;
}
/* The "N of M founding sellers joined" label beside the avatars, and the
 * link-styled secondary beside the apply button, also went in #4848 — the
 * avatar stack now stands on its own next to a single wall link. */

.sx-fs-teaser-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .sx-fs-teaser { grid-template-columns: 1fr; padding: 28px; gap: 24px; }
  .sx-fs-teaser-right {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--sx-line);
    padding-top: 24px;
  }
  .sx-fs-teaser h2 { font-size: 28px; }
}

/* ============================================================
 * v2 home sections — ported from Sigrix_new/site/Site - Home.html
 * (hero privacy note, catalogue tabs, accounts & privacy panel).
 * Light values are the defaults, as everywhere else in this file;
 * the handful of colours that need brightening on dark are patched
 * in the block at the end.
 * ============================================================ */

/* Hero Google Sign-In disclosure, sitting between the lede and the CTAs. */
.sx-hero-privacy {
  margin-top: 24px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
  font-size: 13.5px; line-height: 1.55; color: var(--sx-text-2);
  max-width: 80ch;
}
.sx .sx-hero-privacy a { color: var(--sx-brand); font-weight: 500; text-decoration: none; }
.sx .sx-hero-privacy a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Closing lines under the merged "What is an AI agent marketplace?" steps —
 * one question per row, so a question never wraps away from its own link. */
.sx-explain-foot {
  margin-top: 22px;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 14px; color: var(--sx-text-3);
}
.sx-explain-foot > span { display: flex; flex-wrap: wrap; gap: 0 6px; }
.sx .sx-explain-foot a { color: var(--sx-brand); font-weight: 500; }
.sx .sx-explain-foot a:hover { text-decoration: underline; }

/* Catalogue tabs (Popular / Latest).
 * `min-height: 0` is load-bearing: css/responsive.css sets a site-wide
 * `button { min-height: 44px }` tap-target floor that ships in the head
 * bundle, and it beats `height` — without the opt-out these 30px tabs
 * render 44px tall and burst out of their 36px container. */
.sx-tabs {
  display: inline-flex; gap: 2px; padding: 3px;
  border-radius: 10px;
  background: var(--sx-surface);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
}
.sx-tab {
  height: 30px; min-height: 0; padding: 0 14px;
  border-radius: 7px;
  font-family: inherit; font-size: 13px; font-weight: 500;
  color: var(--sx-text-2);
  background: transparent; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  transition: background 120ms, color 120ms;
}
.sx-tab:hover { color: var(--sx-text); }
.sx-tab[aria-selected="true"] {
  background: var(--sx-bg);
  color: var(--sx-text);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
}
/* Catalogue groups — "New this week" and "Popular right now", stacked and
   divided rather than tabbed. The rule and the 44px of space above it are
   what carry the separation the tabs used to; without them the two grids
   read as one long wall of cards. */
.sx-cat-group + .sx-cat-group {
  margin-top: 44px;
  padding-top: 36px;
  border-top: 1px solid var(--sx-line);
}
.sx-cat-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 18px;
}
.sx-cat-head .h {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sx-font-display);
  font-size: 19px; font-weight: 600; letter-spacing: -0.015em;
  color: var(--sx-text);
}
.sx-cat-head .h .k { display: block; width: 8px; height: 8px; border-radius: 50%; }
/* The two section markers, on semantic tokens rather than literals. The
   prototype is authored at data-theme="dark" and set these inline — #6B78FF and
   #7CE3D4 — which are exactly the *dark* values of --sx-brand-3 and --sx-accent,
   so the port baked one theme's colours into both. Reading the tokens restores
   the light values (#3D4DFF, #14B8A6) and renders dark byte-identically to the
   prototype.

   It settles a collision in light, and only in light. The literals doubled as
   listing-type colours — #7CE3D4 *is* --sx-lt-crew, #6B78FF is a near-copy of
   --sx-lt-prompt — so a teal dot meant "crew" on a card and "Popular right now"
   on the heading above it. The light values above are clear of the whole type
   palette. In dark they are not: --sx-accent resolves to #7CE3D4 there, so that
   overlap survives. It belongs to --sx-accent rather than to this dot, and is
   shared with every other consumer of the token, so it is owned and explained
   once in tests/test_palette_overlap.py rather than fixed by giving this one
   marker a private colour. That file also records why moving the value is not
   available: crew owns teal, and every accent still recognisable as this one
   lands on top of it.

   No specificity fight to win here, unlike the quick-link dots: the rule above
   sets no background, so these only add one. */
.sx-cat-head .h .k--new     { background: var(--sx-brand-3); }
.sx-cat-head .h .k--popular { background: var(--sx-accent); }
.sx-cat-head .n {
  font-family: var(--sx-font-mono); font-size: 12px;
  color: var(--sx-text-3); white-space: nowrap;
}
@media (max-width: 560px) {
  /* The meta line drops under the heading rather than being squeezed against
     it; `white-space: nowrap` above would otherwise push the row wide. */
  .sx-cat-head { flex-direction: column; gap: 4px; }
}

/* Accounts & privacy panel (#data-use) — the Google OAuth data-use
 * disclosure. Unrelated to `.sx-oauth-btn` / `.sx-oauth-row` in
 * css/sx-register.css, which are scoped under `.sx-register`. */
.sx-oauth {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 44px;
  padding: 38px 40px;
  border-radius: var(--sx-r-xl);
  background: var(--sx-surface);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
}
.sx-oauth-prose p {
  font-size: 15px; line-height: 1.65; color: var(--sx-text-2);
  text-wrap: pretty; max-width: 62ch;
}
.sx-oauth-prose p b { color: var(--sx-text); font-weight: 600; }
.sx-oauth-prose p + p { margin-top: 14px; }
.sx-oauth-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.sx .sx-oauth-links a {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 16px;
  border-radius: var(--sx-r-md);
  background: var(--sx-bg);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  font-size: 14px; font-weight: 500; color: var(--sx-text);
  text-decoration: none;
  transition: box-shadow 120ms, background 120ms;
}
.sx .sx-oauth-links a:hover {
  background: var(--sx-surface-2);
  box-shadow: 0 0 0 1px var(--sx-line-2) inset;
}
.sx-oauth-links a svg { color: var(--sx-text-3); }
.sx-oauth-card {
  padding: 24px;
  border-radius: var(--sx-r-lg);
  background: var(--sx-bg);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  align-self: start;
}
.sx-oauth-card-h {
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--sx-text-3);
}
.sx-oauth-scopes { list-style: none; padding: 0; margin: 16px 0 0; }
.sx-oauth-scopes li { padding: 13px 0; border-top: 1px solid var(--sx-line); }
.sx-oauth-scopes li:first-child { border-top: 0; padding-top: 0; }
.sx-oauth-scopes .k {
  font-size: 14px; font-weight: 600; color: var(--sx-text);
  letter-spacing: -0.005em;
}
.sx-oauth-scopes .v {
  display: block; font-size: 13px; line-height: 1.55;
  color: var(--sx-text-2); margin-top: 4px; text-wrap: pretty;
}
.sx-oauth-card-foot {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--sx-line);
  font-size: 12.5px; line-height: 1.55; color: var(--sx-text-3);
  text-wrap: pretty;
}
.sx .sx-oauth-card-foot a { color: var(--sx-text-2); text-decoration: underline; }
@media (max-width: 900px) {
  .sx-oauth { grid-template-columns: 1fr; gap: 28px; padding: 28px; }
}

/* v2 home sections — brighten link accents on the dark canvas */
[data-theme="dark"] .sx .sx-hero-privacy a,
[data-theme="dark"] .sx .sx-explain-foot a { color: var(--sx-brand-3); }

/* ============================================================
 * v3 home — split hero, wireframe diagrams, the clickable
 * walkthrough and the merged "Learn & updates" band.
 * Ported from Sigrix_new/site/Site - Home.html.
 *
 * Light values are the defaults, as everywhere else in this file;
 * the accents that need brightening on the dark canvas are
 * patched at the foot of this block.
 * ============================================================ */

/* ---------- Split hero ---------- */
.sx-hero--split { padding: 84px 0 64px; }
.sx-hero-2col {
  display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 64px;
  align-items: center;
}
/* The two overrides below have to sit after the file's responsive block,
 * because `.sx-hero--split h1` and `.sx-hero h1` are both (0,2,0) — only
 * document order separates them, so the mobile sizes are re-declared in
 * this block's own media queries rather than inherited from that one. */
.sx-hero--split h1 { font-size: 56px; max-width: 15ch; }
.sx-hero--split .lede { margin-top: 18px; max-width: 44ch; }
/* Compact register in the split hero: the disclosure gives up the width
 * the wireframe now occupies, so it reads as a footnote under the
 * quicklinks rather than a band across the hero. */
.sx-hero--split .sx-hero-privacy {
  margin-top: 22px; gap: 8px 10px;
  font-size: 13px; color: var(--sx-text-3); max-width: 52ch;
}
@media (max-width: 980px) {
  .sx-hero--split { padding: 64px 0 48px; }
  .sx-hero-2col { grid-template-columns: 1fr; gap: 40px; }
  .sx-hero--split h1 { font-size: 44px; max-width: none; }
}
@media (max-width: 640px) {
  .sx-hero--split h1 { font-size: 36px; }
}

/* ---------- Wireframe diagrams ----------
 * A schematic of the surface being described, drawn in the design-system
 * tokens so it re-themes with the page instead of shipping two PNGs.
 * `.fr` frames, `.bar`/`.bar-2` are placeholder content, `.ac`/`.acf` the
 * accent stroke/fill and `.warn`/`.warnf` the caution branch. */
.sx-dia {
  border-radius: var(--sx-r-lg);
  background: var(--sx-surface);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  padding: 24px;
}
.sx-dia svg { display: block; width: 100%; height: auto; }
.sx-dia .fr { fill: none; stroke: var(--sx-line-2); stroke-width: 1.5; }
.sx-dia .bar { fill: var(--sx-line); }
.sx-dia .bar-2 { fill: var(--sx-line-2); }
.sx-dia .ac { fill: none; stroke: var(--sx-brand); stroke-width: 1.5; }
.sx-dia .acf { fill: var(--sx-brand); }
.sx-dia .warn { fill: none; stroke: var(--sx-warn); stroke-width: 1.5; }
.sx-dia .warnf { fill: var(--sx-warn); }
.sx-dia text { font-family: var(--sx-font-mono); font-size: 10.5px; letter-spacing: 0.01em; }
.sx-dia .lbl { fill: var(--sx-text-3); }
.sx-dia .lbl-s { fill: var(--sx-text-2); }
.sx-dia .lbl-a { fill: var(--sx-brand); }
.sx-dia .lbl-w { fill: var(--sx-warn); }
.sx-dia .lbl-i { fill: var(--sx-brand-ink, #fff); }
.sx-dia .big { font-size: 15px; font-weight: 600; }
.sx-dia-cap {
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--sx-line);
  font-size: 13.5px; line-height: 1.6; color: var(--sx-text-2);
  text-wrap: pretty;
}
.sx-dia-cap b { color: var(--sx-text); font-weight: 600; }

/* ---------- Clickable walkthrough ----------
 * A vertical tablist of steps beside the diagram for the selected one.
 * Every panel is rendered server-side and the inactive ones carry
 * `hidden`, so with no JavaScript the page still shows step one in full
 * and every step's heading. */
.sx-wt {
  display: grid; grid-template-columns: minmax(0, 390px) minmax(0, 1fr);
  gap: 28px; align-items: start;
}
.sx-wt-steps { display: flex; flex-direction: column; gap: 4px; }
/* Two opt-outs from site-wide `button` rules, both silent when missed:
 * `min-height: 0` against the 44px tap-target floor in css/responsive.css (the
 * same one `.sx-tab` opts out of), and `font-weight: 400` against
 * css/base.css's `button { font-weight: 600 }` — without it the step's
 * *description* inherits the bold the title declares for itself, and the
 * unselected/selected weight contrast the design turns on disappears. */
.sx-wt-step {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px;
  align-items: start; text-align: left; width: 100%;
  padding: 14px 16px; min-height: 0; font-weight: 400;
  border: 0; cursor: pointer;
  border-radius: var(--sx-r-md);
  background: transparent;
  box-shadow: 0 0 0 1px transparent inset;
  transition: background 140ms, box-shadow 140ms;
  font-family: inherit;
}
.sx-wt-step:hover { background: var(--sx-surface); }
.sx-wt-step[aria-selected="true"] {
  background: var(--sx-surface);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
}
.sx-wt-n {
  font-family: var(--sx-font-mono); font-size: 11px;
  color: var(--sx-text-3); padding-top: 3px;
  font-variant-numeric: tabular-nums;
}
.sx-wt-step[aria-selected="true"] .sx-wt-n { color: var(--sx-brand); }
.sx-wt-t {
  font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--sx-text-2);
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
.sx-wt-step[aria-selected="true"] .sx-wt-t { color: var(--sx-text); }
.sx-wt-d {
  font-size: 13.5px; color: var(--sx-text-3); line-height: 1.55;
  margin-top: 5px; display: none; text-wrap: pretty;
}
.sx-wt-step[aria-selected="true"] .sx-wt-d { display: block; }
.sx-wt-flag {
  font-family: var(--sx-font-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--sx-warn-text);
  background: color-mix(in oklab, var(--sx-warn) 10%, transparent);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--sx-warn) 30%, transparent) inset;
  padding: 2px 7px; border-radius: 999px; white-space: nowrap;
}
/* Both layers are toggled with `hidden`, and a class rule that sets `display`
 * beats the `[hidden]` default — so each one needs its own opt-out or the
 * "inactive" track and step render on top of the active ones. */
.sx-wt[hidden],
.sx-wt-panel[hidden] { display: none; }
@media (max-width: 900px) {
  .sx-wt { grid-template-columns: 1fr; }
}

/* ---------- Learn & updates, side by side ---------- */
.sx-lu { display: grid; grid-template-columns: 1.1fr 1fr; gap: 44px; align-items: start; }
/* Column label, not a section heading — it renders as an eyebrow but stays an
 * <h3> so the two columns keep their place in the document outline. */
.sx-lu-h {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sx-text-3); font-weight: 600;
  margin: 0 0 16px;
}
.sx .sx-lu-h a {
  font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--sx-brand); white-space: nowrap;
}
.sx .sx-lu-h a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sx-lu .sx-learn-grid { grid-template-columns: 1fr; gap: 12px; }
.sx-lu .sx-learn-card { padding: 22px; }
.sx-lu .sx-learn-card h3 { font-size: 19px; }
@media (max-width: 900px) {
  .sx-lu { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- v3 home — brighten accents on the dark canvas ---------- */
[data-theme="dark"] .sx-dia .ac { stroke: var(--sx-brand-3); }
[data-theme="dark"] .sx-dia .acf { fill: var(--sx-brand-3); }
[data-theme="dark"] .sx-dia .lbl-a { fill: var(--sx-brand-3); }
[data-theme="dark"] .sx-wt-step[aria-selected="true"] .sx-wt-n { color: var(--sx-brand-3); }
[data-theme="dark"] .sx .sx-lu-h a { color: var(--sx-brand-3); }

/* ---------- Listing detail -> platform-hub links (#4035) ---------- */
.sx-platform-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; }
.sx-platform-links-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--sx-text-2);
}
.sx-platform-links-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--sx-line); background: var(--sx-surface); color: var(--sx-text);
  font-size: 13px; font-weight: 600; text-decoration: none; line-height: 1.4;
}
.sx-platform-links-chip:hover,
.sx-platform-links-chip:focus-visible { border-color: var(--sx-brand); color: var(--sx-brand-text); }

/* ==== bundled from: css/promotions.css ==== */
/* Promotion card surfaces (#4187, P2) + global announcement bar (#4188, P3) +
 * "New" badge pips (#4189, P4).
 *
 * Ported from the Sigrix_new/promotions.js prototype CSS (`.spromo-card`,
 * :168-208; `.spromo-bar`, :144-166; `.spromo-pip`, :210-214). Keyed off the
 * global --sx-* design tokens already exposed in base.html; per-promo accents
 * (--spc-accent* / --spb-accent) are set inline by the server from the
 * promotion's accent colour.
 *
 * This is a bundle SOURCE (css_bundles._SHELL_CORE), so it must not use a
 * relative url() path or pull in another sheet — see css_bundles.render_bundle.
 */

.spromo-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--sx-r-lg, 14px);
  border: 1px solid var(--sx-line, #232936);
  background: var(--sx-surface, #14181f);
  box-shadow: var(--sx-shadow-2, 0 8px 24px -12px rgba(0, 0, 0, 0.6));
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 22px 26px;
  font-family: var(--sx-font-body, "Geist", system-ui, sans-serif);
  animation: spromoDrop 0.34s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes spromoDrop {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

.spromo-card .spc-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.9;
  background: radial-gradient(520px 200px at 100% 0%, var(--spc-tint), transparent 62%);
}

.spromo-card .spc-ic {
  position: relative;
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(150deg, var(--spc-accent), var(--spc-accent-2));
  box-shadow: 0 8px 20px -8px var(--spc-accent);
}

.spromo-card .spc-ic svg { width: 26px; height: 26px; }

.spromo-card .spc-tx { position: relative; min-width: 0; flex: 1; }

.spromo-card .spc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--spc-accent);
}

.spromo-card .spc-eyebrow .spb-badge {
  height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 9.5px;
  background: var(--spc-accent);
  color: #fff;
  letter-spacing: 0.06em;
}

.spromo-card h3 {
  margin: 7px 0 5px;
  font-family: var(--sx-font-display, "Geist", sans-serif);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--sx-text, #e7eaf0);
}

.spromo-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--sx-text-2, #aab2c0);
  max-width: 74ch;
  text-wrap: pretty;
}

.spromo-card .spc-cta {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 42px;
  padding: 0 20px;
  border-radius: 11px;
  font-weight: 600;
  font-size: 14.5px;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(150deg, var(--spc-accent), var(--spc-accent-2));
  box-shadow: 0 10px 24px -10px var(--spc-accent);
  transition: filter 0.12s;
}

.spromo-card .spc-cta:hover { filter: brightness(1.07); text-decoration: none; }

.spromo-card .spc-cta svg { width: 16px; height: 16px; }

/* Placement wrappers — match the site's container rhythm on each surface. */
.spromo-home-wrap { margin: 0 auto; padding: 20px 24px 0; max-width: 1200px; }
.spromo-browse-wrap { margin: 16px 0 4px; }
.spromo-dash-wrap { margin: 0 0 20px; }

@media (max-width: 820px) {
  .spromo-card { flex-wrap: wrap; gap: 16px; padding: 20px; }
  .spromo-card .spc-cta { width: 100%; justify-content: center; }
}

/* Global announcement bar (#4188, P3) — a full-width strip above the nav. It
 * sits outside any .sx root, but --sx-* tokens are global (base.html :root /
 * [data-theme]), so it re-themes with the page; only --spb-accent is per-promo
 * and set inline. Ported from promotions.js `.spromo-bar` (:144-166). */
.spromo-bar {
  position: relative;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 22px;
  font-family: var(--sx-font-body, "Geist", system-ui, sans-serif);
  font-size: 13.5px;
  border-bottom: 1px solid var(--sx-line, #232936);
  background: var(--sx-surface, #14181f);
  color: var(--sx-text, #e7eaf0);
  animation: spromoDrop 0.34s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.spromo-bar .spb-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--spb-accent, #3d4dff);
  color: #fff;
  flex: none;
}

.spromo-bar .spb-msg {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spromo-bar .spb-msg b { font-weight: 600; }
.spromo-bar .spb-msg span { color: var(--sx-text-2, #aab2c0); }

.spromo-bar .spb-cta {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  height: 28px;
  padding: 0 13px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  color: #fff;
  background: var(--spb-accent, #3d4dff);
  text-decoration: none;
  transition: filter 0.12s;
}

.spromo-bar .spb-cta:hover { filter: brightness(1.08); text-decoration: none; }
.spromo-bar .spb-cta svg { width: 14px; height: 14px; }

.spromo-bar .spb-x {
  flex: none;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--sx-text-2, #aab2c0);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.spromo-bar .spb-x:hover { background: rgba(127, 127, 127, 0.14); color: var(--sx-text, #e7eaf0); }
.spromo-bar .spb-x svg { width: 15px; height: 15px; }

@media (max-width: 720px) {
  .spromo-bar { padding: 8px 14px; gap: 10px; }
  .spromo-bar .spb-msg span { display: none; }
}

/* "New" badge pips (#4189, P4) — a small uppercase pill decorating the Crew
 * filter tab, the Publish button, and the Publish type-picker Crew card. Ported
 * from promotions.js `.spromo-pip` (:210-214); only --spc-accent is per-promo,
 * set inline by the server from the promotion's sanitised accent. */
.spromo-pip {
  display: inline-flex;
  align-items: center;
  height: 15px;
  padding: 0 6px;
  margin-left: 6px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  vertical-align: middle;
  background: var(--spc-accent, #7c6ce8);
  color: #fff;
  font-family: var(--sx-font-body, "Geist", system-ui, sans-serif);
}

/* ============================================================================
 * Welcome-coupon banner surfaces (#4254 / #4283).
 *
 * The persistent personal welcome-coupon reminders: the account/dashboard card
 * (.wc-card) and the marketplace signed-in browse strip (.wc-banner). Amber
 * "welcome offer" register, ported from the verified mockup
 * (Sigrix_new/Welcome Coupon - Surfacing.html). Q B = escalate: the "expiring"
 * state (.is-urgent) layers pulse + amber skin + urgent copy; the <=3-day live
 * countdown (.wc-countdown) is flag-gated off by default and enhanced by
 * base_bootstrap.js.
 *
 * Like the rest of this file it is a bundle SOURCE (css_bundles._SHELL_CORE),
 * so it stays self-contained (no external sheets, no relative asset paths) and
 * uses only the global --sx-* tokens (base.html) plus the --wc-warn-* tokens
 * defined just below.
 * ========================================================================== */

/* Amber tokens, themed to match the global --sx-* mechanism (light default on
 * :root, dark override on [data-theme="dark"]). */
:root {
  --wc-warn-ink: #946200;
  --wc-warn-line: rgba(199, 120, 0, 0.30);
  --wc-warn-bg: rgba(199, 120, 0, 0.07);
}
[data-theme="dark"] {
  --wc-warn-ink: #F5B454;
  --wc-warn-line: rgba(245, 180, 84, 0.30);
  --wc-warn-bg: rgba(245, 180, 84, 0.08);
}

/* Amber CTA button — the site ships only --primary/--secondary/--ghost, so the
 * welcome surfaces' warn variant is defined here. Base sizing/layout comes from
 * .sx-btn (sx-home.css); this only sets the amber skin. The a./button. rules
 * bump specificity past the `.sx a { color: inherit }` reset. */
.sx-btn--warn {
  background: linear-gradient(135deg, #F5B454 0%, #C77800 100%);
  color: #3A2600;
  font-weight: 600;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 0 0 1px rgba(199, 120, 0, 0.5);
}
a.sx-btn--warn, button.sx-btn--warn { color: #3A2600; }
.sx-btn--warn:hover { filter: brightness(1.05); }

/* Shared code chip (WELCOME15 + Copy) */
.wc-code {
  display: inline-flex; align-items: center;
  border-radius: var(--sx-r-md);
  background: var(--sx-bg);
  box-shadow: 0 0 0 1px var(--sx-line-2) inset;
  overflow: hidden; height: 40px;
}
.wc-code .val {
  padding: 0 14px;
  font-family: var(--sx-font-mono);
  font-size: 14px; font-weight: 600; letter-spacing: 0.08em;
  color: var(--sx-text);
}
.wc-code .sep { width: 1px; align-self: stretch; background: var(--sx-line-2); }
.wc-code .copy {
  height: 100%; padding: 0 12px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--sx-text-2);
  background: transparent; border: 0; cursor: pointer;
}
.wc-code .copy:hover { background: var(--sx-surface-2); color: var(--sx-text); }
.wc-code .copy.done { color: var(--sx-ok); }
.wc-code .copy .wc-copy-ico { display: inline-flex; }

/* Shared expiry line */
.wc-expiry {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--sx-text-3);
  font-family: var(--sx-font-mono);
}
.wc-expiry svg { opacity: 0.8; }
.wc-expiry .strong { color: var(--wc-warn-ink); font-weight: 600; }

/* Shared gift badge */
.wc-badge {
  width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(245, 180, 84, 0.22), rgba(245, 180, 84, 0.06));
  box-shadow: 0 0 0 1px var(--wc-warn-line) inset;
  color: var(--wc-warn-ink);
}
.wc-badge svg { width: 22px; height: 22px; }

/* ---------------------------- Account card ---------------------------- */
.wc-card {
  position: relative; overflow: hidden;
  background: var(--sx-surface);
  border-radius: var(--sx-r-lg);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  padding: 22px 24px;
  display: flex; flex-direction: column;
}
.wc-card.is-urgent {
  box-shadow: 0 0 0 1px rgba(245, 180, 84, 0.5) inset;
  background: radial-gradient(560px 180px at 100% 0%, var(--wc-warn-bg), transparent 62%), var(--sx-surface);
}
.wc-card.is-urgent .wc-badge {
  background: linear-gradient(135deg, rgba(245, 180, 84, 0.35), rgba(245, 180, 84, 0.10));
}
.wc-card-top { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.wc-card-head { min-width: 0; }
.wc-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sx-text-3); font-weight: 700;
}
.wc-card.is-urgent .wc-eyebrow { color: var(--wc-warn-ink); }
.wc-eyebrow .pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--wc-warn-ink);
  box-shadow: 0 0 0 4px var(--wc-warn-bg);
}
.wc-title {
  font-size: 19px; font-weight: 600; letter-spacing: -0.015em; margin-top: 9px;
}
.wc-title b {
  background: linear-gradient(135deg, #F5B454, #C77800);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-family: var(--sx-font-num, 'Space Grotesk', 'Geist', ui-sans-serif, system-ui, sans-serif);
}
.wc-desc {
  font-size: 13px; color: var(--sx-text-2); line-height: 1.5;
  margin-top: 6px; max-width: 46ch;
}
.wc-15 {
  margin-left: auto; flex-shrink: 0;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 64px; height: 56px; border-radius: var(--sx-r-md);
  background: var(--wc-warn-bg);
  box-shadow: 0 0 0 1px var(--wc-warn-line) inset;
  color: var(--wc-warn-ink);
}
.wc-15 .pct {
  font-family: var(--sx-font-num, 'Space Grotesk', 'Geist', ui-sans-serif, system-ui, sans-serif);
  font-size: 22px; font-weight: 600; line-height: 1;
}
.wc-15 .off {
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 700; margin-top: 3px;
}
.wc-mid { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.wc-foot { margin-top: 18px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wc-foot .spacer { flex: 1; }
.wc-fine { font-size: 11px; color: var(--sx-text-3); font-family: var(--sx-font-mono); }

/* Live countdown (flag-gated; escalate + <=3 days) */
.wc-countdown { display: flex; gap: 8px; margin-top: 2px; }
.wc-cd-cell {
  min-width: 52px; padding: 8px 10px; border-radius: var(--sx-r-sm);
  background: var(--sx-bg);
  box-shadow: 0 0 0 1px var(--wc-warn-line) inset;
  text-align: center;
}
.wc-cd-cell .num {
  font-family: var(--sx-font-num, 'Space Grotesk', 'Geist', ui-sans-serif, system-ui, sans-serif);
  font-size: 22px; font-weight: 600; line-height: 1; letter-spacing: -0.03em;
  color: var(--wc-warn-ink); font-variant-numeric: tabular-nums;
}
.wc-cd-cell .lbl {
  font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sx-text-3); margin-top: 6px; font-weight: 600;
}

@media (max-width: 620px) {
  .wc-card-top { flex-wrap: wrap; }
  .wc-15 { margin-left: 0; }
}

/* -------------------------- Marketplace strip -------------------------- */
.wc-browse-wrap { margin: 16px 0 4px; }
.wc-banner {
  display: flex; align-items: center; gap: 18px;
  padding: 16px 20px; border-radius: var(--sx-r-lg);
  background: radial-gradient(520px 140px at 0% 50%, var(--wc-warn-bg), transparent 70%), var(--sx-surface);
  box-shadow: 0 0 0 1px var(--wc-warn-line) inset;
}
.wc-banner.is-urgent { box-shadow: 0 0 0 1px rgba(245, 180, 84, 0.55) inset; }
.wc-banner .wc-badge { width: 42px; height: 42px; }
.wc-banner-copy { min-width: 0; }
.wc-banner-copy .t { font-size: 15px; font-weight: 600; }
.wc-banner-copy .t b {
  color: var(--wc-warn-ink);
  font-family: var(--sx-font-num, 'Space Grotesk', 'Geist', ui-sans-serif, system-ui, sans-serif);
}
.wc-banner-copy .d { font-size: 12.5px; color: var(--sx-text-2); margin-top: 2px; }
.wc-banner-actions {
  margin-left: auto; display: flex; align-items: center; gap: 14px; flex-shrink: 0;
}
.wc-banner .wc-code { height: 36px; }
.wc-banner .wc-code .val { font-size: 13px; padding: 0 12px; }

@media (max-width: 620px) {
  .wc-banner { flex-wrap: wrap; }
  .wc-banner-actions { margin-left: 0; width: 100%; flex-wrap: wrap; }
}

/* Guest sign-up acquisition CTA (#4254 follow-up) — the "Sign up and get 15%
 * off" ad on the signed-out marketplace, ported from the mockup's MkPromo.
 * Brand-blue, deliberately distinct from the amber owner banners above; no
 * coupon state (it is shown to logged-out visitors who don't have one yet). */
.mk-promo {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px; border-radius: var(--sx-r-lg);
  background: radial-gradient(540px 150px at 0% 50%, rgba(61, 77, 255, 0.07), transparent 70%), var(--sx-surface);
  box-shadow: 0 0 0 1px rgba(91, 124, 255, 0.30) inset;
}
[data-theme="dark"] .mk-promo {
  background: radial-gradient(540px 150px at 0% 50%, rgba(91, 124, 255, 0.12), transparent 70%), var(--sx-surface);
}
.mk-promo-badge {
  width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--sx-brand-3), var(--sx-brand-2));
  color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset;
}
.mk-promo-badge svg { width: 22px; height: 22px; }
.mk-promo-copy { min-width: 0; flex: 1; }
.mk-promo-copy .e {
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sx-brand-3); font-weight: 700;
}
.mk-promo-copy .t { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; margin-top: 5px; }
.mk-promo-copy .t b {
  color: var(--sx-brand-3);
  font-family: var(--sx-font-num, 'Space Grotesk', 'Geist', ui-sans-serif, system-ui, sans-serif);
}
.mk-promo-copy .d { font-size: 12.5px; color: var(--sx-text-2); margin-top: 3px; max-width: 52ch; }
.mk-promo-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

@media (max-width: 620px) {
  .mk-promo { flex-wrap: wrap; }
  .mk-promo-actions { margin-left: 0; width: 100%; }
}

/* Home-hero placement for the guest CTA (#4254) — sits below the hero actions,
 * on the marketplace visitor path it uses .wc-browse-wrap instead. Constrained
 * so the ad reads as a deliberate hero element rather than stretching the full
 * container width. */
.hm-promo-slot { margin-top: 28px; max-width: 720px; }

/* ===================================================================
 * Review-for-coupon note (#3953 follow-up)
 * -------------------------------------------------------------------
 * Rendered by components/review_reward_note.html inside both review
 * panels. It lives here rather than in pp-detail.css or
 * sx-listing-v4.css because those two panels load different
 * stylesheets, and a component rendered by both cannot have its rules
 * in only one of them — the class would be present, correct and
 * unstyled on whichever page missed out (the .ig-open split in
 * CLAUDE.md). promotions.css is in _SHELL_CORE, so every page has it.
 *
 * Colours are mixed from --sx-brand-text, which base.html declares in
 * both its light and dark blocks, so the note re-resolves per theme
 * without a dark rule of its own.
 * =================================================================== */
.rvr-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin: 0 0 16px;
  border: 1px solid color-mix(in srgb, var(--sx-brand-text) 26%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--sx-brand-text) 7%, transparent);
}

.rvr-note.is-earned {
  border-color: color-mix(in srgb, var(--sx-ok) 34%, transparent);
  background: color-mix(in srgb, var(--sx-ok) 9%, transparent);
}

.rvr-ico {
  flex: 0 0 auto;
  display: inline-flex;
  margin-top: 1px;
  color: var(--sx-brand-text);
}

.rvr-note.is-earned .rvr-ico { color: var(--sx-ok); }

.rvr-copy {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--sx-text-2);
}

.rvr-copy b { color: var(--sx-text); font-weight: 700; }

/* The panels sit on pages with and without the .sx scope, whose reset
 * strips `a` colour — state it here rather than inherit. */
.rvr-copy a {
  color: var(--sx-brand-text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.rvr-copy a:hover { text-decoration: none; }