/* FINO, dark (home page section 4 and the /fino/ page). */

.fino {
  --focus: var(--night-ink);
  --link-hover: var(--night-ink);
  background: var(--night);
  color: var(--night-ink);
}

.fino .index {
  color: var(--night-ink-2);
}

.fino .index__num {
  color: var(--vermilion-night);
}

.fino__grid {
  display: grid;
  gap: var(--space-2xl);
  align-items: center;
}

.fino__name {
  margin-top: var(--space-s);
  font-size: var(--step-5);
  font-weight: 350;
}

.fino__pitch {
  max-width: 24ch;
  margin-top: var(--space-s);
  font-size: var(--step-2);
  line-height: var(--leading-snug);
}

.fino__features {
  margin-top: var(--space-xl);
  border-top: 1px solid var(--night-line);
  counter-reset: feature;
}

.fino__features li {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  padding-block: var(--space-s);
  border-bottom: 1px solid var(--night-line);
  counter-increment: feature;
}

.fino__features li::before {
  content: counter(feature, decimal-leading-zero);
  grid-row: span 2;
  padding-top: 0.3em;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--night-ink-2);
}

.fino__features h3 {
  font-size: var(--step-1);
}

.fino__features p {
  margin-top: var(--space-3xs);
  color: var(--night-ink-2);
}

.fino__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-m) var(--space-l);
  margin-top: var(--space-xl);
}

/* Sketch and voice become an app: a line drawing, no product data. */
.fino__art {
  padding: var(--space-m);
  background: var(--night-2);
  border: 1px solid var(--night-line);
  border-radius: var(--radius);
  color: var(--night-ink);
}

.brnoa-art {
  display: block;
  width: 100%;
  height: auto;
  stroke-width: 2;
}

.brnoa-art__soft {
  color: var(--night-ink-2);
}

.brnoa-art__arrow {
  color: var(--vermilion-night);
}

/* Early-access form on the product page (light section). */
.access__lead {
  max-width: 36ch;
  margin-top: var(--space-s);
  color: var(--ink-2);
}

@media (min-width: 900px) {
  .fino__grid {
    grid-template-columns: 5fr 6fr;
    gap: var(--space-3xl);
  }
}