/* Libre Caslon Text (SIL Open Font License), self-hosted: the CSP's font-src allows 'self'
   but not data:, so the fonts are files rather than embedded data URIs. */
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/libre-caslon-text-400.woff2) format('woff2');
}
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/libre-caslon-text-700.woff2) format('woff2');
}
/* Georgia, resized to take exactly the space Libre Caslon Text takes, for the moment before the
   web font is ready (a first visit on a slow connection). Text then changes typeface in place
   instead of reflowing and nudging everything around it. The values come from the two fonts'
   own metrics (advance widths over the site's copy, ascender, descender), measured with
   fontTools; recompute them if the web font changes. Every page also preloads the font files
   it uses, which is what keeps the swap from happening at all on a normal connection: the files
   are served with max-age=0, so without the preload each page view waits on a revalidation
   request that is only discovered after the stylesheet has been parsed. */
@font-face {
  font-family: 'Libre Caslon Fallback';
  font-style: normal;
  font-weight: 400;
  src: local('Georgia');
  size-adjust: 107.69%;
  ascent-override: 90.08%;
  descent-override: 24.14%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Libre Caslon Fallback';
  font-style: normal;
  font-weight: 700;
  src: local('Georgia Bold'), local('Georgia-Bold');
  size-adjust: 100.51%;
  ascent-override: 96.51%;
  descent-override: 25.87%;
  line-gap-override: 0%;
}
:root {
  --background: #fff;
  --foreground: #1c211e;
  --muted-foreground: #626963;
  --border: #e0e3de;
  --ring: #477c85;
  --font: 'Libre Caslon Text', 'Libre Caslon Fallback', Georgia, serif;
  --gutter: clamp(32px, 5vw, 72px);
  color-scheme: light;
  font-family: var(--font);
  font-synthesis: none;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: auto;
  scrollbar-gutter: stable;
}
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
  text-decoration: none;
  touch-action: manipulation;
}
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 6px;
  border-radius: 1px;
}
a:hover {
  color: var(--ring);
}
p,
h1 {
  margin: 0;
}
::selection {
  background: #e5ece8;
  color: var(--foreground);
}
[hidden] {
  display: none !important;
}
.page {
  width: calc(100% - var(--gutter) * 2);
  max-width: 1160px;
  margin-inline: auto;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding-top: 28px;
  text-align: left;
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 36px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 400 24px/1 var(--font);
  letter-spacing: -0.6px;
  flex-shrink: 0;
}
.brand svg {
  display: block;
  width: 21px;
  height: 21px;
  flex-shrink: 0;
}
.header nav {
  display: flex;
  gap: 28px;
  align-items: center;
  font-size: 12px;
  line-height: 1.5;
}
.header nav a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
}
.header nav a[aria-current='page'] {
  color: var(--muted-foreground);
}
.content {
  max-width: 100%;
  margin: 0;
  padding: 80px 0 96px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.content h1 {
  font: 400 clamp(32px, 3.1vw, 40px)/1.18 var(--font);
  letter-spacing: -0.035em;
  text-wrap: balance;
  max-width: 700px;
}
.contact {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-width: 118px;
  margin-top: 32px;
  padding: 5px 0 7px;
  border-bottom: 1px solid #aeb8af;
  font-size: 13px;
  line-height: 1.5;
}
.contact span {
  font-size: 18px;
  line-height: 1;
  color: var(--muted-foreground);
}
.stealth {
  max-width: 760px;
  margin: 0;
  padding: 24px 0 32px;
}
.stealth h2 {
  font-size: 12px;
  line-height: 1.5;
  font-weight: 700;
  margin: 0 0 8px;
}
.stealth p {
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted-foreground);
}
.footer {
  position: relative;
  padding: 20px 0 40px;
  display: grid;
  gap: 18px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted-foreground);
}
.footer::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: radial-gradient(circle, #aab4ac 0.8px, transparent 1px) left center/9px 2px repeat-x;
}
.backers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  column-gap: 40px;
  row-gap: 22px;
  min-width: 0;
}
.investor-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 32px;
  max-width: 100%;
  color: var(--foreground);
}
.investor-logo svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 32px;
  overflow: visible;
}
.logo-khosla {
  width: 148px;
}
.logo-coatue {
  width: 100px;
}
.logo-peak {
  width: 105px;
}
.logo-bessemer {
  width: 150px;
}
.skip {
  position: fixed;
  left: 16px;
  top: -100px;
  padding: 12px 16px;
  background: var(--foreground);
  color: var(--background);
  font-size: 14px;
  z-index: 10;
}
.skip:focus {
  top: 12px;
}
/* Use the same quiet scale on small laptops and larger desktop screens. The page is at least one
   screen tall (min-height on .page above), never exactly one: a fixed height made any content
   taller than the window, such as a long list of roles on a short laptop screen, draw over the
   footer instead of scrolling. */
@media (min-width: 900px) {
  .page {
    padding-top: 24px;
  }
  .content {
    min-height: 0;
    padding: 32px 0 40px;
  }
  .stealth {
    padding: 0 0 28px;
  }
  .footer {
    padding: 18px 0 40px;
    gap: 16px;
  }
}
@media (min-width: 900px) and (max-height: 620px) {
  .page {
    padding-top: 16px;
  }
  .header,
  .header nav a {
    min-height: 32px;
  }
  .content {
    padding: 24px 0;
  }
  .content h1 {
    font-size: 34px;
  }
  .contact {
    margin-top: 24px;
  }
  .stealth {
    padding-bottom: 20px;
  }
  .footer {
    padding: 14px 0 32px;
    gap: 12px;
  }
}
@media (max-width: 899px) {
  .backers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(520px, 100%);
    column-gap: 40px;
    row-gap: 24px;
  }
}
@media (max-width: 700px) {
  :root {
    --gutter: 24px;
  }
  .page {
    padding-top: 24px;
  }
  .header {
    gap: 20px;
  }
  .brand {
    font-size: 23px;
    gap: 8px;
  }
  .brand svg {
    width: 20px;
    height: 20px;
  }
  .header nav {
    gap: 22px;
  }
  .header nav a {
    min-height: 44px;
  }
  .content {
    padding: 72px 0 88px;
  }
  .content h1 {
    font-size: 32px;
    line-height: 1.2;
    letter-spacing: -1px;
  }
  .contact {
    min-height: 36px;
    margin-top: 32px;
  }
  .stealth {
    padding: 20px 0 32px;
  }
  .footer {
    gap: 22px;
    padding: 24px 0 36px;
  }
  .backers {
    column-gap: 32px;
    row-gap: 24px;
  }
}
@media (max-width: 360px) {
  .header nav {
    gap: 16px;
  }
  .brand {
    font-size: 22px;
    gap: 7px;
  }
  .brand svg {
    width: 19px;
    height: 19px;
  }
  .content h1 {
    font-size: 29px;
  }
  .content {
    padding: 64px 0 80px;
  }
  .backers {
    grid-template-columns: 1fr;
    row-gap: 14px;
  }
  .investor-logo {
    max-width: 160px;
  }
}

/* Compact pill actions in the site's existing neutral palette. */
.hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
  max-width: 100%;
}
.hero-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 400 13px/1.4 var(--font);
  letter-spacing: -0.2px;
  white-space: nowrap;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}
.hero-button-primary {
  gap: 18px;
  min-width: 140px;
  background: var(--foreground);
  color: var(--background);
}
.hero-button-primary svg {
  display: block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.hero-button-secondary {
  min-width: 96px;
  border-color: #aeb8af;
  background: transparent;
  color: var(--foreground);
}
.hero-button-primary:hover {
  background: var(--muted-foreground);
  color: var(--background);
}
.hero-button-secondary:hover {
  background: #f3f5f2;
  border-color: var(--muted-foreground);
  color: var(--foreground);
}
.hero-button:focus-visible {
  border-radius: 999px;
}
.hero-button:active {
  background: var(--border);
  color: var(--foreground);
}
@media (max-width: 700px) {
  .hero-actions {
    margin-top: 28px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-button {
    transition: none;
  }
}

.subpage-content {
  max-width: 100%;
  margin: 0;
  padding: 56px 0;
  flex: 1;
}
.subpage-content h1 {
  font: 400 clamp(30px, 2.8vw, 36px)/1.18 var(--font);
  letter-spacing: -0.035em;
  text-wrap: balance;
  margin: 0;
  max-width: 760px;
}
.subpage-intro {
  color: var(--muted-foreground);
  font-size: 14px;
  line-height: 1.65;
  margin: 18px 0 0;
  max-width: 620px;
}
.role-list {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  border-top: 1px solid var(--border);
}
.role-list li {
  margin: 0;
  padding: 0;
}
.role-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
  min-height: 76px;
}
.role-copy {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.role-title {
  font: 400 18px/1.35 var(--font);
  letter-spacing: -0.25px;
  text-wrap: balance;
}
.role-location {
  color: var(--muted-foreground);
  font-size: 12px;
  line-height: 1.4;
}
/* line-height: 1 because the arrow glyph comes from whichever system font has it, and that font's
   own line height would otherwise decide the row height. */
.role-arrow {
  color: var(--muted-foreground);
  font-size: 19px;
  line-height: 1;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
.role-link:hover .role-arrow {
  color: var(--ring);
  transform: translate(2px, -2px);
}
.high-bar {
  margin-top: 18px;
  width: 100%;
}
.high-bar h2 {
  font: 400 19px/1.4 var(--font);
  letter-spacing: -0.25px;
  margin: 0;
}
.bar-still,
.bar-animation {
  display: block;
  width: 100%;
  height: clamp(150px, 16vw, 220px);
  margin-top: 16px;
}
/* Clicking the dot makes it hop (see high-bar.js); there is nothing to click when it is still. */
.bar-animation {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .bar-animation {
    cursor: auto;
  }
  .role-arrow {
    transition: none;
  }
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 80px;
  row-gap: 36px;
  margin-top: 36px;
  max-width: 1000px;
}
.trust-item {
  min-width: 0;
}
.trust-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  background: #f5f6f3;
  margin-bottom: 12px;
}
.trust-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.trust-item h2 {
  font: 700 14px/1.4 var(--font);
  letter-spacing: 0;
  margin: 0 0 8px;
}
.trust-item p {
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted-foreground);
  margin: 0;
  max-width: 430px;
}
/* Baseline, not center: the link has a taller tap target than the plain "Crucibl" text, and
   centering the two boxes left the text 2px lower than the link's. */
.subpage-footer {
  border-top: 1px solid var(--border);
  padding: 16px 0 40px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  color: var(--muted-foreground);
  font-size: 11px;
  line-height: 1.5;
}
.subpage-footer a {
  padding: 4px 0;
  min-height: 28px;
}
.careers-content h1 {
  padding-left: 0.11em;
}
@media (min-width: 900px) {
  .subpage-content {
    min-height: 0;
    padding: 16px 0;
  }
  .subpage-content h1 {
    font-size: 32px;
  }
  .high-bar h2 {
    font-size: 17px;
    line-height: 1.4;
  }
  .bar-still,
  .bar-animation {
    height: clamp(130px, 19svh, 180px);
    margin-top: 8px;
  }
  /* One role per row, the full width of the page: title on the left, location on the right. */
  .role-list {
    margin-top: 20px;
  }
  .role-link {
    min-height: 52px;
    padding: 13px 0;
    gap: 32px;
  }
  .role-copy {
    flex: 1;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 32px;
  }
  .role-title {
    font-size: 16px;
    line-height: 1.35;
    letter-spacing: -0.1px;
  }
  .role-location {
    text-align: right;
  }
  .role-arrow {
    font-size: 17px;
  }
  .subpage-footer {
    padding: 10px 0 28px;
  }
}
@media (min-width: 900px) and (max-height: 620px) {
  .subpage-content {
    padding: 12px 0;
  }
  .subpage-content h1 {
    font-size: 30px;
  }
  .subpage-intro,
  .high-bar {
    margin-top: 14px;
  }
  .bar-still,
  .bar-animation {
    height: 112px;
    margin-top: 6px;
  }
  .role-list {
    margin-top: 12px;
  }
  .role-link {
    min-height: 46px;
    padding: 10px 0;
  }
  .trust-grid {
    margin-top: 28px;
    row-gap: 24px;
  }
  .subpage-footer {
    padding: 8px 0 16px;
  }
  .subpage-footer a {
    min-height: 24px;
  }
}
@media (max-width: 899px) {
  .trust-grid {
    column-gap: 48px;
  }
}
@media (max-width: 700px) {
  .subpage-content {
    padding: 56px 0 64px;
  }
  .subpage-content h1 {
    font-size: 32px;
    letter-spacing: -1px;
  }
  .subpage-intro {
    font-size: 14px;
    margin-top: 18px;
  }
  .role-list {
    margin-top: 28px;
  }
  .role-link {
    padding-block: 20px;
    gap: 20px;
  }
  .role-title {
    font-size: 17px;
  }
  .role-location {
    font-size: 12px;
  }
  .high-bar {
    margin-top: 20px;
  }
  .high-bar h2 {
    font-size: 18px;
  }
  .bar-still,
  .bar-animation {
    height: 170px;
    margin-top: 16px;
  }
  .trust-grid {
    margin-top: 36px;
    column-gap: 32px;
    row-gap: 36px;
  }
}
@media (max-width: 600px) {
  .trust-grid {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }
}
@media (max-width: 360px) {
  .subpage-content h1 {
    font-size: 29px;
  }
  .role-title {
    font-size: 16px;
  }
}

/* Official SOC 2 badge shares the evidence row without moving the page title. */
.trust-evidence {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  max-width: 1000px;
  margin-top: 32px;
}
.trust-evidence .contact {
  margin-top: 0;
}
.soc2-link {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  border-radius: 50%;
}
.soc2-link svg {
  display: block;
  width: 80px;
  height: 80px;
}
@media (min-width: 900px) and (max-height: 620px) {
  .trust-evidence {
    margin-top: 24px;
  }
  .soc2-link svg {
    width: 72px;
    height: 72px;
  }
}
@media (max-width: 700px) {
  .trust-evidence {
    margin-top: 32px;
    gap: 24px;
  }
  .soc2-link svg {
    width: 72px;
    height: 72px;
  }
}

main:focus {
  outline: none;
}