/* The home page: a split hero, the graph on the right, a close that asks you to try it. */

.nav__logo img,
.footer__mark img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex: none;
}

.hero__media {
  background: #fff;
  border: 1px solid rgb(26 18 22 / 8%);
}

.hero .peel {
  position: absolute;
  inset: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  color: #1a1216;
}

.peel__bar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid rgb(0 0 0 / 8%);
  color: #5c5458;
  font-size: 13px;
}

.peel svg {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: 100%;
}

.peel line {
  stroke: #1a1216;
  stroke-opacity: 0.18;
  stroke-width: 1.4;
}

.peel .peel__edge--on {
  stroke: #c2186a;
  stroke-opacity: 1;
  stroke-width: 2.2;
}

.peel .peel__edge--off {
  stroke-opacity: 0.05;
}

.peel circle {
  fill: #1a1216;
  stroke: #fff;
  stroke-width: 3;
}

.peel .is-on circle {
  fill: #c2186a;
}

.peel .is-off {
  opacity: 0.28;
}

.peel text {
  fill: #5c5458;
  font-size: 12px;
  font-family: var(--font-mono), ui-monospace, monospace;
}

@media (max-width: 1023px) {
  .hero--split .hero__media {
    min-height: 520px;
  }
}