/* The download page, in the shape of a desktop app's download screen: the app
   icon, one line, one action, a look at the app, then a few short sections.
   site/content/download.md supplies every word and scripts/lib/download-page.ts
   lays them out. No script runs here: the form posts on its own. Colours come
   from document.css, so the page follows the visitor's light or dark scheme. */

body.download-page main { padding: 0; }
/* The width of the light behind the hero: a share of a wide page, a fixed size on a narrow one. */
.download-page article { position: relative; isolation: isolate; --download-wash: 48%; }

/* Backdrop: brand-blue light behind the hero, and the concentric rings of the
   OpenContext mark spreading out from the app icon. */
.download-page article::before,
.download-page article::after { content: ''; position: absolute; inset: 0 0 auto; pointer-events: none; }
.download-page article::before {
  z-index: -2;
  height: 1040px;
  background:
    radial-gradient(ellipse var(--download-wash) 430px at 50% 4%, color-mix(in srgb, var(--brand) 52%, transparent), transparent 74%),
    radial-gradient(30% 36% at 10% 30%, rgba(99, 102, 241, .2), transparent 72%),
    radial-gradient(30% 38% at 92% 26%, rgba(56, 189, 248, .16), transparent 72%);
  -webkit-mask-image: linear-gradient(#000 58%, transparent);
  mask-image: linear-gradient(#000 58%, transparent);
}
.download-page article::after {
  z-index: -1;
  height: 900px;
  background: repeating-radial-gradient(circle at 50% 118px, transparent 0 95px, color-mix(in srgb, var(--link) 20%, transparent) 95px 96px);
  -webkit-mask-image: radial-gradient(ellipse 56% 62% at 50% 118px, #000 10%, transparent 72%);
  mask-image: radial-gradient(ellipse 56% 62% at 50% 118px, #000 10%, transparent 72%);
}

/* Hero */
.download-page .download-hero { display: flex; flex-direction: column; align-items: center; margin: 0; padding: 76px 24px 0; text-align: center; }
.download-app-icon {
  display: block;
  width: 84px;
  height: 84px;
  border-radius: 22.5%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 22px 44px -14px color-mix(in srgb, var(--brand) 80%, transparent);
}
.download-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 24px 0 0;
  padding: 4px 12px;
  border: 1px solid color-mix(in srgb, var(--link) 36%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--link) 10%, transparent);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.5;
  text-transform: uppercase;
}
.download-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--link); }
.download-page .download-hero h1 { max-width: none; margin: 18px 0 14px; font-size: clamp(44px, 7vw, 80px); line-height: 1; letter-spacing: -.05em; }
.download-page .download-hero .editorial-lead { max-width: 540px; margin: 0 0 32px; color: var(--text-2); font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; }

/* The one action: an email address and a button, drawn as a single field. */
.download-access { width: 100%; max-width: 520px; }
.download-access form { margin: 0; text-align: left; }
.download-access label[for="access-email"] { display: block; margin: 0 0 8px 4px; color: var(--text); font-size: 13px; font-weight: 600; }
.download-field {
  display: flex;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 24px 48px -30px color-mix(in srgb, var(--brand) 70%, transparent);
  transition: border-color .15s;
}
.download-field:focus-within { border-color: var(--link); }
.download-field input { flex: 1; min-width: 0; padding: 10px 12px; border: 0; border-radius: 9px; background: transparent; color: var(--text); font: inherit; font-size: 16px; }
.download-field input::placeholder { color: var(--text-3); }
.download-field button {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 18px;
  border: 0;
  border-radius: 9px;
  background: var(--brand);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.download-field button:hover { background: var(--brand-hover); }
.download-field button span, .download-way-action span { transition: transform .15s; }
.download-field button:hover span, .download-way-action:hover span { transform: translateX(3px); }
/* The tester area's bot trap (site/beta/): off screen, as on the waitlist form. */
.download-page .waitlist-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.download-note { margin: 10px 4px 0; color: var(--text-3); font-size: 12.5px; line-height: 1.55; text-wrap: pretty; }
.download-note a { color: inherit; }
.download-signin { margin: 22px 0 0; color: var(--text-2); font-size: 14px; }
.download-signin a { font-weight: 600; }
.download-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; margin: 14px 0 0; padding: 0; color: var(--text-3); font-size: 13px; list-style: none; }
.download-facts li { margin: 0; }
.download-facts li + li::before { content: '\00b7'; margin: 0 10px; }

/* The app itself, in a window. */
.download-shot { max-width: 1168px; margin: 60px auto 0; padding: 0 24px; }
.download-window {
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 30px 80px -36px color-mix(in srgb, var(--brand) 60%, transparent), 0 18px 50px -34px rgba(0, 0, 0, .35);
}
.download-window-bar { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.download-window-bar span { width: 11px; height: 11px; border-radius: 50%; background: var(--border-strong); }
.download-window img { display: block; width: 100%; height: auto; }
.download-shot figcaption { margin: 14px 0 0; color: var(--text-3); font-size: 12px; text-align: center; }

@keyframes download-rise { from { opacity: 0; transform: translateY(16px); } }
.download-hero > *, .download-shot { animation: download-rise .8s cubic-bezier(.2, .7, .2, 1) backwards; }
.download-hero > :nth-child(2) { animation-delay: .05s; }
.download-hero > :nth-child(3) { animation-delay: .1s; }
.download-hero > :nth-child(4) { animation-delay: .16s; }
.download-hero > :nth-child(5) { animation-delay: .22s; }
.download-shot { animation-delay: .32s; }

/* Sections: one per H2 in the markdown. */
.download-section { padding: 0 24px; }
.download-section-inner { max-width: 1120px; margin: 0 auto; padding-top: clamp(64px, 9vw, 104px); }
.download-page .download-section h2 { margin: 0 0 36px; font-size: clamp(30px, 3.6vw, 42px); line-height: 1.1; letter-spacing: -.035em; text-align: center; text-wrap: balance; }

/* A numbered list: three steps on one line, joined like a timeline. */
.download-page .page-content .download-steps ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin: 0; padding: 0; list-style: none; counter-reset: download-step; }
.download-page .page-content .download-steps li { position: relative; margin: 0; padding: 58px 0 0; color: var(--text-2); font-size: 15px; line-height: 1.6; counter-increment: download-step; }
.download-steps li::before {
  content: counter(download-step);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid color-mix(in srgb, var(--link) 50%, var(--border));
  border-radius: 50%;
  background: color-mix(in srgb, var(--link) 10%, var(--bg));
  color: var(--text);
  font: 500 17px/1 'OpenContext Outfit', system-ui, sans-serif;
}
.download-steps li:not(:last-child)::after { content: ''; position: absolute; top: 19px; left: 50px; right: -28px; height: 1px; background: var(--border-strong); }
.download-page .page-content .download-steps li strong { display: block; margin: 0 0 6px; color: var(--text); font: 500 21px/1.25 'OpenContext Outfit', system-ui, sans-serif; letter-spacing: -.02em; }

/* A bulleted list: the requirements, as one divided strip. */
.download-page .page-content .download-specs ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); list-style: none; }
.download-page .page-content .download-specs li { margin: 0; padding: 26px 28px 28px; color: var(--text-2); font-size: 14.5px; line-height: 1.6; }
.download-specs li + li { border-left: 1px solid var(--border); }
.download-page .page-content .download-specs li strong { display: block; margin: 0 0 8px; color: var(--text); font-size: 16px; line-height: 1.35; }

/* The other ways in: a card each, with a look at what it opens. */
.download-page .page-content .download-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.download-page .page-content .download-way {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 10px 10px 22px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: transform .2s, border-color .2s;
}
.download-page .page-content .download-way:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.download-way-thumb { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 12px; }
.download-way-interactive-demo { background: radial-gradient(120% 120% at 0% 0%, #60a5fa, transparent 60%), linear-gradient(135deg, #2563eb, #1e3a8a); }
.download-way-coding-agents { background: radial-gradient(120% 120% at 100% 0%, #38bdf8, transparent 55%), linear-gradient(135deg, #4f46e5, #1d4ed8); }
.download-way-from-source { background: radial-gradient(120% 120% at 0% 100%, #6366f1, transparent 55%), linear-gradient(135deg, #0f172a, #1e3a8a); }
/* A panel set into the tile, running off its right and bottom edges. The
   screenshot inside is enlarged and shifted past the app's sidebar and top bar,
   so the panel shows the part of the view the card is about. */
.download-way-thumb picture, .download-terminal {
  position: absolute;
  top: 14%;
  left: 10%;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 8px;
  box-shadow: 0 24px 50px -20px rgba(2, 6, 23, .7);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.download-way-thumb img { position: absolute; top: 0; left: 0; width: 240%; max-width: none; transform: translate(-19.6%, -5.4%); }
.download-way:hover .download-way-thumb picture, .download-way:hover .download-terminal { transform: translate(-2%, -3%); }
.download-terminal { background: #0b1020; text-align: left; }
.download-terminal .download-window-bar { height: 28px; border-color: rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .05); }
.download-terminal .download-window-bar span { width: 9px; height: 9px; background: rgba(255, 255, 255, .22); }
.download-page .page-content .download-terminal p { margin: 0; padding: 0 16px; color: #cbd5e1; font: 13px/1.9 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: nowrap; }
.download-page .page-content .download-terminal p:first-of-type { padding-top: 12px; }
.download-terminal b { margin-right: 6px; color: #60a5fa; font-weight: 400; }
.download-page .page-content .download-terminal .download-terminal-out { color: #7c8aa5; }
.download-page .download-way h3 { margin: 20px 12px 6px; color: var(--text); font: 500 21px/1.25 'OpenContext Outfit', system-ui, sans-serif; letter-spacing: -.02em; }
.download-page .page-content .download-way > p { flex: 1; margin: 0 12px 20px; color: var(--text-2); font-size: 14.5px; line-height: 1.6; }
.download-page .page-content .download-way-action {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  margin: 0 12px;
  padding: 0 16px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
.download-page .page-content .download-way-action:hover { border-color: var(--text-3); background: var(--surface-2); }

/* Paragraphs alone: the closing band. A paragraph that is only a link is its button. */
.download-closing .download-section-inner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: clamp(64px, 9vw, 104px);
  padding: clamp(48px, 7vw, 80px) 28px;
  border-radius: 28px;
  background: radial-gradient(60% 90% at 50% 125%, rgba(96, 165, 250, .45), transparent 70%), linear-gradient(135deg, #172554, #1e3a8a 55%, #1d4ed8);
  text-align: center;
}
.download-closing .download-section-inner::before { content: ''; position: absolute; z-index: -1; inset: 0; background: repeating-radial-gradient(circle at 50% 130%, transparent 0 63px, rgba(255, 255, 255, .09) 63px 64px); }
.download-page .download-closing h2 { margin-bottom: 14px; color: #fff; }
.download-page .page-content .download-closing p { max-width: 560px; margin: 0 auto 26px; color: #dbe6ff; font-size: 16px; line-height: 1.6; }
.download-page .page-content .download-closing p:last-child { margin-bottom: 0; }
.download-page .page-content .download-closing p > a:only-child {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 10px;
  background: #fff;
  color: #1e3a8a;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s;
}
.download-page .page-content .download-closing p > a:only-child:hover { background: #e3ecff; }
.download-page .download-closing a:focus-visible { outline-color: #fff; }

.download-page .page-content > .agent-handoff { margin: clamp(48px, 7vw, 72px) max(24px, calc((100% - 1120px) / 2)) 72px; }
/* The handoff's own spacing, which the page's paragraph rule would otherwise replace. */
.download-page .page-content .agent-handoff p { margin: 0; }
.download-page .page-content .agent-handoff .agent-handoff-title { margin-bottom: 3px; color: var(--text); }
.download-page .page-content .agent-handoff .agent-handoff-prompt { margin-top: 4px; color: var(--text); }
.download-page .page-content .agent-handoff .agent-handoff-status:not(:empty) { margin-top: 8px; }
.download-page .site-footer { padding-left: max(24px, calc((100% - 1120px) / 2)); padding-right: max(24px, calc((100% - 1120px) / 2)); }

@media (max-width: 900px) {
  .download-page article { --download-wash: 430px; }
  .download-page .page-content .download-steps ol { grid-template-columns: minmax(0, 1fr); gap: 30px; max-width: 520px; margin: 0 auto; }
  .download-page .page-content .download-steps li { min-height: 38px; padding: 4px 0 0 58px; }
  .download-steps li:not(:last-child)::after { top: 46px; right: auto; bottom: -22px; left: 19px; width: 1px; height: auto; }
  .download-page .page-content .download-specs ul { grid-template-columns: minmax(0, 1fr); }
  .download-specs li + li { border-top: 1px solid var(--border); border-left: 0; }
  .download-page .page-content .download-ways { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin: 0 auto; }
}
@media (max-width: 540px) {
  .download-page .download-hero { padding: 52px 16px 0; }
  .download-app-icon { width: 72px; height: 72px; }
  .download-field { flex-direction: column; padding: 8px; }
  .download-field button { width: 100%; min-height: 48px; }
  .download-facts { gap: 4px 18px; }
  .download-facts li + li::before { content: none; }
  .download-shot { margin-top: 44px; padding: 0 12px; }
  .download-window { border-radius: 10px; }
  .download-window-bar { height: 26px; padding: 0 10px; gap: 5px; }
  .download-window-bar span { width: 8px; height: 8px; }
  .download-section { padding: 0 16px; }
  .download-closing .download-section-inner { border-radius: 20px; }
  .download-page .page-content > .agent-handoff { margin-left: 16px; margin-right: 16px; }
  .download-page .site-footer { padding-left: 16px; padding-right: 16px; }
}