/* Homepage header and hero only. The Tibo surface and every tool keep their
   existing presentation, state and data. Decorative layers contain no data. */
.home header.site {
  padding-block: 16px;
  border-bottom-color: #e0e9e5;
}
.home header.site .wrap {
  gap: 24px;
}
.home header.site .logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -1.6px;
}
.home header.site .brand-g6 {
  display: block;
  width: 65px;
  height: 36px;
  color: #087c65;
}
.home header.site .brand-g6 svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}
.home header.site .logo .brand-slash {
  display: block;
  position: relative;
  width: 12px;
  height: 31px;
  margin: 0;
  font-size: 0;
  animation: hero-slash-arrive 180ms ease-out both;
}
.home header.site .logo .brand-slash::before {
  content: "";
  position: absolute;
  top: 0;
  left: 5px;
  width: 2px;
  height: 100%;
  background: #63b6a1;
  transform: skewX(-19deg);
}
.home header.site .brand-cost {
  font-weight: 650;
  letter-spacing: -1.9px;
}
.home header.site .brand-descriptor {
  margin: 0;
  padding-left: 20px;
  border-left: 1px solid #cedbd5;
  font: 500 9px/1.6 var(--font-ui);
  letter-spacing: 1.25px;
  color: #526b60;
}
.home header.site nav {
  gap: 26px;
}
.home header.site nav > a,
.home .nav-group summary {
  font: 500 12px/1.4 var(--font-ui);
  color: #243e34;
}
.home .nav-group summary:hover,
.home .nav-group[open] summary {
  color: #087c65;
}
.home .nav-group summary::after {
  padding-left: 7px;
}
.home .header-verified {
  font-size: 10px;
}
.home .hero-composition {
  position: relative;
  isolation: isolate;
  grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
  gap: 40px;
  min-height: 290px;
  margin-block: 24px 28px;
  background: none;
}
.home .hero-composition::before,
.home .hero-composition::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  left: -4vw;
  right: -4vw;
  top: -24px;
  bottom: -22px;
  border: 0;
}
.home .hero-composition::before {
  background:
    radial-gradient(ellipse at 60% 80%, #a5dec9, transparent 64%),
    radial-gradient(ellipse at 88% 18%, #bae3e5, transparent 58%);
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 28%,
    #000 85%,
    transparent
  );
  opacity: 0.2;
  animation: hero-field-drift 12s ease-in-out infinite alternate;
}
.home .hero-composition::after {
  background-image:
    linear-gradient(#599482 1px, transparent 1px),
    linear-gradient(90deg, #599482 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at 47% 75%, #000, transparent 64%);
  opacity: 0.1;
}
.home .hero-composition .hero {
  position: relative;
  padding-block: 26px;
  min-width: 0;
  background: none;
}
.home .hero-composition .hero::before {
  content: "";
  position: absolute;
  right: -12px;
  bottom: 10px;
  width: 255px;
  height: 140px;
  z-index: -1;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 49'%3E%3Cg fill='%23145b48'%3E%3Cpath d='M42 13 34 5H15L5 15v19l10 10h19l9-9V23H24v8h10v1l-4 4H19l-6-6V19l6-6h11l5 5Z'/%3E%3Cpath fill-rule='evenodd' d='M71 5h11L66 22h10l10 10v3l-9 9H60l-9-9V24Zm-10 24v5l4 3h7l5-4-5-4Z'/%3E%3C/g%3E%3C/svg%3E")
    center / contain no-repeat;
  opacity: 0.035;
}
.home .hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  font:
    500 10px/1.5 "IBM Plex Mono",
    ui-monospace,
    monospace;
  letter-spacing: 1.7px;
  color: #2d6553;
}
.home .hero-eyebrow::after {
  content: "";
  width: 66px;
  height: 1px;
  background: #72bca5;
  transform-origin: left;
  animation: hero-line-arrive 6s ease-out both;
}
.home .hero-composition .hero h1 {
  max-width: none;
  margin: 0 0 18px;
  font: 650 clamp(39px, 3.7vw, 54px) / 1.12 var(--font-display);
  letter-spacing: -1.9px;
  color: #102a24;
}
.home .hero-title-line {
  display: block;
}
.home .hero-cost {
  color: #087c65;
}
.home .hero-composition .hero p.sub {
  max-width: 480px;
  margin: 0;
  font: 400 15px/1.6 var(--font-ui);
  color: #52685f;
}
@keyframes hero-slash-arrive {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes hero-line-arrive {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@keyframes hero-field-drift {
  from {
    transform: translate3d(-3px, 0, 0);
  }
  to {
    transform: translate3d(3px, -3px, 0);
  }
}
@media (max-width: 1200px) {
  .home header.site .brand-descriptor,
  .home .header-verified {
    display: none;
  }
  .home .hero-composition {
    gap: 28px;
  }
}
@media (max-width: 900px) {
  .home .hero-composition {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-block: 16px 24px;
  }
  .home .hero-composition .hero {
    padding-block: 14px 8px;
  }
  .home .hero-composition .hero::before {
    right: 4%;
  }
  .home .hero-composition .hero h1 {
    font-size: 44px;
  }
  .home .hero-composition .hero p.sub {
    font-size: 14px;
  }
}
@media (min-width: 761px) and (max-width: 899px) {
  .home header.site .wrap {
    display: flex;
    width: 89%;
    padding: 0;
    margin-inline: auto;
  }
  .home header.site nav {
    margin-left: auto;
    justify-content: initial;
    gap: 22px;
  }
}
@media (max-width: 760px) {
  .home header.site {
    padding-block: 0;
  }
  .home header.site .wrap {
    gap: 0 16px;
    padding-block: 12px 6px;
  }
  .home header.site .logo {
    font-size: 27px;
    gap: 7px;
  }
  .home header.site .brand-g6 {
    width: 57px;
    height: 32px;
  }
  .home header.site .logo .brand-slash {
    height: 27px;
  }
  .home header.site .brand-cost {
    letter-spacing: -1.6px;
  }
  .home header.site nav {
    gap: 12px;
    margin-top: 4px;
  }
  .home header.site nav > a,
  .home .nav-group summary {
    font-size: 12px;
  }
  .home .hero-composition {
    gap: 12px;
    margin-block: 14px 22px;
  }
  .home .hero-composition .hero {
    padding-block: 14px 6px;
  }
  .home .hero-composition .hero h1 {
    font-size: clamp(32px, 8.8vw, 38px);
    letter-spacing: -1.2px;
    margin-bottom: 14px;
  }
  .home .hero-eyebrow {
    gap: 16px;
    margin-bottom: 16px;
    font-size: 9px;
    letter-spacing: 1.35px;
  }
  .home .hero-eyebrow::after {
    width: 44px;
  }
  .home .hero-composition .hero p.sub {
    font-size: 13px;
    max-width: 340px;
  }
  .home .hero-sub-break {
    display: none;
  }
  .home .hero-composition::after {
    opacity: 0.05;
    background-size: 36px 36px;
  }
  .home .hero-composition::before,
  .home .hero-composition::after {
    left: 0;
    right: 0;
  }
  .home .hero-composition .hero::before {
    display: none;
  }
}
@media (max-width: 360px) {
  .home .hero-composition .hero h1 {
    font-size: 30px;
    letter-spacing: -1.1px;
  }
  .home .hero-eyebrow {
    gap: 12px;
  }
  .home .hero-eyebrow::after {
    width: 30px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .home .hero-composition::before,
  .home .hero-eyebrow::after,
  .home header.site .logo .brand-slash {
    animation: none;
    transform: none;
  }
}