/* GSP — the public site.
   ─────────────────────────────────────────────────────────────────────────
   The same material as the launcher, deliberately: somebody who downloads
   from here and opens the application should not feel handed off to a
   different product.

   Daylight. Almost everything in this category is dark, and dark is also the
   easiest place to hide a rough edge — a light ground shows every misaligned
   pixel, which is exactly why it reads as expensive when it is done. Real
   shadows with a long soft falloff, one saturated blue, and the panel itself
   photographed rather than described.

   One accent, used once at a time. A page looks cheap when four colours
   compete for the same eye; it looks considered when a single blue is allowed
   to be the only saturated thing on screen, and everything else is a neutral
   with a slight cool bias toward it. */

@font-face { font-family: "Archivo"; src: url("/static/fonts/archivo-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("/static/fonts/archivo-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("/static/fonts/archivo-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* Committed to light, as the launcher is. It is the thesis of the design,
     not an omission: nothing else in this category looks like daylight. */
  color-scheme: light;

  --paper: #f6f6f4;
  --card:  #ffffff;
  --sunk:  #eeeeeb;

  --ink:  #14161a;
  --soft: #4d5259;
  --thin: #8b9098;
  --line: #e4e3df;

  /* The one saturated colour in the system. It is the primary button, the
     live address, and the mark itself — the same blue in all three, so the
     thing you click and the thing you copy are visibly the same product. */
  --blue:      #1b56ff;
  --blue-deep: #0b3ac9;
  --blue-wash: #eef2ff;

  /* Semantic, and separate from the accent. Green never decorates here; it
     only ever means something is running. */
  --grass: #1a9e4b;
  --oak:   #8a6a2f;
  --clay:  #c2410c;
  --sun:   #b45309;

  /* Two shadows, both with a long falloff. A hard offset shadow is a graphic
     device; a soft one is light, and light is what makes a panel read as an
     object sitting on the page rather than a rectangle drawn on it. */
  --drop:  0 18px 40px -22px rgba(20, 22, 26, .32), 0 2px 6px -2px rgba(20, 22, 26, .10);
  --lift:  0 34px 70px -28px rgba(20, 22, 26, .38), 0 4px 12px -4px rgba(20, 22, 26, .12);
  --glow:  0 10px 26px -10px rgba(27, 86, 255, .55);

  --r:   12px;
  --r-s: 8px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.65 "Archivo", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--blue); }

h1, h2, h3 { text-wrap: balance; letter-spacing: -.035em; margin: 0; }
p { margin: 0 0 1em; }

/* ── header ───────────────────────────────────────────────────────────── */

.top {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: 14px clamp(16px, 4vw, 44px);
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
.mark { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.mark b { font-size: 21px; font-weight: 700; letter-spacing: -.03em; }
.top nav { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.top nav a {
  padding: 8px 14px; text-decoration: none; font-size: 15px; font-weight: 500;
  border: 1px solid transparent; border-radius: 999px;
}
.top nav a:hover { background: var(--sunk); color: var(--ink); }
.top nav a.here { background: var(--blue-wash); color: var(--blue-deep); }
.top nav a.get {
  background: var(--blue); color: #fff; font-weight: 700;
  border-color: var(--blue); box-shadow: var(--glow);
}
.top nav a.get:hover { background: var(--blue-deep); color: #fff; }

main { max-width: 1080px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 44px); }

/* ── hero ─────────────────────────────────────────────────────────────── */

.hero { padding: clamp(36px, 5vw, 64px) 0 clamp(32px, 4vw, 56px); }
.eyebrow {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--soft); margin: 0 0 18px;
}
.hero h1 {
  font-size: clamp(32px, 3.9vw, 50px); font-weight: 700; line-height: 1.06;
  margin-bottom: 22px;
}
.lead { font-size: clamp(17px, 2vw, 21px); color: var(--soft); max-width: 40ch; }

/* The signature. Identical in spirit to what the launcher shows, because it
   is the same object: the line you send a friend. The dashed border says
   "copy this", the way a coupon does. */
.artefact { border-radius: var(--r);
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  margin: 34px 0 14px; padding: 20px clamp(16px, 3vw, 26px);
  background: var(--card);
  border: 1px solid var(--line);
}
.artefact .label {
  font-size: 12px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--soft);
}
.artefact .addr {
  font-family: var(--mono); font-size: clamp(19px, 3.4vw, 31px); font-weight: 700;
  letter-spacing: -.02em; overflow-wrap: anywhere;
}
.artefact .via {
  margin-left: auto; font-family: var(--mono); font-size: 12.5px;
  letter-spacing: .09em; text-transform: uppercase; color: var(--grass);
}
.under { color: var(--thin); font-size: 15px; max-width: 52ch; }

.cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 30px; }
.go {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 26px; min-height: 50px;
  background: var(--blue); color: #fff;
  border: 1px solid var(--blue); border-radius: var(--r-s);
  box-shadow: var(--glow);
  font-weight: 700; font-size: 17px; text-decoration: none;
  transition: background .14s ease, box-shadow .14s ease, transform .14s ease;
}
.go:hover {
  color: #fff; background: var(--blue-deep); border-color: var(--blue-deep);
  transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgba(27, 86, 255, .6);
}
.quiet { font-weight: 500; color: var(--soft); }

/* ── bands of prose ───────────────────────────────────────────────────── */

.band, .steps, .closing { padding: clamp(34px, 5vw, 56px) 0; border-top: 1px solid var(--line); }
.band h2, .steps h2, .closing h2 {
  font-size: clamp(24px, 3.4vw, 33px); font-weight: 700; margin-bottom: 20px;
}
.prose { max-width: 66ch; color: var(--soft); }
.prose b { color: var(--ink); }
.band.alt .prose { max-width: 68ch; }

/* ── the four steps ───────────────────────────────────────────────────── */

/* Numbered because they are a sequence: you cannot press start before the
   game has downloaded. Where an order is real, saying it helps. */
.steps ol { border-radius: var(--r);
  list-style: none; counter-reset: step; margin: 0; padding: 0;
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); box-shadow: var(--drop);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.steps li { counter-increment: step; background: var(--card); padding: 22px 24px 26px; }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block; margin-bottom: 12px;
  font-family: var(--mono); font-size: 12.5px; font-weight: 700;
  letter-spacing: .1em; color: var(--oak);
}
.steps h3 { font-size: 19px; font-weight: 700; margin-bottom: 8px; }
.steps p { color: var(--soft); font-size: 15.5px; margin: 0; }

/* ── closing ──────────────────────────────────────────────────────────── */

.closing h2 { max-width: 22ch; }
.closing p { color: var(--soft); max-width: 56ch; }
.closing .go { margin-top: 12px; }

/* ── inner pages ──────────────────────────────────────────────────────── */

.page-head { padding: clamp(40px, 6vw, 72px) 0 clamp(24px, 3vw, 36px); }
.page-head h1 { font-size: clamp(34px, 5vw, 52px); font-weight: 700; margin-bottom: 16px; }

.notice { border-radius: var(--r);
  display: grid; gap: 5px;
  padding: 17px 20px; margin-bottom: 30px;
  background: var(--card);
  border: 1px solid var(--line); border-left-width: 3px; border-left-color: var(--sun);
}
.notice b { font-size: 16px; }
.notice span { color: var(--soft); font-size: 15.5px; }

.plans {
  display: grid; gap: 20px; margin-bottom: 12px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.plan { border-radius: var(--r);
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--drop);
  padding: 26px 26px 30px; display: flex; flex-direction: column;
}
.plan h2 { font-size: 22px; font-weight: 700; }
.plan .price {
  font-size: 42px; font-weight: 700; letter-spacing: -.04em; margin: 6px 0 18px;
  display: flex; align-items: baseline; gap: 10px;
}
.plan .price span {
  font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--soft);
}
.plan ul { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 9px; }
.plan li { padding-left: 22px; position: relative; color: var(--soft); font-size: 15.5px; }
.plan li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 9px; height: 9px; background: var(--grass);
}
.plan .go { margin-top: auto; }
/* A plan that cannot be bought says so where the button would be, rather than
   showing a button that does nothing. */
.plan.later { border-style: dashed; box-shadow: none; }
.plan.later li::before { background: var(--thin); }
.plan .disabled {
  margin-top: auto; padding: 14px 20px; text-align: center;
  border: 1px dashed var(--line); color: var(--thin);
  font-weight: 700; font-size: 15px;
}

.gets {
  display: grid; gap: 20px; margin-bottom: 8px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.get-card { border-radius: var(--r);
  display: grid; gap: 7px; align-content: start;
  padding: 24px; text-decoration: none;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--drop);
  transition: transform .12s ease, box-shadow .12s ease;
}
.get-card:hover { color: var(--ink); transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--ink); }
.get-card b { font-size: 23px; font-weight: 700; letter-spacing: -.03em; }
.get-card > span { color: var(--soft); font-size: 15px; }
.get-card .how { color: var(--thin); font-size: 13.5px; line-height: 1.55; margin-top: 6px; }
.get-card .how b { font-size: inherit; color: var(--ink); }

/* ── footer ───────────────────────────────────────────────────────────── */

.foot {
  margin-top: clamp(40px, 6vw, 72px);
  padding: clamp(30px, 4vw, 48px) clamp(16px, 4vw, 44px) 26px;
  background: var(--card); border-top: 1px solid var(--line);
}
.cols {
  max-width: 1080px; margin: 0 auto;
  display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.cols b { display: block; margin-bottom: 9px; font-size: 15px; }
.cols p { color: var(--soft); font-size: 14.5px; max-width: 34ch; }
.cols a { display: block; color: var(--soft); font-size: 14.5px; margin-bottom: 5px; }
.cols .tiny { font-size: 13px; color: var(--thin); }
.rule {
  max-width: 1080px; margin: 26px auto 0; padding-top: 18px;
  border-top: 1px solid var(--line); color: var(--thin); font-size: 13px;
}

/* ── the floor everything stands on ───────────────────────────────────── */

a:focus-visible, .go:focus-visible, .get-card:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ── forms: registering, signing in, the account itself ──────────────────
   Narrow on purpose. A sign-up form spread across a wide page makes somebody
   move their eyes between the label and the box; keeping it to one column of
   reading width is the whole design problem here. */

.narrow { max-width: 30rem; margin: 0 auto; padding: clamp(40px, 6vw, 76px) 0 0; }
.narrow h1 { font-size: clamp(30px, 4.4vw, 42px); font-weight: 700; margin-bottom: 14px; }
.narrow .lead { font-size: 16.5px; margin-bottom: 26px; }
.narrow h2.sub {
  font-size: 17px; font-weight: 700; margin: 34px 0 10px;
  padding-top: 20px; border-top: 1px solid var(--line);
}
.narrow .prose { font-size: 15.5px; }
.narrow .prose b { font-weight: 700; }
.narrow .m { font-family: var(--mono); }

.card { border-radius: var(--r);
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--drop);
  padding: 26px;
}

.field { margin-bottom: 18px; }
.field label {
  display: block; margin-bottom: 6px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--soft);
}
.field input { border-radius: var(--r-s);
  width: 100%; font: 400 16px/1.4 var(--mono);
  padding: 12px 14px; min-height: 46px;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: 0;
}
.field input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.field .key { display: block; margin-top: 6px; font-size: 13px; color: var(--thin); }

.card button.go, .card .go { width: 100%; border: 1px solid var(--line); cursor: pointer; font-family: inherit; }

.bad { border-radius: var(--r);
  padding: 14px 17px; margin-bottom: 20px;
  background: var(--card); border: 1px solid var(--line);
  border-left-width: 3px; border-left-color: var(--clay);
  font-size: 15.5px;
}

.after { margin-top: 20px; color: var(--soft); font-size: 15px; }

.facts { border-radius: var(--r); display: grid; gap: 1px; background: var(--sunk); padding: 0; }
.facts > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  background: var(--card); padding: 14px 22px;
}
.facts dt {
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--soft);
}
.facts dd { margin: 0; font-size: 16px; font-weight: 500; text-align: right; overflow-wrap: anywhere; }

.out { margin: 30px 0 0; }
.out button { border-radius: var(--r-s);
  padding: 11px 20px; min-height: 44px; cursor: pointer;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: 0;
  font: 700 15px/1 "Archivo", system-ui, sans-serif;
}
.out button:hover { background: var(--clay); color: #fff; border-color: var(--clay); }

/* Everything else in a release: the headless server, other architectures.
   Folded away because the four cards above are what almost everybody wants,
   and a list of eleven files beside them turns a decision into a search. */
.more-files { border-radius: var(--r); margin: 22px 0 0; border: 1px solid var(--line); background: var(--card); }
.more-files > summary {
  padding: 13px 18px; cursor: pointer; background: var(--sunk);
  font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--soft);
}
.more-files > summary:hover { color: var(--ink); }
.more-files .dim { margin: 16px 18px 6px; color: var(--thin); font-size: 14.5px; }
.more-files ul { list-style: none; margin: 0; padding: 0 18px 16px; display: grid; gap: 1px; }
.more-files li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 8px 0; border-bottom: 1px solid var(--sunk);
}
.more-files li a { font-family: var(--mono); font-size: 14px; }
.more-files li span { color: var(--thin); font-size: 13px; font-variant-numeric: tabular-nums; }

/* The two things that sit beside the plans: the yearly price and what the
   first hundred people keep. Beside rather than beneath in small print,
   because both change what somebody decides. */
.alsos {
  display: grid; gap: 20px; margin: 8px 0 4px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.alsos > div { border-radius: var(--r);
  padding: 18px 20px; background: var(--card);
  border: 1px solid var(--line); border-left-width: 3px; border-left-color: var(--grass);
}
.alsos b { display: block; margin-bottom: 5px; font-size: 17px; }
.alsos span { color: var(--soft); font-size: 15px; }

/* ── the operator's dashboard ────────────────────────────────────────────
   The numbers, read at a glance, in the same hard-edged material as the rest.
   These were written against class names borrowed from the relay's old page,
   which this stylesheet had never heard of — so the count and its label ran
   together as one word. */

.tiles { border-radius: var(--r);
  display: grid; gap: 3px; margin: 24px 0 30px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  background: var(--line);
  border: 1px solid var(--line);
  box-shadow: var(--drop);
}
.tile { background: var(--card); padding: 16px 18px; }
.tile b {
  display: block; font-size: 34px; font-weight: 700; letter-spacing: -.035em;
  line-height: 1.1;
  /* These change while somebody is watching them; a count that shuffles its
     own column sideways is harder to read than one that does not. */
  font-variant-numeric: tabular-nums;
}
.tile span {
  display: block; margin-top: 2px;
  font-size: 11px; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: var(--soft);
}

/* The dashboard's opening is reference rather than persuasion, so it is not
   set to the narrow measure the marketing pages use. */
.lead.wide { max-width: 62ch; }

/* ── the hero, and the panel inside it ────────────────────────────────────
   The old hero was one column down the left of a 1440-wide screen, which left
   half the viewport empty and read as unfinished. It also never showed the
   product: somebody could read the whole page and download an application
   without once seeing what it looks like.

   Both are the same fix. The argument goes left, the panel goes right, and
   the panel is drawn in the page rather than screenshotted — so it cannot
   drift out of date, and it is the same markup the launcher itself uses. */

.hero.split {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(28px, 5vw, 60px);
}
@media (max-width: 900px) { .hero.split { grid-template-columns: 1fr; } }

.hero .lead { max-width: 34ch; }

/* The panel. Every value in it is real: this is what a Paper server on a home
   machine actually reports. Inventing prettier numbers here would be the one
   dishonest thing on an otherwise plain page. */
.panel {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden; box-shadow: var(--lift);
}
.panel .chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 13px; background: var(--sunk); border-bottom: 1px solid var(--line);
}
.panel .chrome i { width: 9px; height: 9px; border-radius: 50%; background: #d3d3ce; display: block; }
.panel .chrome span {
  font-family: var(--mono); font-size: 12px; color: var(--thin); letter-spacing: .04em;
}
.panel .inside { display: grid; grid-template-columns: 148px 1fr; }
@media (max-width: 520px) { .panel .inside { grid-template-columns: 1fr; } .panel .side { display: none; } }

.panel .side { background: var(--paper); border-right: 1px solid var(--line); padding: 12px 0; }
.panel .side .g {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--thin); padding: 8px 14px 5px;
}
.panel .side a {
  display: flex; align-items: center; gap: 8px; padding: 7px 14px;
  font-size: 14px; color: var(--soft); text-decoration: none;
  border-left: 2px solid transparent;
}
.panel .side a.on { color: var(--ink); background: var(--blue-wash); border-left-color: var(--blue); }
.panel .side em { width: 6px; height: 6px; border-radius: 50%; background: #cfd2d6; flex: none; }
.panel .side a.on em { background: var(--grass); }

.panel .main { padding: 16px 18px; display: grid; gap: 14px; }
.panel .row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.panel .row h3 { font-size: 17px; font-weight: 700; }
.panel .row .what { margin: 2px 0 0; font-family: var(--mono); font-size: 12.5px; color: var(--thin); }
.panel .live {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: #e8f7ee; color: #12703a; border: 1px solid #bce5cd;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
}
.panel .live em { width: 6px; height: 6px; border-radius: 50%; background: var(--grass); display: block; }

/* The address, again — the same object as the launcher's and the same one the
   old hero made its centrepiece. It keeps that job here, inside the panel,
   because that is where somebody actually meets it. */
.panel .join {
  display: flex; align-items: stretch;
  border: 1px solid var(--line); border-radius: var(--r-s); overflow: hidden;
}
.panel .join .k {
  display: flex; align-items: center; padding: 0 10px; background: var(--paper);
  border-right: 1px solid var(--line);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--thin); white-space: nowrap;
}
.panel .join .v {
  flex: 1; padding: 11px 14px; min-width: 0; overflow-x: auto;
  font-family: var(--mono); font-size: clamp(12.5px, 1.05vw, 14px); font-weight: 700;
  color: var(--blue); font-variant-numeric: tabular-nums;
}

.panel .meters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.panel .meter { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-s); padding: 9px 11px; }
.panel .meter .k {
  font-family: var(--mono); font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--thin);
}
.panel .meter .v {
  font-size: 18px; font-weight: 700; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; line-height: 1.25;
}
.panel .meter .v small { font-size: 11px; font-weight: 500; color: var(--thin); letter-spacing: 0; }
.panel .meter .bar { height: 3px; border-radius: 2px; background: #e6e6e2; margin-top: 7px; overflow: hidden; }
.panel .meter .bar b { display: block; height: 100%; background: var(--blue); }
.panel .meter .bar.warm b { background: var(--sun); }

.panel .log {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-s);
  padding: 10px 12px; font-family: var(--mono); font-size: 12px; line-height: 1.85;
  color: var(--soft); overflow-x: auto;
}
.panel .log b { color: var(--thin); font-weight: 400; }
.panel .log .ok { color: #12703a; }
.panel .log .hot { color: var(--sun); }