/*
 * Select Prop Firms UI kit tokens (design system: Select Prop Firms UI Kit).
 * The Neue Montreal faces come from fonts.css. The display face is the Bold file the
 * legacy headings use, declared at weight 400 so a 700 setting thickens it the same way.
 */

@font-face { font-family: "Neue Montreal Display"; src: url("../fonts/neue-montreal-bold.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --page: #ffffff;
  --ink: #333333;
  --ink-2: #444444;
  --ink-3: #555555;
  --ink-4: #666666;
  --ink-muted: #999999;
  --ink-toggle: #4c4c4c;
  --black: #000000;
  --white: #ffffff;
  --surface-soft: #f5f5f5;
  --surface-card: #f4f4f4;
  --surface-widget: #f2f2f2;
  --surface-hover: #e8e8e8;
  --chip: #ededed;
  --chip-badge: #e3e3e3;
  --chip-category: #ebebeb;
  --toggle-track: #ececec;
  --rule-soft: #f0f0f0;
  --line: #d4d6d9;
  --track: #c0c2c7;
  --grey-400: #91959d;
  --hairline: #00000015;
  --divider: #00000026;
  --divider-strong: #00000033;
  --card-edge: #00000005;
  --orange: #ff6b00;
  --orange-hover: #e65e00;
  --overlay: #00000080;
  --focus-ring: var(--orange);
  --selection: var(--orange);
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-60: 60px;
  --space-80: 80px;
  --space-100: 100px;
  --space-120: 120px;
  --radius-3: 3px;
  --radius-5: 5px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-14: 14px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-30: 30px;
  --radius-32: 32px;
  --radius-40: 40px;
  --radius-80: 80px;
  --radius-pill: 9999px;
  --radius-round: 50%;
  --shadow-shot: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
  --shadow-shot-hover: 0 12px 32px 0 rgba(0, 0, 0, 0.12);
  --shadow-lift: 0 20px 40px 0 rgba(0, 0, 0, 0.1);
  --shadow-modal: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  --page-max: 1440px;
  --container: 1280px;
  --article-column: 650px;
  --sidebar-column: 328px;
  --intro-max: 500px;
  --faq-max: 706px;
  --bp-mobile: 767px;
  --bp-tablet: 1023px;
  --font-sans: "Neue Montreal", Helvetica, Arial, sans-serif;
  --font-display: "Neue Montreal Display", "Neue Montreal", Helvetica, Arial, sans-serif;
  --font-ui: Inter, Helvetica, Arial, sans-serif;
}

.spf-t-display-xl { font-family: var(--font-display); font-size: 64px; line-height: 70.4px; font-weight: 700; letter-spacing: -1.28px; }
.spf-t-display-l { font-family: var(--font-display); font-size: 48px; line-height: 57.6px; font-weight: 700; letter-spacing: -0.96px; }
.spf-t-display-m { font-family: var(--font-display); font-size: 28px; line-height: 33.6px; font-weight: 700; letter-spacing: -0.56px; }
.spf-t-display-s { font-family: var(--font-display); font-size: 24px; line-height: 27px; font-weight: 700; letter-spacing: -0.48px; }
.spf-t-tag { font-family: var(--font-display); font-size: 12px; line-height: 13.2px; font-weight: 600; }
.spf-t-article-title { font-family: var(--font-sans); font-size: 44px; line-height: 48.4px; font-weight: 600; letter-spacing: -0.88px; }
.spf-t-article-h2 { font-family: var(--font-sans); font-size: 48px; line-height: 46.08px; font-weight: 600; letter-spacing: -0.96px; }
.spf-t-article-h3 { font-family: var(--font-sans); font-size: 30px; line-height: 33.75px; font-weight: 600; letter-spacing: -0.02px; }
.spf-t-card-title { font-family: var(--font-sans); font-size: 19px; line-height: 22.8px; font-weight: 600; }
.spf-t-standfirst { font-family: var(--font-sans); font-size: 24px; line-height: 33.6px; font-weight: 400; }
.spf-t-body-article { font-family: var(--font-sans); font-size: 16px; line-height: 22.4px; font-weight: 400; letter-spacing: -0.02px; }
.spf-t-body-xl { font-family: var(--font-sans); font-size: 20px; line-height: 28px; font-weight: 500; }
.spf-t-body-lg { font-family: var(--font-sans); font-size: 18px; line-height: 27px; font-weight: 500; }
.spf-t-body { font-family: var(--font-sans); font-size: 16px; line-height: 22.4px; font-weight: 500; }
.spf-t-body-sm { font-family: var(--font-sans); font-size: 14px; line-height: 22.4px; font-weight: 500; }
.spf-t-caption { font-family: var(--font-sans); font-size: 13px; line-height: 13px; font-weight: 400; }
.spf-t-legal { font-family: var(--font-sans); font-size: 14px; line-height: 21px; font-weight: 400; }
.spf-t-button { font-family: var(--font-sans); font-size: 16px; line-height: 20px; font-weight: 700; }
.spf-t-nav { font-family: var(--font-sans); font-size: 16px; line-height: 22.4px; font-weight: 500; }
.spf-t-table-head { font-family: var(--font-sans); font-size: 14px; line-height: 22.4px; font-weight: 600; }
.spf-t-eyebrow { font-family: var(--font-sans); font-size: 16px; line-height: 22.4px; font-weight: 400; text-transform: uppercase; }
.spf-t-label { font-family: var(--font-sans); font-size: 14px; line-height: 22.4px; font-weight: 700; }
.spf-t-toggle { font-family: var(--font-ui); font-size: 14px; line-height: 22.4px; font-weight: 500; }