@font-face {
  font-family: "JetBrains Mono";
  src: url("JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.mosquito-page {
  font-family: "JetBrains Mono", ui-monospace, "Segoe UI Mono", Menlo, Consolas, monospace;
}

.mosquito-page main {
  padding: 36px 0 72px;
}

.mosquito-page h1 {
  max-width: 16em;
  margin: 18px 0 12px;
  color: #00ff41;
  font-family: "JetBrains Mono", ui-monospace, "Segoe UI Mono", Menlo, Consolas, monospace;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.mosquito-page h2 {
  margin: 0 0 16px;
  color: #00ff41;
  font-family: "JetBrains Mono", ui-monospace, "Segoe UI Mono", Menlo, Consolas, monospace;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 400;
}

.mosquito-page h3 {
  margin: 0 0 8px;
  color: #ffffff;
  font-family: "JetBrains Mono", ui-monospace, "Segoe UI Mono", Menlo, Consolas, monospace;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
}

.mosquito-page p,
.mosquito-page li,
.mosquito-page figcaption {
  color: #d6ded8;
  font-family: "JetBrains Mono", ui-monospace, "Segoe UI Mono", Menlo, Consolas, monospace;
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.55;
}

.product-logo {
  width: min(180px, 46vw);
  height: auto;
  border: 2px solid #00ff41;
  background: #000000;
}

.tagline {
  max-width: 36rem;
  margin: 0 0 18px;
  color: #4cc46f;
}

.android-note,
.soon {
  margin: 12px 0 0;
  color: #4cc46f;
}

.mosquito-page .btn,
.mosquito-page .btn-primary,
.mosquito-page .btn-primary:link,
.mosquito-page .btn-primary:visited,
.mosquito-page .btn-primary:active {
  border-color: #00ff41;
  border-radius: 0;
  background: #00ff41;
  color: #000000;
  -webkit-text-fill-color: #000000;
  font-family: "JetBrains Mono", ui-monospace, "Segoe UI Mono", Menlo, Consolas, monospace;
  font-size: 1.05rem;
  font-weight: 700;
}

.mosquito-page .btn-primary:hover,
.mosquito-page .btn-primary:focus-visible {
  background: #ffffff;
  border-color: #ffffff;
  color: #000000;
  -webkit-text-fill-color: #000000;
}

.product-section {
  margin-top: 48px;
}

.job-grid,
.shot-grid {
  display: grid;
  gap: 16px;
}

.job {
  margin: 0;
  padding: 18px 16px 8px;
  border: 1px solid rgba(0, 255, 65, 0.45);
  background: #000000;
}

.lights {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lights li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0 0 14px;
}

.lamp {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.lamp-green { background: #00ff41; }
.lamp-amber { background: #ffb000; }
.lamp-red { background: #ff3131; }

.shot {
  margin: 0;
}

.shot img {
  width: 100%;
  height: auto;
  border: 1px solid rgba(0, 255, 65, 0.45);
  background: #000000;
}

.shot figcaption {
  margin-top: 8px;
}

.plain-list {
  margin: 0;
  padding-left: 1.2rem;
}

.plain-list li {
  margin: 0 0 10px;
}

.story p {
  max-width: 42rem;
}

@media (min-width: 800px) {
  .job-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .shot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}