/* Piperperps: fonts, palette and the template parts that go. Loaded after the template's stylesheet. */
@font-face { font-family: "Instrument Sans"; src: url(/hl/fonts/InstrumentSans-400-700.woff2) format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url(/hl/fonts/DMMono-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url(/hl/fonts/DMMono-500.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root, html.__variable_49e314 {
  --hl-bg: #04140f;
  --hl-ink: #e8fff7;
  --hl-teal: #3fe9bf;
  --hl-mint: #9ff5dc;
  --hl-mint-soft: #0e2a23;
  --hl-teal-10: rgba(63, 233, 191, .12);
  --hl-line: rgba(159, 245, 220, .14);
  --font-primary: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-secondary: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
body { background: var(--hl-bg); color: var(--hl-ink); font-family: var(--font-primary); }
.h1, h1 { font-weight: 600; letter-spacing: -.035em; }
.h1--large { font-weight: 600; letter-spacing: -.045em; }
.h2, h2 { font-weight: 500; }
.h3, h3 { font-weight: 500; }
u { text-decoration-color: var(--hl-teal); text-decoration-thickness: .06em; text-underline-offset: .12em; }

/* palette: the template's greys and blues become off-white, ink, teal and mint */
.bg-white, .bg-gray-300 { background-color: var(--hl-bg) !important; }
.bg-gray-200 { background-color: var(--hl-mint) !important; }
.bg-\[\#AABDD5\], .bg-\[\#C5CDC9\] { background-color: var(--hl-mint) !important; }
.text-black, .text-gray-900 { color: var(--hl-ink); }
.text-gray { color: #9fb7af; }
.text-\[\#A4A4A4\] { color: #8aa69d; }
.bg-gray-800\/10, .bg-gray-900\/10 { background-color: var(--hl-teal-10); }
.border-white\/10 { border-color: rgba(15, 110, 92, .16); }
.border-gray-800 { border-color: var(--hl-teal); }
.border-black\/20 { border-color: var(--hl-line); }
.hover\:bg-gray-800:hover { background-color: var(--hl-teal) !important; }
.hover\:text-white:hover { color: var(--hl-bg) !important; }
.site-section.text-white { color: var(--hl-ink); }
.header[data-theme=light], .header[data-theme=dark] { color: var(--hl-ink); }
.styles_transitionOverlay__mCGud:before { background: var(--hl-teal); }

/* buttons */
.btn--primary .btn__icon, .btn--primary .btn__text { background-color: var(--hl-teal); color: var(--hl-bg); }
.btn--primary .btn__icon:before, .btn--primary .btn__text:before { background-color: var(--hl-teal); }
.btn--secondary .btn__icon, .btn--secondary .btn__text { background-color: var(--hl-teal-10); color: var(--hl-ink); }
.btn--secondary .btn__icon:before, .btn--secondary .btn__text:before { background-color: var(--hl-teal-10); }
.btn--outline .btn__icon, .btn--outline .btn__text { box-shadow: inset 0 0 0 1px var(--hl-ink); color: var(--hl-ink); }
.btn--outline .btn__icon:before, .btn--outline .btn__text:before { background-color: var(--hl-mint); box-shadow: inset 0 1px 0 0 var(--hl-ink), inset 0 -1px 0 0 var(--hl-ink); }
.btn--light .btn__icon, .btn--light .btn__text { background-color: var(--hl-bg); color: var(--hl-teal); }
.btn--light .btn__icon:before, .btn--light .btn__text:before { background-color: var(--hl-bg); }
.title-counter { font-family: var(--font-mono); border-color: var(--hl-teal); }
.title-counter.bg-gray-800 { background-color: var(--hl-teal) !important; color: var(--hl-bg) !important; }

/* numbers and labels in mono */
.text--dot, .title-counter, .text-sm.block, .uppercase.truncate, .uppercase.opacity-30, .text--dot + *, .hl-mono { font-family: var(--font-mono); letter-spacing: 0; }
.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; }

/* the template's marks: the wordmark svg everywhere, the three 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: 16.2rem; height: 1.8rem; background: url(/hl/wordmark.png) left center / contain no-repeat; }
.z-\[1000\] .overflow-clip.w-full.mb-10 .flex.justify-center::before { content: ""; display: block; width: 7rem; height: 7rem; background: url(/hl/mark.png) center / contain no-repeat; }
.styles_transitionOverlay__mCGud .w-100 { height: 10rem; background: url(/hl/mark.png) center / contain no-repeat; }
footer .sticky.bottom-0 { width: 100%; aspect-ratio: 2400 / 420; background: url(/hl/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(/hl/mark.png) center / contain no-repeat; }
.styles_smallImage__q5o5v + .relative { height: 30%; width: 40%; background: url(/hl/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 .hl-empty { display: none !important; }
footer.bg-gray-900, footer .bg-gray-900 { background-color: #082620 !important; }
footer.bg-gray-900, footer.bg-gray-900 .text-gray-100 { color: var(--hl-ink); }
footer .link { color: var(--hl-bg); }
footer.bg-gray-900 .border-gray-1100 { border-color: rgba(14, 42, 34, .22); }
footer .opacity-30 { opacity: .62; }
.hl-pill { font-family: var(--font-mono); font-size: 1.3rem; }

/* the hero row under Launch app: the CA (click copies) and the X button, the template's secondary button */
.hl-links { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .8rem; }
.hl-links .btn { height: 4rem; max-width: 100%; }
.hl-links .btn__icon { width: 4rem; }
/* the secondary tint made opaque (teal 9% over the page), so the hero's spheres never show through */
.hl-links .btn--secondary .btn__icon, .hl-links .btn--secondary .btn__text, .hl-links .btn--secondary .btn__text:before { background-color: #102a22; backdrop-filter: none; }
.hl-links .btn__icon svg { width: 1.6rem; height: 1.6rem; }
.hl-ca .btn__text { gap: 1rem; white-space: nowrap; min-width: 0; }
.hl-ca__k { font-family: var(--font-mono); font-size: 1.2rem; text-transform: uppercase; letter-spacing: .04em; color: var(--hl-teal); }
.hl-ca__v { font-family: var(--font-mono); font-size: 1.35rem; overflow: hidden; text-overflow: ellipsis; }
.hl-ca__short { display: none; }
.hl-ca.is-copied .btn__icon, .hl-ca.is-copied .btn__text { background-color: var(--hl-teal); color: var(--hl-bg); }
.hl-ca.is-copied .hl-ca__k { color: var(--hl-bg); }
@media (max-width: 1279px) { .hl-ca__full { display: none; } .hl-ca__short { display: inline; } }

/* LAUNCH SOON: the hero CA slot before a contract is set via /admin */
.hl-ca-slot { display: inline-flex; max-width: 100%; }
.hl-soon { display: inline-flex; align-items: center; gap: .9rem; height: 4rem; padding: 0 1.9rem; border-radius: .8rem;
  background: var(--hl-teal); color: var(--hl-bg); font-family: var(--font-mono); font-weight: 600;
  font-size: 1.5rem; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(63, 233, 191, .5), 0 0 26px rgba(63, 233, 191, .4); }
.hl-soon__dot { width: .8rem; height: .8rem; border-radius: 50%; background: var(--hl-bg); animation: hlSoonPulse 1.4s ease-in-out infinite; }
@keyframes hlSoonPulse { 0%, 100% { opacity: .25; transform: scale(.75); } 50% { opacity: .9; transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .hl-soon__dot { animation: none; } }

/* the hero: the template's video is gone, a drawn canvas sits in its frame */
[data-component="HomeIntroSection"] video { display: none !important; }
canvas.hl-hero { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
[data-component="HomeIntroSection"] .h3 { max-width: 44rem; }

/* markets cards (the template's job cards) on the mint section */
#careers ~ .container .bg-white { background-color: var(--hl-bg) !important; }
#careers ~ .container .notes-list p { font-family: var(--font-mono); font-size: 1.4rem; }
#careers ~ .container .bg-gray-900\/10 { background-color: var(--hl-mint-soft); }

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