@charset "UTF-8";

/* ==========================================================================
   1. Figure Markets — Design System Tokens & Resets
   ========================================================================== */
:root {
  --fm-royal: #5C57EF;
  --fm-royal-hover: #4A45D6;
  --fm-royal-soft: #EEEDFD;
  --fm-ink: #222631;
  --fm-body: #4A4F5C;
  --fm-muted: #6E7480;
  --fm-line: #E3E5EA;
  --fm-surface: #F7F8FA;
  --fm-white: #FFFFFF;
  --fm-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fm-radius-sm: 6px;
  --fm-radius: 10px;
  --fm-radius-lg: 16px;
  --fm-shadow-1: 0 2px 8px rgba(34, 38, 49, 0.06);
  --fm-shadow-2: 0 8px 24px rgba(34, 38, 49, 0.12);
}

[data-theme="dark"] {
  --fm-ink: #F5F6F8;
  --fm-body: #C3C7D0;
  --fm-muted: #8A909C;
  --fm-line: #2C3140;
  --fm-surface: #1A1E27;
  --fm-white: #12151C;
  --fm-royal-soft: rgba(92, 87, 239, 0.2);
}

*, *::before, *::after {
  box-sizing: border-box;
}

body, html, input, button, select, textarea {
  font-family: var(--fm-font) !important;
}

body {
  margin: 0;
  padding: 0;
  background: var(--fm-white) !important;
  color: var(--fm-body) !important;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fm-font) !important;
  color: var(--fm-ink);
  font-weight: 700;
  margin: 0 0 12px 0;
}

a {
  color: var(--fm-royal);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.visibility-hidden,
.skip-navigation {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ==========================================================================
   2. Header & Logo Constraints
   ========================================================================== */
.header {
  height: 72px;
  padding: 0 32px;
  background: var(--fm-white);
  border-bottom: 1px solid var(--fm-line);
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header .logo, 
.header .logo a {
  display: flex !important;
  align-items: center !important;
  height: 32px !important;
}

.header .logo-svg {
  height: 32px !important;
  max-height: 32px !important;
  width: auto !important;
  max-width: 260px !important;
  display: block !important;
}

.nav-wrapper-desktop,
.user-nav {
  display: flex !important;
  align-items: center !important;
}

.user-nav-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

.user-nav-list li {
  display: inline-flex !important;
  align-items: center !important;
}

.user-nav-list a {
  color: var(--fm-ink);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: var(--fm-radius-sm);
}

.user-nav-list a:hover {
  background: var(--fm-surface);
  text-decoration: none;
}

.user-nav .sign-in,
.user-nav a[href*="signin"] {
  background: var(--fm-royal) !important;
  color: #ffffff !important;
  padding: 8px 18px !important;
  border-radius: 999px !important;
  font-weight: 500 !important;
}

.theme-toggle-btn {
  background: transparent;
  border: 1px solid var(--fm-line);
  cursor: pointer;
  font-size: 1rem;
  padding: 6px 12px;
  border-radius: var(--fm-radius-sm);
  color: var(--fm-ink);
  display: inline-flex;
  align-items: center;
}

/* ==========================================================================
   3. Hero Section & Fast-Pass Pills
   ========================================================================== */
.hero {
  background: #222631 !important;
  padding: 56px 24px 44px !important;
  text-align: center !important;
  color: #ffffff !important;
}

.hero h1 {
  font-size: 34px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin-bottom: 24px !important;
}

.search-box,
form[role="search"],
.search {
  max-width: 600px;
  margin: 0 auto 24px;
  position: relative !important;
}

.search input[type="search"] {
  width: 100% !important;
  height: 52px !important;
  padding: 0 45px 0 48px !important;
  border-radius: var(--fm-radius) !important;
  border: 1px solid transparent !important;
  font-size: 16px !important;
  background: #ffffff !important;
  color: #222631 !important;
  box-shadow: var(--fm-shadow-2) !important;
}

.search-icon {
  position: absolute;
  left: 16px;
  top: 18px;
  z-index: 2;
  color: #8A909C;
  pointer-events: none;
}

.search .clear-button,
form[role="search"] .clear-button {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: none !important;
  padding: 4px !important;
  margin: 0 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 5 !important;
  color: #6E7480 !important;
}

.search .clear-button svg {
  fill: currentColor !important;
  width: 12px !important;
  height: 12px !important;
}

.fast-pass {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.fast-pass-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}

.fast-pass-pill {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff !important;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-decoration: none !important;
}

.fast-pass-pill:hover {
  background: var(--fm-royal);
}

/* ==========================================================================
   4. Pillar Cards Grid (Homepage)
   ========================================================================== */
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin: 48px 0;
}

.pillar-card {
  background: var(--fm-white);
  border: 1px solid var(--fm-line);
  border-radius: var(--fm-radius-lg);
  padding: 24px;
  box-shadow: var(--fm-shadow-1);
  display: flex;
  flex-direction: column;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.pillar-card:hover {
  transform: translateY(-3px);
  border-color: var(--fm-royal);
  box-shadow: var(--fm-shadow-2);
}

.pillar-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--fm-ink) !important;
  margin-bottom: 8px !important;
}

.pillar-desc {
  font-size: 13px;
  color: var(--fm-muted);
  margin-bottom: 20px;
  line-height: 1.45;
}

.article-links {
  list-style: none !important;
  margin: 0 0 20px 0 !important;
  padding: 0 !important;
  flex-grow: 1;
}

.article-links li {
  margin-bottom: 10px;
  font-size: 13.5px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.4;
}

.article-links li::before {
  content: "•";
  color: var(--fm-royal);
  font-weight: bold;
  font-size: 16px;
  line-height: 1;
}

.article-links a {
  color: var(--fm-body);
  font-weight: 500;
  text-decoration: none;
}

.article-links a:hover {
  color: var(--fm-royal);
  text-decoration: underline;
}

.pillar-footer {
  font-size: 13px;
  font-weight: 600;
  color: var(--fm-royal);
  border-top: 1px solid var(--fm-line);
  padding-top: 14px;
  display: flex;
  justify-content: flex-end;
}

.pillar-footer a {
  color: var(--fm-royal);
  text-decoration: none;
}

.pillar-footer a:hover {
  text-decoration: underline;
}

/* Suppress Zendesk Watermarks */
footer, .footer, .powered-by-zendesk {
  display: none !important;
}

/* ==========================================================================
   5. Category & Section Pages Layout
   ========================================================================== */
.category-page,
.section-page {
  padding-top: 32px;
  padding-bottom: 64px;
}

.page-header {
  border-bottom: 1px solid var(--fm-line);
  padding-bottom: 24px;
  margin-bottom: 32px;
}

.page-header h1 {
  font-size: 32px !important;
  font-weight: 700 !important;
  color: var(--fm-ink) !important;
  margin-bottom: 8px !important;
}

.page-description {
  font-size: 16px;
  color: var(--fm-muted);
  margin: 0;
}

.article-page-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 32px 0 !important;
  border: 1px solid var(--fm-line);
  border-radius: var(--fm-radius);
  background: var(--fm-white);
  overflow: hidden;
}

.article-page-item {
  border-bottom: 1px solid var(--fm-line);
}

.article-page-item:last-child {
  border-bottom: none;
}

.article-page-link {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 16px 20px;
  color: var(--fm-ink);
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.article-page-link:hover {
  background: var(--fm-royal-soft);
  color: var(--fm-royal);
}

.link-arrow {
  color: var(--fm-royal);
  font-weight: 600;
}

.empty-state {
  color: var(--fm-muted);
  font-size: 15px;
  padding: 32px 0;
}

/* ==========================================================================
   6. Search Results Page Layout
   ========================================================================== */
.search-results-page {
  padding-top: 32px;
  padding-bottom: 64px;
}

.search-results-subheading {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--fm-ink) !important;
  margin-bottom: 24px !important;
}

.search-result-card {
  display: block;
  padding: 18px 20px;
  text-decoration: none;
  transition: background 0.15s;
}

.search-result-card:hover {
  background: var(--fm-royal-soft);
}

.search-result-title {
  font-size: 16.5px;
  font-weight: 600;
  color: var(--fm-royal);
  margin-bottom: 6px;
}

.search-result-snippet {
  font-size: 14px;
  color: var(--fm-body);
  line-height: 1.5;
  margin: 0;
}

/* Suppress Copenhagen Sidebar Toggles & Breadcrumbs Globally */
.search-results-sidebar,
.collapsible-sidebar-toggle,
.sub-nav,
.breadcrumbs {
  display: none !important;
}

/* ==========================================================================
   7. Article Page Layout & Natural Block Typography Flow
   ========================================================================== */
.article-page {
  padding-top: 40px;
  padding-bottom: 64px;
}

.article-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 48px;
  align-items: start;
}

@media (max-width: 900px) {
  .article-grid {
    grid-template-columns: 1fr;
  }
}

.article-main {
  display: flex;
  flex-direction: column;
}

.article-header {
  border-bottom: 1px solid var(--fm-line);
  padding-bottom: 20px;
  margin-bottom: 24px;
}

.article-title {
  font-size: 32px !important;
  font-weight: 700 !important;
  color: var(--fm-ink) !important;
  line-height: 1.25 !important;
  margin-bottom: 12px !important;
}

.article-author {
  font-size: 13px;
  color: var(--fm-muted);
}

/* Standard HTML Block Formatting — Restores Normal Margin Collapsing */
.article-body {
  display: block !important;
  font-size: 16px;
  line-height: 1.65;
  color: var(--fm-body);
}

.article-body p {
  margin-top: 0;
  margin-bottom: 16px !important;
}

/* Automatically hide completely empty editor lines */
.article-body p:empty,
.article-body div:empty,
.article-body p:has(> br:only-child) {
  display: none !important;
}

/* List Formatting */
.article-body ul,
.article-body ol {
  margin: 12px 0 20px 0 !important;
  padding-left: 24px !important;
}

.article-body li {
  margin-bottom: 8px !important;
  line-height: 1.6 !important;
}

.article-body ul ul,
.article-body ol ul {
  list-style-type: disc !important;
  margin: 6px 0 8px 0 !important;
  padding-left: 20px !important;
}

/* Mobile Screenshot Auto-Sizing */
.article-body img {
  display: block !important;
  max-width: 300px !important;
  height: auto !important;
  margin: 20px auto !important;
  border: 1px solid var(--fm-line) !important;
  border-radius: var(--fm-radius) !important;
  box-shadow: var(--fm-shadow-1) !important;
}

/* Content Tags (#CBL, #FAQ) */
.content-tags {
  margin-top: 24px;
  margin-bottom: 16px;
}

.content-tag-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.content-tag-item a {
  display: inline-block;
  background: var(--fm-surface);
  border: 1px solid var(--fm-line);
  color: var(--fm-muted);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
  text-decoration: none;
}

.content-tag-item a:hover {
  background: var(--fm-royal-soft);
  border-color: var(--fm-royal);
  color: var(--fm-royal);
}

/* Helpful Voting Widget */
.article-votes {
  margin-top: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--fm-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.article-votes-question {
  font-size: 14px;
  font-weight: 600;
  color: var(--fm-ink);
}

.article-votes-controls {
  display: flex;
  gap: 10px;
}

.article-vote {
  background: var(--fm-surface) !important;
  border: 1px solid var(--fm-line) !important;
  color: var(--fm-ink) !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer;
  transition: all 0.15s ease;
}

.article-vote:hover,
.article-vote-selected {
  background: var(--fm-royal-soft) !important;
  border-color: var(--fm-royal) !important;
  color: var(--fm-royal) !important;
}

/* Sticky Right Sidebar */
.article-sidebar {
  position: sticky !important;
  top: 96px !important;
  align-self: start !important;
}

.sidebar-box {
  background: var(--fm-surface);
  border: 1px solid var(--fm-line);
  border-radius: var(--fm-radius-lg);
  padding: 24px;
}

.sidebar-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--fm-ink) !important;
  margin-bottom: 16px !important;
}

.sidebar-article-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 16px 0 !important;
}

.sidebar-article-item {
  margin-bottom: 6px;
}

.sidebar-article-link {
  display: block;
  font-size: 13.5px;
  color: var(--fm-body);
  text-decoration: none;
  line-height: 1.4;
  padding: 8px 12px;
  border-radius: var(--fm-radius-sm);
  transition: background 0.15s, color 0.15s;
}

.sidebar-article-link:hover {
  color: var(--fm-royal);
  background: var(--fm-white);
}

.sidebar-article-link.is-active {
  color: var(--fm-royal);
  font-weight: 600;
  background: var(--fm-royal-soft);
}

.sidebar-see-more {
  font-size: 13px;
  font-weight: 600;
  color: var(--fm-royal);
  text-decoration: none;
  display: inline-block;
}

/* ==========================================================================
   8. Legal Disclosure Cards (Styled Box at Bottom)
   ========================================================================== */
.article-body .wysiwyg-callout,
.article-body .callout,
.article-body blockquote,
.article-body [data-content-block-id],
.article-disclaimer,
.article-main > .wysiwyg-callout,
.article-main > .callout,
.article-main > [data-content-block-id],
.article-main > .article-disclaimer {
  margin-top: 32px !important;
  margin-bottom: 0 !important;
  padding: 18px 20px !important;
  background: var(--fm-surface) !important;
  border: 1px solid var(--fm-line) !important;
  border-left: 4px solid var(--fm-royal) !important;
  border-radius: var(--fm-radius) !important;
}

/* Strip default Zendesk info icon */
.article-body .wysiwyg-callout-icon,
.article-body .wysiwyg-callout::before,
.article-body .callout::before,
.article-main > .wysiwyg-callout-icon,
.article-main > .wysiwyg-callout::before {
  display: none !important;
  content: none !important;
}

.article-body .wysiwyg-callout p,
.article-body .callout p,
.article-body blockquote p,
.article-body [data-content-block-id] p,
.article-disclaimer p,
.article-main > .wysiwyg-callout p,
.article-main > .callout p,
.article-main > [data-content-block-id] p,
.article-main > .article-disclaimer p {
  font-size: 12px !important;
  line-height: 1.55 !important;
  color: var(--fm-muted) !important;
  margin-bottom: 10px !important;
}

.article-body .wysiwyg-callout p:last-child,
.article-body .callout p:last-child,
.article-body blockquote p:last-child,
.article-body [data-content-block-id] p:last-child,
.article-disclaimer p:last-child,
.article-main > .wysiwyg-callout p:last-child,
.article-main > .callout p:last-child,
.article-main > [data-content-block-id] p:last-child,
.article-main > .article-disclaimer p:last-child {
  margin-bottom: 0 !important;
}

.article-body .wysiwyg-callout strong,
.article-body .callout strong,
.article-body blockquote strong,
.article-body [data-content-block-id] strong,
.article-disclaimer strong,
.article-main > .wysiwyg-callout strong,
.article-main > .callout strong,
.article-main > [data-content-block-id] strong,
.article-main > .article-disclaimer strong {
  color: var(--fm-ink) !important;
}

.article-body .wysiwyg-callout a,
.article-body .callout a,
.article-body blockquote a,
.article-body [data-content-block-id] a,
.article-disclaimer a,
.article-main > .wysiwyg-callout a,
.article-main > .callout a,
.article-main > [data-content-block-id] a,
.article-main > .article-disclaimer a {
  color: var(--fm-royal) !important;
  text-decoration: underline !important;
  word-break: break-word !important;
}

/* ==========================================================================
   9. Dark Mode Overrides
   ========================================================================== */
[data-theme="dark"] .hero {
  background: #181B24 !important;
  border-bottom: 1px solid #2C3140 !important;
}

[data-theme="dark"] .hero .search input[type="search"] {
  background: #1A1E27 !important;
  color: #ffffff !important;
  border: 1px solid #2C3140 !important;
}

[data-theme="dark"] .hero .search input[type="search"]::placeholder {
  color: #8A909C !important;
}

[data-theme="dark"] .search .clear-button {
  color: #A0A5B5 !important;
}

[data-theme="dark"] .header {
  background: #12151C !important;
  border-bottom-color: #2C3140 !important;
}

[data-theme="dark"] .header .logo-svg {
  color: #ffffff !important;
}

[data-theme="dark"] .pillar-card,
[data-theme="dark"] .sidebar-box,
[data-theme="dark"] .article-page-list {
  background: #1A1E27 !important;
  border-color: #2C3140 !important;
}

[data-theme="dark"] .pillar-title,
[data-theme="dark"] .sidebar-title,
[data-theme="dark"] .article-title,
[data-theme="dark"] .page-header h1,
[data-theme="dark"] .search-results-subheading {
  color: #ffffff !important;
}

[data-theme="dark"] .pillar-desc {
  color: #8A909C !important;
}

[data-theme="dark"] .article-links a,
[data-theme="dark"] .sidebar-article-link,
[data-theme="dark"] .article-page-link,
[data-theme="dark"] .article-body {
  color: #C3C7D0 !important;
}

[data-theme="dark"] .sidebar-article-link:hover,
[data-theme="dark"] .article-page-link:hover {
  background: rgba(92, 87, 239, 0.2) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .sidebar-article-link.is-active {
  background: rgba(92, 87, 239, 0.2) !important;
  color: #5C57EF !important;
}

[data-theme="dark"] .article-body img {
  border-color: #2C3140 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .article-vote,
[data-theme="dark"] .content-tag-item a {
  background: #1A1E27 !important;
  border-color: #2C3140 !important;
  color: #8A909C !important;
}

[data-theme="dark"] .article-vote:hover,
[data-theme="dark"] .article-vote-selected,
[data-theme="dark"] .content-tag-item a:hover {
  background: rgba(92, 87, 239, 0.2) !important;
  border-color: var(--fm-royal) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .article-body .wysiwyg-callout,
[data-theme="dark"] .article-body .callout,
[data-theme="dark"] .article-body blockquote,
[data-theme="dark"] .article-body [data-content-block-id],
[data-theme="dark"] .article-disclaimer,
[data-theme="dark"] .article-main > .wysiwyg-callout,
[data-theme="dark"] .article-main > .callout,
[data-theme="dark"] .article-main > [data-content-block-id],
[data-theme="dark"] .article-main > .article-disclaimer {
  background: #1A1E27 !important;
  border-color: #2C3140 !important;
  border-left-color: var(--fm-royal) !important;
}

[data-theme="dark"] .article-body .wysiwyg-callout p,
[data-theme="dark"] .article-body .callout p,
[data-theme="dark"] .article-body blockquote p,
[data-theme="dark"] .article-body [data-content-block-id] p,
[data-theme="dark"] .article-disclaimer p,
[data-theme="dark"] .article-main > .wysiwyg-callout p,
[data-theme="dark"] .article-main > .callout p,
[data-theme="dark"] .article-main > [data-content-block-id] p,
[data-theme="dark"] .article-main > .article-disclaimer p {
  color: #8A909C !important;
}

[data-theme="dark"] .article-body .wysiwyg-callout strong,
[data-theme="dark"] .article-body .callout strong,
[data-theme="dark"] .article-body blockquote strong,
[data-theme="dark"] .article-body [data-content-block-id] strong,
[data-theme="dark"] .article-disclaimer strong,
[data-theme="dark"] .article-main > .wysiwyg-callout strong,
[data-theme="dark"] .article-main > .callout strong,
[data-theme="dark"] .article-main > [data-content-block-id] strong,
[data-theme="dark"] .article-main > .article-disclaimer strong {
  color: #ffffff !important;
}