/* The site wears the program's face: dark panel, pixel headings, one green.
   Body text is a normal typeface on purpose - the pixel font is beautiful on
   a gauge and punishing to read three paragraphs of.

   Mobile first, because a trouble-code page gets read standing next to a car
   with a phone in one hand. */

@font-face {
  font-family: 'Scanner Pixel';
  src: url('pixelfont.ttf') format('truetype');
  font-display: swap;
}

/* Light is the site's face, and the values are lifted straight from the
   program's own light theme so the two look like one product. Anybody whose
   computer is set to dark still gets dark — same palette the app uses there. */
:root {
  --bg: #d6dbe2;
  --panel: #edf0f4;
  --panel-2: #e0e5eb;
  --line: #b6bfca;
  --ink: #141a21;
  --dim: #5a6573;
  --accent: #0a6b5c;
  --accent-hi: #0d8571;
  --amber: #8f5e00;
  --red: #b0242d;
  --btn-ink: #ffffff;
  /* a dark screenshot needs lifting off a light page */
  --shot-edge: 0 2px 12px rgba(20, 26, 33, .22);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0f14;
    --panel: #111820;
    --panel-2: #16202a;
    --line: #223040;
    --ink: #e8eef6;
    --dim: #8fa0b4;
    --accent: #4fd6a0;
    --accent-hi: #63e6b1;
    --amber: #e6b455;
    --red: #e2707a;
    --btn-ink: #08110d;
    --shot-edge: none;
  }
}

* { box-sizing: border-box; }

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

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

img {
  max-width: 100%; height: auto; display: block;
  border: 1px solid var(--line); box-shadow: var(--shot-edge);
}

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

/* --------------------------------------------------------------- top bar */

.bar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  position: sticky; top: 0; z-index: 5;
}
.brand {
  font-family: 'Scanner Pixel', monospace;
  font-size: 19px; letter-spacing: .12em; color: var(--ink); text-decoration: none;
}
.brand .g { color: var(--accent); }
.bar nav { margin-left: auto; display: flex; gap: 18px; flex-wrap: wrap; }
.bar nav a {
  font-family: 'Scanner Pixel', monospace;
  letter-spacing: .08em; font-size: 13px; color: var(--dim); text-decoration: none;
}
.bar nav a:hover { color: var(--accent); }
.bar nav a.flag { color: var(--amber); }

/* ----------------------------------------------------------------- layout */

main { max-width: 1080px; margin: 0 auto; padding: 28px 20px 60px; }
main.narrow { max-width: 780px; }
section { margin: 0 0 48px; }

h1 {
  font-family: 'Scanner Pixel', monospace;
  font-size: clamp(26px, 5vw, 40px); line-height: 1.25;
  letter-spacing: .04em; margin: 0 0 16px;
}
h2 {
  font-family: 'Scanner Pixel', monospace;
  font-size: clamp(19px, 3vw, 24px); letter-spacing: .06em;
  margin: 0 0 12px;
}
h3 {
  font-family: 'Scanner Pixel', monospace;
  font-size: 15px; letter-spacing: .06em; color: var(--accent);
  margin: 0 0 6px;
}
p { margin: 0 0 14px; }
.lede { font-size: 18px; color: var(--dim); }
.fine { font-size: 13px; color: var(--dim); }

/* ------------------------------------------------------------------ hero */

.hero { display: grid; gap: 26px; margin-bottom: 52px; }
.hero-txt h1 { color: var(--ink); }
.cta { margin: 22px 0 8px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.btn {
  display: inline-block;
  font-family: 'Scanner Pixel', monospace; letter-spacing: .08em;
  background: var(--accent); color: var(--btn-ink);
  padding: 11px 20px; border: 2px solid var(--accent);
  text-decoration: none; font-size: 15px;
}
.btn:hover { background: var(--accent-hi); border-color: var(--accent-hi); }
.btn.big { font-size: 17px; padding: 14px 26px; }
.btn.disabled {
  background: transparent; color: var(--dim); border-color: var(--line); cursor: default;
}
.soon {
  font-family: 'Scanner Pixel', monospace; font-size: 12px;
  letter-spacing: .1em; color: var(--amber);
  border: 1px solid var(--amber); padding: 3px 8px;
  /* on a phone this used to break mid-phrase into two bordered scraps */
  white-space: nowrap;
}

/* ---------------------------------------------------------------- blocks */

.law {
  border-left: 3px solid var(--accent);
  background: var(--panel);
  padding: 20px 22px;
}
.law h2 { color: var(--accent); }
.law p { margin: 0; color: var(--dim); }

.feats { display: grid; gap: 18px; }
.feat { background: var(--panel); border: 1px solid var(--line); padding: 18px; }
.feat p { margin: 0; color: var(--dim); font-size: 15px; }

.split { display: grid; gap: 24px; align-items: center; }
.split p { color: var(--dim); }

.ticks { list-style: none; padding: 0; margin: 14px 0 0; }
.ticks li {
  border-left: 3px solid var(--accent);
  background: var(--panel); padding: 10px 14px; margin-bottom: 8px;
  color: var(--dim); font-size: 15px;
}
.ticks li.beta { border-left-color: var(--amber); }

.buybar {
  text-align: center; background: var(--panel);
  border: 1px solid var(--line); padding: 34px 20px;
}
.buybar .cta { justify-content: center; }

.link { font-family: 'Scanner Pixel', monospace; letter-spacing: .06em; text-decoration: none; }

/* ------------------------------------------------------------ code pages */

.crumbs { font-size: 13px; margin-bottom: 18px; }

.code { background: var(--panel); border: 1px solid var(--line); padding: 22px; }
.code h1 {
  color: var(--accent); margin-bottom: 6px;
  font-size: clamp(34px, 8vw, 52px); letter-spacing: .06em;
}
.code .what { font-size: 20px; margin-bottom: 18px; }
.code dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0 0 16px; font-size: 15px; }
.code dt { font-family: 'Scanner Pixel', monospace; font-size: 12px; letter-spacing: .1em; color: var(--dim); padding-top: 3px; }
.code dd { margin: 0; color: var(--ink); }
.note {
  margin: 0; padding: 12px 14px; font-size: 14px; color: var(--dim);
  border-left: 3px solid var(--line); background: var(--panel-2);
}
.note.warn { border-left-color: var(--amber); }

.cta-box {
  margin: 26px 0; padding: 22px;
  border: 1px solid var(--accent); background: var(--panel);
}
.cta-box h2 { color: var(--accent); }
.cta-box p { color: var(--dim); }

.group h2 {
  color: var(--dim); font-size: 15px; letter-spacing: .12em;
  border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-bottom: 12px;
}
.codelist { list-style: none; padding: 0; margin: 0; }
.codelist li { border-bottom: 1px solid var(--line); }
.codelist a {
  display: flex; gap: 14px; padding: 9px 4px;
  text-decoration: none; color: var(--ink); align-items: baseline;
}
.codelist a:hover { background: var(--panel); }
.codelist b {
  font-family: 'Scanner Pixel', monospace; letter-spacing: .06em;
  color: var(--accent); min-width: 74px; font-weight: normal;
}
.codelist span { color: var(--dim); font-size: 15px; }

.pager {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--line);
  font-family: 'Scanner Pixel', monospace; font-size: 13px; letter-spacing: .06em;
}
.pager a { text-decoration: none; }

/* ---------------------------------------------------------------- prose */

.prose h2 { margin-top: 30px; color: var(--accent); }
.prose ul { color: var(--dim); padding-left: 20px; }
.prose li { margin-bottom: 8px; }

/* ---------------------------------------------------------------- footer */

footer {
  border-top: 1px solid var(--line); background: var(--panel);
  padding: 22px 20px; text-align: center;
}
footer p { margin: 0 0 6px; }
footer a { color: var(--dim); }

/* ------------------------------------------------------------ wider than a phone */

@media (min-width: 760px) {
  .hero { grid-template-columns: 1fr 1fr; align-items: center; }
  .feats { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr 1fr; }
  .split.reverse > div:first-child { order: 2; }
}
@media (min-width: 1000px) {
  .feats { grid-template-columns: repeat(3, 1fr); }
}

/* free vs paid, side by side */
.tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 14px; }
.tier { background: var(--panel); border: 1px solid var(--line); padding: 16px 18px; }
.tier.paid { border-color: var(--accent); }
.tier h3 { margin-bottom: 10px; color: var(--accent); }

/* the honest warning about the unsigned download */
.warnbox {
  margin: 18px auto 0; max-width: 640px; text-align: left;
  border-left: 3px solid var(--amber); background: var(--panel);
  padding: 12px 16px;
}
.warnbox b { color: var(--amber); }
.warnbox p { margin-top: 6px; }

/* the key on the thank-you page: big enough to read off a screen */
.keybox {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--line);
  padding: 14px 16px; margin: 18px 0;
}
.keybox code {
  font-size: 1.15rem; letter-spacing: .04em;
  word-break: break-all; color: var(--accent);
}

@media (max-width: 720px) {
  .tiers { grid-template-columns: 1fr; }
}

/* the Linux panel: same shape as the warning box, different colour, because
   it is information rather than a caution */
.warnbox.linuxbox { border-left-color: var(--accent); margin-top: 14px; }
.warnbox.linuxbox b { color: var(--accent); }
.warnbox code {
  background: var(--panel-2); padding: 1px 5px;
  font-size: .92em; word-break: break-word;
}

/* the price tiers */
.tierprice {
  font-family: 'Scanner Pixel', monospace; font-size: 26px;
  color: var(--ink); margin: 4px 0 2px; letter-spacing: .04em;
}
.tierseats {
  font-family: 'Scanner Pixel', monospace; font-size: 13px;
  letter-spacing: .08em; color: var(--accent); margin: 0 0 10px;
}

/* the adapter table: what plugs in, and how far each has been proven */
.adapters { width: 100%; border-collapse: collapse; margin-top: 12px; }
.adapters th {
  text-align: left; font-family: 'Scanner Pixel', monospace;
  font-size: 12px; letter-spacing: .1em; color: var(--dim);
  border-bottom: 1px solid var(--line); padding: 8px 10px 8px 0;
}
.adapters td {
  border-bottom: 1px solid var(--line);
  padding: 12px 10px 12px 0; vertical-align: top; font-size: 15px;
}
.adapters .aname {
  font-family: 'Scanner Pixel', monospace; letter-spacing: .05em;
  color: var(--ink); white-space: nowrap;
}
.adapters .awhat { color: var(--dim); }
.badge {
  display: inline-block; white-space: nowrap;
  font-family: 'Scanner Pixel', monospace; font-size: 11px; letter-spacing: .09em;
  padding: 3px 8px; border: 1px solid currentColor;
}
.badge.proven { color: var(--accent); }
.badge.likely { color: var(--dim); }
.badge.beta   { color: var(--amber); }

@media (max-width: 640px) {
  /* three columns is one too many on a phone: the description drops below */
  .adapters, .adapters tr, .adapters td, .adapters th { display: block; width: 100%; }
  .adapters th { display: none; }
  .adapters td { border: none; padding: 2px 0; }
  .adapters tr { border-bottom: 1px solid var(--line); padding: 12px 0; display: block; }
}

/* the theme gallery ------------------------------------------------------ */
/* Nine screenshots of the SAME screen, so the looks can be compared rather
   than described. Two columns on a desktop, one on a phone: any narrower and
   a dashboard full of small readouts stops being legible, which would defeat
   the point of showing it. */
.themegrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
  margin-top: 20px;
}
.themegrid figure { margin: 0; }
.themegrid img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--line, #d5d8de);
  border-radius: 4px;
}
.themegrid figcaption {
  margin-top: 7px;
  font-size: .9rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.freetag {
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
  background: var(--ok-bg, #e3f4ea);
  color: var(--ok-fg, #17663a);
}
@media (prefers-color-scheme: dark) {
  .themegrid img { border-color: #2a3345; }
  .freetag { background: #17331f; color: #7fe0a4; }
}