/* Sectors: fonts, the dark navy palette and the template parts that go. Loaded after the template's stylesheet. */
@font-face { font-family: "Archivo"; src: url(/sx/fonts/Archivo-var.woff2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(/sx/fonts/JetBrainsMono-var.woff2) format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }

:root, html.__variable_49e314 {
  --sx-bg: #0a1122;
  --sx-bg2: #0f1830;
  --sx-bg3: #16223f;
  --sx-bg4: #1d2b4d;
  --sx-ink: #e6ecf7;
  --sx-mute: #a3b0c9;
  --sx-dim: #7d8aa6;
  --sx-line: rgba(160, 180, 225, .16);
  --sx-line2: rgba(160, 180, 225, .28);
  --sx-up: #2fd27a;
  --sx-up-ink: #062014;
  --sx-down: #f0484e;
  --sx-led-off: #121c34;
  --font-primary: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-secondary: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: dark;
}
html, body { background: var(--sx-bg); }
body { color: var(--sx-ink); font-family: var(--font-primary); }
.h1, h1 { font-weight: 700; letter-spacing: -.03em; font-stretch: 112%; }
.h1--large { font-weight: 800; letter-spacing: -.035em; font-stretch: 118%; }
.h2, h2 { font-weight: 600; font-stretch: 106%; }
.h3, h3 { font-weight: 500; }
u { text-decoration-color: var(--sx-up); text-decoration-thickness: .07em; text-underline-offset: .12em; }
::selection { background: var(--sx-up); color: var(--sx-up-ink); }

/* palette: the template's light greys and blues become navy */
.bg-white, .bg-gray-300, .bg-gray-100 { background-color: var(--sx-bg) !important; }
.bg-gray-200 { background-color: var(--sx-bg2) !important; }
.bg-\[\#AABDD5\], .bg-\[\#C5CDC9\] { background-color: var(--sx-bg2) !important; }
.text-black, .text-gray-900 { color: var(--sx-ink); }
.text-gray { color: var(--sx-mute); }
.text-\[\#A4A4A4\] { color: var(--sx-dim); }
.bg-gray-800\/10, .bg-gray-900\/10 { background-color: var(--sx-bg3); }
.border-white\/10 { border-color: var(--sx-line); }
.border-gray-800 { border-color: var(--sx-up); }
.border-black\/20, .border-black\/10, .border-black { border-color: var(--sx-line) !important; }
.bg-black\/20, .bg-black\/10 { background-color: var(--sx-line) !important; }
.hover\:bg-gray-800:hover { background-color: var(--sx-up) !important; }
.hover\:text-white:hover { color: var(--sx-up-ink) !important; }
.site-section.text-white { color: var(--sx-ink); }
.header[data-theme=light], .header[data-theme=dark] { color: var(--sx-ink); }
.header { background-color: transparent; }
.header .bl, .bl { background-color: var(--sx-line) !important; }
.styles_transitionOverlay__mCGud:before { background: var(--sx-bg2); }
.opacity-20 { opacity: .38; }

/* buttons */
.btn--primary .btn__icon, .btn--primary .btn__text { background-color: var(--sx-up); color: var(--sx-up-ink); }
.btn--primary .btn__icon:before, .btn--primary .btn__text:before { background-color: #5ae397; }
.btn--secondary .btn__icon, .btn--secondary .btn__text { background-color: var(--sx-bg3); color: var(--sx-ink); }
.btn--secondary .btn__icon:before, .btn--secondary .btn__text:before { background-color: var(--sx-bg4); }
.btn--outline .btn__icon, .btn--outline .btn__text { box-shadow: inset 0 0 0 1px var(--sx-line2); color: var(--sx-ink); }
.btn--outline .btn__icon:before, .btn--outline .btn__text:before { background-color: var(--sx-bg3); box-shadow: none; }
.btn--light .btn__icon, .btn--light .btn__text { background-color: var(--sx-ink); color: var(--sx-bg); }
.btn--light .btn__icon:before, .btn--light .btn__text:before { background-color: #fff; }
.btn__text { font-weight: 600; }
.title-counter { font-family: var(--font-mono); border-color: var(--sx-line2); color: var(--sx-ink); }
.title-counter.bg-gray-800 { background-color: var(--sx-up) !important; color: var(--sx-up-ink) !important; border-color: var(--sx-up); }

/* numbers and labels in mono */
.text--dot, .title-counter, .text-sm.block, .uppercase.truncate, .uppercase.opacity-30, .sx-mono { font-family: var(--font-mono); letter-spacing: 0; }
.text--dot::before { background-color: var(--sx-up) !important; border-radius: 0 !important; }
.md\:grid-cols-6 > .hidden.md\:block .h1, .lg\:col-span-1 .h1, .lg\:col-span-1 > div > p, .justify-self-end p, .justify-self-end > div, .styles_wrapper__e5z0j.h1,
.z-\[1000\] .h-\[44\%\] div, .w-32.justify-center p, .lg\:col-span-2 > div.mb-0 { font-family: var(--font-mono); font-weight: 400; }
.z-\[1000\] .h-\[44\%\] div { font-size: 1.4rem; }
.z-\[1000\] { background-color: var(--sx-bg) !important; }

/* the template's marks: its wordmark svg everywhere, the preloader glyphs */
svg[viewBox="0 0 1399 260"], svg[viewBox="0 0 97 30"], svg[viewBox="0 0 565 680"], svg[viewBox="0 0 41 24"] { display: none !important; }
.header-logo .btn__text::before { content: ""; display: block; width: 13.2rem; height: 2rem; background: url(/sx/wordmark.png) left center / contain no-repeat; }
.header-logo .btn__text { background-color: var(--sx-bg3); }
.z-\[1000\] .overflow-clip.w-full.mb-10 .flex.justify-center::before { content: ""; display: block; width: 7rem; height: 7rem; background: url(/sx/mark.png) center / contain no-repeat; }
.styles_transitionOverlay__mCGud .w-100 { height: 10rem; background: url(/sx/mark.png) center / contain no-repeat; }
footer .sticky.bottom-0 { width: 100%; aspect-ratio: 2400 / 420; background: url(/sx/wordmark-footer.png) center bottom / contain no-repeat; }
#about-us ~ .container .justify-center > .flex.items-center::before { content: ""; display: block; width: 1.6rem; height: 1.6rem; background: url(/sx/mark.png) center / contain no-repeat; }
.styles_smallImage__q5o5v + .relative { height: 30%; width: 40%; background: url(/sx/mark.png) center / contain no-repeat; }

/* parts of the template that do not ship: its contact form, newsletter, policy links */
section:has(> #contact-us) { display: none !important; }
footer form[name="Newsletter Form"] { display: none !important; }
footer form[name="Newsletter Form"] + div, footer .col-span-4 > .relative > div > p.uppercase { display: none !important; }
footer li:has(> a[href="/privacy-policy"]), footer li:has(> a[href="/terms-of-use"]), footer li:has(> a[href="/fcoi-policy"]) { display: none !important; }
footer .sx-empty { display: none !important; }
footer.bg-gray-900, footer .bg-gray-900 { background-color: #070c19 !important; }
footer.bg-gray-900, footer.bg-gray-900 .text-gray-100 { color: var(--sx-ink); }
footer .link { color: var(--sx-ink); }
footer.bg-gray-900 .border-gray-1100 { border-color: var(--sx-line); }
footer .opacity-30 { opacity: .62; }
.sx-pill { font-family: var(--font-mono); font-size: 1.3rem; }

/* the hero row under the main button: the CA (click copies) and the X button */
.sx-links { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .8rem; width: 0; min-width: 100%; } /* fills the column without widening it (the Scroll chip beside it keeps its size) */
.sx-links .btn { height: 4rem; max-width: 100%; }
.sx-links .btn__icon { width: 4rem; }
.sx-links .btn__icon svg { width: 1.6rem; height: 1.6rem; }
.sx-ca .btn__text { gap: 1rem; white-space: nowrap; min-width: 0; }
.sx-ca__k { font-family: var(--font-mono); font-size: 1.2rem; text-transform: uppercase; color: var(--sx-up); }
.sx-ca__v { font-family: var(--font-mono); font-size: 1.35rem; overflow: hidden; text-overflow: ellipsis; }
.sx-ca__short { display: none; }
.sx-ca.is-copied .btn__icon, .sx-ca.is-copied .btn__text { background-color: var(--sx-up); color: var(--sx-up-ink); }
.sx-ca.is-copied .sx-ca__k { color: var(--sx-up-ink); }
@media (max-width: 1279px) { .sx-ca__full { display: none; } .sx-ca__short { display: inline; } }

/* the hero: the template's video is gone, the live heatmap sits in its frame */
[data-component="HomeIntroSection"] video { display: none !important; }
[data-component="HomeIntroSection"] { background: var(--sx-bg); }
canvas.sx-hero { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
[data-component="HomeIntroSection"] .h3 { max-width: 46rem; }
/* text over the live tiles: a solid navy plate behind each block, no blur */
[data-component="HomeIntroSection"] h1, [data-component="HomeIntroSection"] .h1 { text-shadow: none; }
.sx-plate { background: var(--sx-bg); box-shadow: 0 0 0 1.2rem var(--sx-bg); }

/* the stock sector cards (the template's job cards) */
#careers ~ .container .bg-white { background-color: var(--sx-bg2) !important; }
#careers ~ .container .notes-list p { font-family: var(--font-mono); font-size: 1.4rem; }
#careers ~ .container .bg-gray-900\/10 { background-color: var(--sx-bg3); }
.sx-card-move { font-family: var(--font-mono); }
.sx-up { color: var(--sx-up); }
.sx-down { color: var(--sx-down); }

/* number cards: one line each */
.overflow-clip.-mx-20 .text-sm.block { white-space: nowrap; color: var(--sx-ink); }

/* FAQ page */
.wysiwyg h2 { color: var(--sx-ink); }
.wysiwyg p { color: var(--sx-mute); }
input, textarea, select { color: var(--sx-ink); }

/* the live map in the hero */
.sx-hero-map { position: absolute; left: 2rem; right: 2rem; bottom: 2rem; top: 40%; display: flex; flex-direction: column; gap: .6rem; pointer-events: auto; }
.sx-hero-led { background: #060b17; border: 1px solid var(--sx-line); padding: .4rem 0; }
.sx-hero-led canvas { display: block; width: 100%; height: 3.4rem; }
canvas.sx-hero { position: relative; flex: 1; min-height: 0; width: 100%; height: auto; border: 1px solid var(--sx-line); }
.sx-hero-key { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; align-items: center; font-family: var(--font-mono); font-size: 1.2rem; color: var(--sx-mute); }
.sx-hero-scale { display: inline-flex; }
.sx-hero-scale i { display: block; width: 2.2rem; height: .9rem; }
@media (max-width: 767px) { .sx-hero-map { left: 1.6rem; right: 1.6rem; bottom: 1.6rem; } }

/* toasts (every page) */
.sx-toasts { position: fixed; right: 1.6rem; bottom: 1.6rem; z-index: 9999; display: grid; gap: .8rem; max-width: min(42rem, calc(100vw - 3.2rem)); }
.sx-toast { display: flex; gap: 1rem; align-items: flex-start; background: var(--sx-bg3); border: 1px solid var(--sx-line2); color: var(--sx-ink); padding: 1.2rem 1.4rem; font-size: 1.4rem; line-height: 1.35; transform: translateY(8px); opacity: 0; transition: transform .25s, opacity .25s; }
.sx-toast.in { transform: none; opacity: 1; }
.sx-toast b { font-family: var(--font-mono); font-size: 1.2rem; color: var(--sx-mute); padding-top: .15rem; }
.sx-toast.ok b { color: var(--sx-up); } .sx-toast.bad b { color: var(--sx-down); }

/* the stock sector cards: navy panels on the page, the hover drawer the same */
.rounded-\[1rem\].bg-white { background-color: var(--sx-bg2) !important; border: 1px solid var(--sx-line); }
@media (min-width: 1024px) { .laptop\:bg-white { background-color: var(--sx-bg2) !important; } }
.notes-list p { color: var(--sx-mute); }

/* the phone drawer: clipped away when closed, but its links still had layout; hidden until it opens, so nothing
   behind it can be mistaken for them (the hide waits for the close animation) */
.styles_menu__Hm8IV { visibility: hidden; transition: clip-path .5s cubic-bezier(.77,0,.18,1), visibility 0s linear .5s; }
.styles_menu__Hm8IV.styles_menuActive__ZAXXO { visibility: visible; transition: clip-path .5s cubic-bezier(.77,0,.18,1), visibility 0s; }

/* the stock sector cards: the whole card is the link (the template's overlay anchor sat under the card's text and
   its "Open" button, so presses there did nothing); the overlay goes on top */
.rounded-\[1rem\].group a.absolute.inset-0 { z-index: 5; }
.rounded-\[1rem\].group { cursor: pointer; }

/* the template's preloader stays in the page after it finishes (fixed, z 1000, pointer events forced on) and sat
   invisibly over the stock cards: once the page is loaded it no longer takes presses */
html.is-loaded .fixed.z-\[1000\] { pointer-events: none !important; visibility: hidden; }