:root {
  --bg: #1b1c1e;
  --surface: #242628;
  --surface-2: #2b2d30;
  --line: #35383c;
  --text: #d6d8db;
  --muted: #8f959c;
  --accent: #5aa9e6;
  /* Sampled from the FLUX glyphs in banner.png, so the wordmark on the page and the wordmark
     in the artwork are the same blue rather than nearly the same blue. */
  --logo-blue: #3c94e6;
  --radius: 8px;
}

/* Orbitron is loaded from Google Fonts in index.html. To self-host instead (one less external
   request, and it sidesteps the EU rulings about Google Fonts serving visitor IPs), drop the
   .woff2 files in docs/fonts/ and swap the <link> for:

     @font-face {
       font-family: 'Orbitron';
       src: url('fonts/orbitron-700.woff2') format('woff2');
       font-weight: 700; font-display: swap;
     }

   Orbitron is SIL Open Font License, so redistributing it with the site is fine. */
.wordmark,
.topnav .brand {
  font-family: 'Orbitron', 'Eurostile', 'Bank Gothic', sans-serif;
  text-transform: uppercase;
}

/* The logo splits the name across two colours. Mirrored here so the page and the artwork
   read as one mark. "CON" is near-black in the original, which inverts to the light neutral
   on this surface. */
.flux { color: var(--logo-blue); }

/* Both marks are flex containers, so their `gap` sits between every flex item. Left bare,
   "Con" and the coloured span become two items and the icon's gap opens up in the middle of
   the word. This keeps the whole name as one item, with the split handled by inline flow. */
.name { white-space: nowrap; }

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  /* API names have no spaces to break at. Nothing currently overflows even at 320px, but a
     longer identifier in future copy would push the page sideways without this. */
  overflow-wrap: break-word;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
}

a { color: var(--accent); }

/* top nav */

.topnav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(27, 28, 30, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}

.topnav .wrap {
  display: flex;
  align-items: center;
  gap: 22px;
  height: 52px;
}

.topnav .brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-right: auto;
}

.topnav .brand img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.topnav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
}

.topnav a:hover { color: var(--text); }

.nav-cta {
  padding: 5px 12px;
  border: 1px solid #3f6f96;
  border-radius: 6px;
  background: rgba(90, 169, 230, 0.12);
  color: var(--accent) !important;
}

.nav-cta:hover { background: rgba(90, 169, 230, 0.2); }

/* call to action */

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.cta, .cta-secondary {
  display: inline-block;
  padding: 11px 22px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.cta {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #10222f;
}

.cta:hover { background: #6fb6ea; }

.cta-secondary {
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
}

.cta-secondary:hover { border-color: var(--muted); }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}

.closing { text-align: left; }

/* hero */

.hero {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  padding: 72px 0 60px;
}

/* Icon plus live text rather than banner.png. The banner's "CON" is near-black on
   transparent, drawn for a white page, and it disappears against this surface; the cube
   artwork carries its own colour and reads on anything. Keeping the name as text also
   leaves the h1 selectable and indexable. */
.hero h1.wordmark {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 22px;
  font-size: 46px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.04em;
}

.hero h1.wordmark img {
  width: 76px;
  height: 76px;
  object-fit: contain;
  flex: none;
}

.lede {
  margin: 0 0 32px;
  max-width: 62ch;
  font-size: 20px;
  line-height: 1.55;
  color: #c8ccd1;
}

.motivation {
  max-width: 66ch;
  padding-left: 18px;
  border-left: 2px solid var(--line);
  margin-bottom: 32px;
}

.motivation p {
  margin: 0 0 14px;
  color: #aeb4ba;
  font-size: 16px;
}

.motivation p:last-child { margin-bottom: 0; }

.menu-path {
  display: inline-block;
  margin: 0;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
}

.menu-path span:last-child { color: var(--text); }

/* headings and text */

h2 {
  margin: 0 0 14px;
  font-size: 27px;
  letter-spacing: -0.01em;
}

p { margin: 0 0 16px; max-width: 68ch; }

.note { color: var(--muted); font-size: 15px; }

/* feature blocks */

.feature {
  max-width: 900px;
  margin: 0 auto;
  padding: 56px 24px;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.feature:nth-child(even) .feature-text { order: 2; }

.feature-text p { margin: 0; color: #bfc4ca; }

.feature-shot { margin: 0; }

.feature-shot img,
.placeholder {
  display: block;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.placeholder {
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0 10px,
    rgba(255, 255, 255, 0.02) 10px 20px
  );
}

figcaption {
  margin-top: 10px;
  color: var(--muted);
  font-size: 13.5px;
}

/* zoom */

a.zoom {
  display: block;
  cursor: zoom-in;
  line-height: 0;
}

a.zoom:hover img { border-color: var(--accent); }

.feature-shot img { transition: border-color 0.12s ease; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(10, 11, 12, 0.94);
  cursor: zoom-out;
}

.lightbox[hidden] { display: none; }

/* Capped at natural size: these are screenshots, and stretching one past 1:1 only makes the
   text softer than it was in the editor. */
.lightbox img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.lightbox-hint {
  position: absolute;
  bottom: 14px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

/* text-only feature pair */

.feature-pair {
  max-width: 900px;
  margin: 0 auto;
  padding: 48px 24px;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.feature-pair h3 {
  margin: 0 0 10px;
  font-size: 19px;
  letter-spacing: -0.01em;
}

.feature-pair p { margin: 0; color: #bfc4ca; font-size: 15px; }

/* plain blocks */

.block {
  padding-top: 56px;
  padding-bottom: 56px;
}

.block + .block { border-top: 1px solid var(--line); }

.steps, .plain, .limits { margin: 0 0 16px; padding-left: 22px; }
.steps li, .plain li { margin-bottom: 10px; max-width: 70ch; }

.limits { list-style: none; padding-left: 0; }

.limits li {
  margin-bottom: 10px;
  padding: 14px 16px;
  max-width: 78ch;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 15px;
  color: #bfc4ca;
}

.limits strong { color: var(--text); }

/* footer */

footer {
  border-top: 1px solid var(--line);
  padding: 32px 0 48px;
  color: var(--muted);
  font-size: 14px;
}

footer p { margin: 0; }

@media (max-width: 720px) {
  .hero { padding: 48px 0 44px; }
  .hero h1.wordmark { font-size: 29px; gap: 12px; letter-spacing: 0.03em; }
  .hero h1.wordmark img { width: 52px; height: 52px; }
  .lede { font-size: 18px; }
  .feature {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 40px 24px;
  }
  .feature:nth-child(even) .feature-text { order: 0; }
  .feature-pair { grid-template-columns: 1fr; gap: 28px; padding: 36px 24px; }
  .topnav .wrap { gap: 14px; font-size: 14px; }
  .topnav a:not(.nav-cta) { display: none; }
}