/* Every page. Brand fonts, colours and layout container from the Benchling marketing site. */

@font-face {
  font-display: swap;
  font-family: Graphik;
  font-style: normal;
  font-weight: normal;
  src:
    url("/benchbench/assets/fonts/Graphik-Regular-Web.woff2") format("woff2"),
    url("/benchbench/assets/fonts/Graphik-Regular-Web.woff") format("woff");
}
@font-face {
  font-display: swap;
  font-family: Graphik;
  font-style: normal;
  font-weight: 500;
  src:
    url("/benchbench/assets/fonts/Graphik-Medium.woff2") format("woff2"),
    url("/benchbench/assets/fonts/Graphik-Medium.woff") format("woff");
}
@font-face {
  font-display: swap;
  font-family: Graphik;
  font-style: normal;
  font-weight: 600;
  src:
    url("/benchbench/assets/fonts/Graphik-Semibold-Web.woff2") format("woff2"),
    url("/benchbench/assets/fonts/Graphik-Semibold-Web.woff") format("woff");
}
@font-face {
  font-display: swap;
  font-family: Graphik;
  font-style: italic;
  font-weight: normal;
  src:
    url("/benchbench/assets/fonts/Graphik-Regular-Italic.woff2") format("woff2"),
    url("/benchbench/assets/fonts/Graphik-Regular-Italic.woff") format("woff");
}

:root {
  /* Brand colours, from benchling-marketing-site src/styles. */
  --beeswax-gold: #e9d6aa;
  --bio-blue: #000db5;
  --black: #000;
  --light-gray-background: #f4f6fa;
  --light-taupe: #c6bdb8;
  --midnight-blue: #000650;
  --deep-midnight: #000521;
  --powder-blue: #a9cafb;
  --red-error: #d00;
  --royal-blue: #2b39f1;
  --link-blue: #3c65fb;
  --white: #fff;
  --dark-red-error: #ad0000;
  --ice-blue: #f0f6fe;
  --ai-purple: #6500b5;
  --sky-blue-100: #c1ddfe;
  --sky-blue-200: #548dff;
  --bio-blue-100: #2b39f1;
  --bio-blue-200: #000db5;
  --green-100: #edf8ea;
  --green-200: #d8edd5;
  --green-400: #7bc099;
  --green-500: #118764;
  --green-700: #02393c;
  --grey-100: #f9f7f6;
  --grey-200: #eeedeb;
  --grey-300: #d6d7d1;
  --grey-400: #b6b7b1;
  --grey-500: #636363;
  --brown-100: #f6f0e1;
  --brown-200: #f0e7ca;
  --brown-300: #e9d6aa;
  --brown-400: #e5a873;
  --brown-500: #bd7a4a;
  --brown-600: #76341e;
  --brown-700: #471b18;
  --purple-100: #f4ecff;
  --purple-200: #ead9fc;
  --purple-300: #d8c8f5;
  --purple-400: #c2b8ff;
  --purple-500: #867af2;
  --purple-600: #7120b1;
  --purple-700: #321651;
  --gradient-white-to-grey: linear-gradient(
    180deg,
    #eeedeb 10.94%,
    #fff 80.09%
  );
  --gradient-white-to-ice-blue: linear-gradient(
    180deg,
    #f0f6fe 10.94%,
    #fff 80.09%
  );
  --gradient-white-to-brown: linear-gradient(
    180deg,
    #f6f0e1 10.94%,
    #fff 80.09%
  );
  --gradient-white-to-purple: linear-gradient(
    180deg,
    #f4ecff 10.94%,
    #fff 80.09%
  );
  --gradient-white-to-green: linear-gradient(
    180deg,
    #edf8ea 10.94%,
    #fff 80.09%
  );
  --gradient-green-to-brown: linear-gradient(
    132deg,
    #f6f0e1 9.8%,
    #edf8ea 47.06%
  );
  --gradient-ice-blue-to-purple: linear-gradient(
    132deg,
    #f4ecff 9.8%,
    #f0f6fe 47.06%
  );
  --gradient-brown-to-purple: linear-gradient(
    132deg,
    #f4ecff 9.8%,
    #f6f0e1 47.06%
  );
  --gradient-grey-to-purple: linear-gradient(
    132deg,
    #f4ecff 12.23%,
    #f9f7f6 65.27%
  );
  --gradient-grey-to-ice-blue: linear-gradient(
    132deg,
    #f0f6fe 12.23%,
    #f9f7f6 65.27%
  );
  --gradient-sky-blue-to-grey: linear-gradient(
    106deg,
    #f9f7f6 40.19%,
    #c1ddfe 92.25%
  );
  --gradient-white-to-ice-blue-alt: linear-gradient(
    132deg,
    #fff 21.54%,
    #f0f6fe 65.27%
  );

  /* Not brand colours: site-only blues for secondary text. */
  --marine: #183C60;
  --marine-100: #305D87;

  --font-primary: graphik, arial, helvetica, sans-serif;
  --radius: 12px;
  --radius-bar: 3px;

  /* Type scale: nearest brand sizes, never below 12px. */
  --text-12: 12px;
  --text-14: 14px;
  --text-16: 16px;
  --text-18: 18px;
  --text-20: 20px;
  --text-24: 24px;
  --text-28: 28px;
}

.layout-container {
  margin: 0 auto;
  max-width: 1200px;
  width: calc(100% - 40px);
}
@media screen and (min-width: 768px) {
  .layout-container {
    width: calc(100% - 80px);
  }
}
@media screen and (min-width: 1440px) {
  .layout-container {
    width: calc(100% - 112px);
  }
}

* {
  box-sizing: border-box;
}
/* Class display rules would otherwise beat the browser's [hidden] rule. */
[hidden] {
  display: none !important;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--white);
  color: var(--midnight-blue);
  font-family: var(--font-primary);
  font-size: var(--text-18);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}
@media (max-width: 1023px) {
  body {
    font-size: var(--text-16);
  }
}
/* Brand tracking, relative to each element's own size. */
*,
*::before,
*::after {
  letter-spacing: -0.04em;
}
a {
  color: var(--bio-blue-200);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
header.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--grey-300);
}
.nav-inner {
  padding: 14px 0;
  display: flex;
  align-items: center;
  gap: 20px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--midnight-blue);
  font-size: var(--text-18);
}
/* The wordmark uses currentColor, so the link inherits the brand ink. */
.brand a {
  display: block;
  color: inherit;
  border-radius: 4px;
}
.brand a:hover {
  opacity: 0.7;
}
.brand svg {
  display: block;
  height: 28px;
  width: auto;
}
.nav-menu {
  margin-left: auto;
  position: relative;
}
.menu-btn {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  font-family: inherit;
  font-size: var(--text-14);
  font-weight: 500;
  color: var(--midnight-blue);
  cursor: pointer;
  transition: 0.15s;
}
.menu-btn:hover,
.menu-btn[aria-expanded="true"] {
  border-color: var(--grey-300);
  background: var(--ice-blue);
}
.menu-caret {
  width: 11px;
  height: 8px;
  transition: transform 0.15s;
}
.menu-btn[aria-expanded="true"] .menu-caret {
  transform: rotate(180deg);
}
.menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 208px;
  padding: 6px;
  background: var(--white);
  border: 1px solid var(--grey-300);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 6, 80, 0.12);
  display: grid;
  gap: 2px;
}
.menu-panel a {
  padding: 9px 11px;
  border-radius: 7px;
  font-size: var(--text-14);
  font-weight: 500;
  color: var(--midnight-blue);
}
.menu-panel a:hover {
  background: var(--ice-blue);
  color: var(--bio-blue-200);
  text-decoration: none;
}
.btn {
  font-weight: 500;
  font-size: var(--text-14);
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  display: inline-block;
}
.btn-primary {
  background: var(--midnight-blue);
  color: var(--white);
}
.btn-primary:hover {
  background: var(--bio-blue-200);
  text-decoration: none;
}
.band p a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.band p a:hover {
  text-decoration-thickness: 2px;
}
.btn-ghost {
  background: var(--grey-100);
  color: var(--midnight-blue);
  border-color: var(--grey-200);
}
.btn-ghost:hover {
  background: var(--grey-200);
  border-color: var(--grey-200);
  text-decoration: none;
}
.hero-actions {
  display: flex;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}
/* Logo, pill and menu need about 438px on one line; below that each gives a little. */
@media (max-width: 640px) {
  .nav-inner {
    gap: 10px;
    padding: 12px 0;
  }

  .brand svg {
    height: 23px;
  }

  .menu-btn {
    padding: 7px 8px;
    font-size: var(--text-12);
  }
}
@media (max-width: 400px) {
  .brand svg {
    height: 20px;
  }

  .nav-inner {
    gap: 4px;
  }

  .menu-btn {
    font-size: var(--text-12);
    padding: 7px 9px;
  }
}
section.wrap {
  padding: 56px 0;
}
.kicker {
  font-size: var(--text-16);
  font-weight: 500;
  color: var(--bio-blue-100);
}
.sub {
  color: var(--grey-500);
  max-width: 70ch;
  margin: 0 0 8px;
}
.band {
  background: var(--midnight-blue);
  color: var(--white);
}
.band-inner {
  padding: 56px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.band h2 {
  font-size: clamp(24px, 3vw, 32px);
  margin: 0;
  font-weight: 400;
}
.band p {
  margin: 8px 0 0;
  opacity: 0.8;
  max-width: 52ch;
}
.band-kicker {
  margin-bottom: 10px;
  font-size: var(--text-16);
  font-weight: 500;
  color: var(--powder-blue);
}
@media (max-width: 767px) {
  .kicker,
  .band-kicker {
    font-size: var(--text-12);
  }
}
footer {
  border-top: 1px solid var(--grey-300);
}
.foot {
  padding: 36px 0;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  color: var(--grey-500);
  font-size: var(--text-14);
}
.foot .brand svg {
  height: 24px;
}
.foot-links {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}
.foot-links a {
  color: var(--midnight-blue);
  font-weight: 500;
}
.foot-links a:hover {
  color: var(--bio-blue-200);
}