/* Download page theme (pairs with design/download-theme.js).
   Quiet by design: fine dots gather at the hero corners. Between them the page stays plain:
   flat tinted frames in the tool colours, small section numbers, a hairline of page progress.
   Loads after download.css and only restyles; it adds no content.
   Every rule is scoped to .lp-download-page. */
.lp-download-page {
  --inst-ink: #0e1a14;
  --inst-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  --inst-dot: rgba(23, 138, 88, .46);
  /* A staggered grid of small dots. */
  --inst-dots:
    radial-gradient(circle at center, var(--inst-dot) 0 1.15px, transparent 1.7px) 0 0 / 10px 10px,
    radial-gradient(circle at center, var(--inst-dot) 0 1.15px, transparent 1.7px) 5px 5px / 10px 10px;
}

/* ---- Corner dots: hero ---- */
.lp-download-page .lp-hero::before {
  content: '';
  inset: 0;
  opacity: 1;
  background: var(--inst-dots);
  -webkit-mask-image:
    radial-gradient(ellipse 27% 230px at 0 0, #000 0, transparent 68%),
    radial-gradient(ellipse 27% 230px at 100% 0, #000 0, transparent 68%);
  mask-image:
    radial-gradient(ellipse 27% 230px at 0 0, #000 0, transparent 68%),
    radial-gradient(ellipse 27% 230px at 100% 0, #000 0, transparent 68%);
}
.lp-download-page .lp-hero::after { content: none; } /* the white veil would hide the top corners */


/* ---- Page progress: one hairline under the section nav ---- */
.download-gauge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  overflow: hidden;
  pointer-events: none;
}
.download-gauge i {
  position: absolute;
  inset: 0;
  background: #17a05a;
  transform-origin: 0 50%;
  transform: scaleX(var(--at, 0));
}

/* ---- Section numbers: a small index above each heading, nothing more ---- */
.lp-download-page main { counter-reset: inst-section; }
.lp-download-page .download-workspace::before {
  counter-increment: inst-section;
  content: '0' counter(inst-section);
  display: block;
  margin-bottom: 14px;
  text-align: center;
  font-family: var(--inst-mono);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: .1em;
  color: rgba(14, 26, 20, .46);
}

/* ---- Screens sit on a flat tint of one tool colour ---- */
.lp-download-page .download-screen__frame {
  --frame-tone: #3ED884;
  background: color-mix(in srgb, var(--frame-tone) 16%, #fff);
}
.lp-download-page #model-choice .download-screen__frame { --frame-tone: #9C88F2; }
.lp-download-page #team .download-screen__frame { --frame-tone: #6FA9F8; }
.lp-download-page #tasks .download-screen__frame { --frame-tone: #3ED884; }
.lp-download-page #agents .download-screen__frame { --frame-tone: #9C88F2; }
.lp-download-page #browser .download-screen__frame { --frame-tone: #F6B55C; }
.lp-download-page #changes .download-screen__frame { --frame-tone: #F4A9EE; }
.lp-download-page #deployments .download-screen__frame { --frame-tone: #5ED6C6; }

@media (max-width: 700px) {
  /* Narrow screens: the headline runs nearly edge to edge, so the dots stay tight in the corners. */
  .lp-download-page .lp-hero::before {
    -webkit-mask-image:
      radial-gradient(ellipse 36% 76px at 0 0, #000 0, transparent 70%),
      radial-gradient(ellipse 36% 76px at 100% 0, #000 0, transparent 70%);
    mask-image:
      radial-gradient(ellipse 36% 76px at 0 0, #000 0, transparent 70%),
      radial-gradient(ellipse 36% 76px at 100% 0, #000 0, transparent 70%);
  }
}