/* ==========================================================================
   Eaon — one stylesheet for every page.

   The brief, from getbb.app: not much on the screen. One centred column, a
   near-black ground, one typeface, one strong element (the white button), and
   the product doing the talking. Everything below follows from that.

   What this sheet deliberately does NOT have, so nobody adds it back without
   a reason:
     - cards, tiles, panels or boxes around content. Sections are separated by
       space, and by one faint hairline between big rows. Nothing else.
     - an accent colour. The coral lives in the logo mark and the text
       selection and nowhere else.
     - mono type outside code. Labels, tags and buttons are Inter.
     - scroll reveals, ambient canvases, typing headlines, glows, gradients.
       The only motion is a button press and the product clips themselves.

   Replaces minimal.css (6,195 lines) and pages.css (1,623 lines). Token names
   that the private stats page uses (--bg --fg --muted --line --card --s2..--s7
   --r --r-xs --mono ...) are kept so it still renders.
   ========================================================================== */

:root {
  color-scheme: dark;

  --bg: #111111;
  --fg: #ededed;
  --fg-2: #c9c9c9;
  --muted: #a1a1a1;

  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --line-3: rgba(255, 255, 255, 0.28);

  --card: rgba(255, 255, 255, 0.035);
  --card-2: rgba(255, 255, 255, 0.06);
  --card-3: rgba(255, 255, 255, 0.09);

  --btn-bg: #ededed;
  --btn-fg: #111111;

  --brand: #f17455;
  --brand-dim: rgba(241, 116, 85, 0.14);

  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --s1: 4px;
  --s2: 8px;
  --s3: 16px;
  --s4: 24px;
  --s5: 40px;
  --s6: 64px;
  --s7: 96px;
  --s8: 128px;

  --r-xs: 6px;
  --r-sm: 8px;
  --r: 12px;

  --wrap: 1120px;
  --prose: 720px;
  --head-h: 64px;

  --ease: cubic-bezier(0.23, 1, 0.32, 1);
}

[data-theme="light"] {
  color-scheme: light;

  --bg: #ffffff;
  --fg: #0a0a0a;
  --fg-2: #3f3f3f;
  --muted: #5c5c5c;

  --line: rgba(0, 0, 0, 0.09);
  --line-2: rgba(0, 0, 0, 0.15);
  --line-3: rgba(0, 0, 0, 0.3);

  --card: rgba(0, 0, 0, 0.03);
  --card-2: rgba(0, 0, 0, 0.05);
  --card-3: rgba(0, 0, 0, 0.08);

  --btn-bg: #0a0a0a;
  --btn-fg: #ffffff;

  --brand: #ad3e18;
  --brand-dim: rgba(173, 62, 24, 0.1);
}

/* ------------------------------------------------------------------ base -- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--head-h) + 24px);
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

::selection {
  background: var(--brand);
  color: #fff;
}

a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
  border-radius: 4px;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--fg);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.25rem, 5.6vw, 3.5rem);
  letter-spacing: -0.035em;
  line-height: 1.07;
}

h2 {
  font-size: clamp(1.625rem, 3.2vw, 2.125rem);
}

h3 {
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

h4 {
  font-size: 0.9375rem;
}

p {
  margin: 0 0 1em;
  max-width: 68ch;
  text-wrap: pretty;
}

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

ul,
ol {
  margin: 0 0 1em;
  padding-left: 1.25em;
}

li {
  margin-bottom: 0.4em;
}

b,
strong {
  font-weight: 600;
  color: var(--fg);
}

/* Links inside running text are underlined, quietly. Chrome (nav, buttons,
   footer) is not. */
p a,
li a,
dd a,
td a,
figcaption a {
  text-decoration: underline;
  text-decoration-color: var(--line-3);
  text-underline-offset: 3px;
  transition: text-decoration-color 140ms var(--ease);
}

p a:hover,
li a:hover,
dd a:hover,
td a:hover,
figcaption a:hover {
  text-decoration-color: currentColor;
}

code,
kbd,
pre,
samp {
  font-family: var(--mono);
}

code {
  padding: 0.12em 0.4em;
  border-radius: var(--r-xs);
  background: var(--card-2);
  font-size: 0.86em;
  color: var(--fg);
}

kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0.1em 0.45em;
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  border-radius: var(--r-xs);
  background: var(--card);
  font-size: 0.78em;
  line-height: 1.4;
  text-align: center;
  color: var(--fg-2);
}

pre {
  margin: 0;
}

pre code {
  padding: 0;
  background: none;
  font-size: inherit;
}

hr {
  margin: var(--s6) 0;
  border: 0;
  border-top: 1px solid var(--line);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

caption {
  padding-bottom: var(--s2);
  color: var(--muted);
  font-size: 0.875rem;
  text-align: left;
}

th,
td {
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

th {
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 500;
}

td code {
  white-space: nowrap;
}

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

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 48px);
  margin-inline: auto;
  padding-inline: 24px;
}

.wrap--prose {
  max-width: calc(var(--prose) + 48px);
}

.band {
  padding-block: clamp(40px, 5.5vw, 72px);
}

/* The first thing under a page's intro starts closer to it. */
.intro + .band,
.intro + .part {
  padding-top: 0;
}

.label {
  max-width: none;
  margin: 0 0 var(--s2);
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 500;
}

.lead {
  max-width: 52ch;
  color: var(--muted);
  font-size: 1.125rem;
  line-height: 1.6;
}

.fine {
  max-width: none;
  color: var(--muted);
  font-size: 0.875rem;
}

.fine a {
  text-decoration: underline;
  text-decoration-color: var(--line-3);
  text-underline-offset: 3px;
}

.fine a:hover {
  text-decoration-color: currentColor;
}

/* The top of every page: a pill, a headline, one line, the buttons. */
.intro {
  padding: clamp(36px, 6vw, 72px) 0 clamp(32px, 4.5vw, 56px);
  text-align: center;
}

.intro__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.intro h1 {
  max-width: 20ch;
}

.intro .lead {
  margin: var(--s4) auto 0;
}

.intro .btn-row {
  margin-top: var(--s5);
}

.intro .fine {
  margin-top: var(--s3);
}

.intro .notice {
  margin-bottom: var(--s5);
}

/* -------------------------------------------------------------- header ---- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  -webkit-backdrop-filter: saturate(1.5) blur(16px);
  backdrop-filter: saturate(1.5) blur(16px);
}

.site-head__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s3);
  height: var(--head-h);
}

.site-head__inner > .brand {
  justify-self: start;
}

.site-head__actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: var(--s2);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--fg);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.brand__mark {
  width: 24px;
  height: 24px;
  flex: none;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: 2px;
}

.site-nav a {
  padding: 7px 12px;
  border-radius: var(--r-sm);
  color: var(--muted);
  font-size: 0.9375rem;
  transition: color 140ms var(--ease);
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--fg);
}

.site-head .btn {
  height: 36px;
  padding: 0 14px;
  border-radius: var(--r-sm);
  font-size: 0.875rem;
}

.icon-link {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  color: var(--muted);
  transition: color 140ms var(--ease);
}

.icon-link:hover {
  color: var(--fg);
}

.icon-link svg {
  width: 22px;
  height: 22px;
}

.nav-toggle {
  display: none;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
}

.nav-toggle svg {
  width: 22px;
  height: 22px;
}

.nav-toggle path {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 180ms var(--ease);
}

.site-head.is-open .nav-toggle__a {
  transform: translateY(3.5px) rotate(45deg);
}

.site-head.is-open .nav-toggle__b {
  transform: translateY(-3.5px) rotate(-45deg);
}

@media (max-width: 880px) {
  .site-head__inner {
    display: flex;
  }

  .site-head__actions {
    margin-left: auto;
    gap: var(--s1);
  }

  .nav-toggle {
    display: inline-grid;
  }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    justify-self: stretch;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: var(--s2) 24px var(--s3);
    border-bottom: 1px solid var(--line);
    background: var(--bg);
  }

  .site-head.is-open .site-nav {
    display: flex;
  }

  .site-nav a {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    font-size: 1rem;
  }

  .site-nav a:last-child {
    border-bottom: 0;
  }
}

/* ------------------------------------------------------------- buttons ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: transparent;
  color: var(--fg);
  font: 500 0.9375rem/1 var(--sans);
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 140ms var(--ease), border-color 140ms var(--ease),
    transform 140ms var(--ease);
}

.btn:active {
  transform: scale(0.97);
}

.btn--solid {
  border-color: transparent;
  background: var(--btn-bg);
  color: var(--btn-fg);
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    border-color: var(--line-3);
    background: var(--card-2);
  }

  .btn--solid:hover {
    border-color: transparent;
    background: color-mix(in srgb, var(--btn-bg) 86%, var(--bg));
  }
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.intro .btn-row {
  justify-content: center;
}

/* "New · 2026.6.2: ..." */
.notice {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 4px 14px 4px 4px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.35;
  text-align: left;
  transition: color 140ms var(--ease), border-color 140ms var(--ease);
}

.notice::after {
  content: "\203A";
  flex: none;
  font-size: 1.1em;
  line-height: 1;
}

.notice:hover {
  color: var(--fg);
  border-color: var(--line-3);
}

.tag {
  flex: none;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.5;
}

/* Providers the app routes to. Not customers, and not labelled as such. */
.works {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 28px;
  margin-top: var(--s5);
  color: var(--muted);
  font-size: 0.875rem;
}

@media (max-width: 760px) {
  .works > span {
    flex: 0 0 100%;
    text-align: center;
  }
}

.works img {
  height: 24px;
  width: auto;
  /* Every mark in vendors/ is light-on-transparent: grey on dark, ink on light. */
  filter: grayscale(1) opacity(0.78);
}

[data-theme="light"] .works img {
  filter: grayscale(1) invert(1) opacity(0.72);
}

/* ----------------------------------------------------- app windows (shot) --
   Eaon's own renderer, in a frame at a real window size (--w x --h), scaled to
   fit by pages.js (--fit). It plays only while it is on screen. */

.shot {
  --w: 1100;
  --h: 688;
  position: relative;
  aspect-ratio: var(--w) / var(--h);
  overflow: hidden;
  border-radius: var(--r);
  background: #0d0d0d;
  box-shadow: 0 0 0 1px var(--line-2), 0 24px 48px -28px rgb(0 0 0 / 0.7);
  isolation: isolate;
}

.shot > iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--w) * 1px);
  height: calc(var(--h) * 1px);
  border: 0;
  transform-origin: 0 0;
  transform: scale(var(--fit, 0.5));
  pointer-events: none;
  /* A frame that has not loaded yet is an about:blank page, which Chrome
     paints white under a dark page unless the colour scheme matches it. */
  color-scheme: normal;
}

/* On a phone Eaon plays in a narrow window with its sidebar folded, not a
   desktop window shrunk to a third. The inline --w/--h are overridden. */
@media (max-width: 600px) {
  .shot:has(> iframe[data-src*="demo/desktop/"]),
  .shot:has(> iframe[src*="demo/desktop/"]) {
    --w: 560 !important;
    --h: 700 !important;
  }
}

[data-theme="light"] .shot {
  box-shadow: 0 0 0 1px var(--line-2), 0 24px 48px -28px rgb(0 0 0 / 0.3);
}

.showcase__cap {
  max-width: none;
  margin: var(--s3) 0 0;
  color: var(--muted);
  font-size: 0.875rem;
  text-align: center;
}

.showcase {
  margin-top: var(--s5);
}

/* ------------------------------------------------------- homepage stage --- */

.demo {
  max-width: var(--wrap);
  margin-inline: auto;
}

.demo__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.demo__screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--r);
  background: #111111;
  box-shadow: 0 0 0 1px var(--line-2), 0 24px 48px -28px rgb(0 0 0 / 0.7);
}

[data-theme="light"] .demo__screen {
  box-shadow: 0 0 0 1px var(--line-2), 0 24px 48px -28px rgb(0 0 0 / 0.3);
}

.demo__desk {
  display: block;
  width: 1280px;
  height: 720px;
  border: 0;
  transform-origin: 0 0;
  pointer-events: none;
  color-scheme: normal;
}

/* "Try it yourself" takes clicks and typing. */
.demo__live {
  pointer-events: auto;
}

@media (max-width: 600px) {
  .demo__frame {
    aspect-ratio: 4 / 5;
  }

  .demo__desk {
    width: 560px;
    height: 700px;
  }
}

.demo__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin-top: var(--s4);
}

.demo__tab {
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: 500 0.9375rem/1.2 var(--sans);
  cursor: pointer;
  touch-action: manipulation;
  transition: color 140ms var(--ease), background-color 140ms var(--ease);
}

.demo__tab:hover {
  color: var(--fg);
}

.demo__tab[aria-pressed="true"] {
  background: var(--card-3);
  color: var(--fg);
}

.demo__caption {
  max-width: 60ch;
  min-height: 3.3em;
  margin: var(--s3) auto 0;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.65;
  text-align: center;
}

/* ------------------------------------------------------------- the rows --- */

/* App clip on one side, heading and two sentences on the other, a hairline
   between rows. The clip is always first in the markup; --flip swaps sides. */
.row {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding-block: clamp(40px, 5.5vw, 72px);
  border-top: 1px solid var(--line);
}

.row--flip {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.row--flip .row__art {
  order: 2;
}

.row__text h2 {
  max-width: 14ch;
}

.row__text p {
  margin-top: var(--s3);
  color: var(--muted);
  font-size: 1.0625rem;
  line-height: 1.65;
}

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

.more {
  display: inline-block;
  margin-top: var(--s4);
  color: var(--fg);
  font-size: 0.9375rem;
  font-weight: 500;
  border-bottom: 1px solid var(--line-3);
  transition: border-color 140ms var(--ease);
}

.more:hover {
  border-color: var(--fg);
}

.more::after {
  content: " \2192";
}

@media (max-width: 860px) {
  .row,
  .row--flip {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s5);
  }

  .row--flip .row__art {
    order: 0;
  }

  .row__text h2 {
    max-width: none;
  }
}

/* The CLI row's install box. */
.install {
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
}

.install__tabs {
  display: flex;
  gap: 2px;
  padding: 8px 8px 0;
  border-bottom: 1px solid var(--line);
}

.install__tab {
  margin-bottom: -1px;
  padding: 8px 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font: 500 0.875rem/1.2 var(--sans);
  cursor: pointer;
}

.install__tab[aria-selected="true"] {
  border-bottom-color: var(--fg);
  color: var(--fg);
}

.install__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: 18px 18px 18px 20px;
}

.install__body code {
  padding: 0;
  background: none;
  color: var(--muted);
  font-size: 0.9375rem;
  overflow-x: auto;
  white-space: nowrap;
}

.install__body code b {
  color: var(--fg);
  font-weight: 500;
}

.copy {
  flex: none;
  padding: 6px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--muted);
  font: 500 0.8125rem/1.2 var(--sans);
  cursor: pointer;
  transition: color 140ms var(--ease), border-color 140ms var(--ease);
}

.copy:hover {
  color: var(--fg);
  border-color: var(--line-3);
}

/* ----------------------------------------------------------------- faq ---- */

.faq details {
  border-top: 1px solid var(--line);
}

.faq details:last-child {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: 20px 0;
  color: var(--fg);
  font-size: 1.0625rem;
  font-weight: 500;
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  flex: none;
  color: var(--muted);
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
}

.faq details[open] summary::after {
  content: "\2212";
}

.faq details > p {
  max-width: 60ch;
  margin: 0;
  padding: 0 0 22px;
  color: var(--muted);
}

.faqhead {
  margin-bottom: var(--s5);
}

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

.site-foot {
  padding: var(--s7) 0 var(--s5);
  border-top: 1px solid var(--line);
}

.foot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--s5) var(--s4);
}

/* The dot-matrix "eaon" under the footer. main.js creates it and draws the
   dots; the canvas's colour is the dot colour. It sits flush with the page's
   bottom edge, so it cancels the footer's bottom padding. */
.foot-dots {
  height: clamp(150px, 24vw, 320px);
  margin: var(--s5) 0 calc(-1 * var(--s5));
}

.foot-dots canvas {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--fg);
}

.foot-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.foot-col h4 {
  margin-bottom: 4px;
  color: var(--fg);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.foot-col a {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.4;
  transition: color 140ms var(--ease);
}

.foot-col a:hover {
  color: var(--fg);
}

@media (max-width: 640px) {
  .foot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s5) var(--s3);
  }
}

/* The logo is the first line of its column, level with the headings. */
.foot-col--brand .brand {
  margin-bottom: 6px;
  color: var(--fg);
  font-size: 1.0625rem;
}

.foot-col--brand .brand:hover {
  color: var(--fg);
}

.site-foot__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-top: var(--s7);
  color: var(--muted);
  font-size: 0.875rem;
}

.foot-end {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.foot-ghost {
  color: var(--muted);
}

.foot-ghost:hover {
  color: var(--fg);
}

.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 140ms var(--ease), border-color 140ms var(--ease);
}

.theme-toggle:hover {
  color: var(--fg);
  border-color: var(--line-3);
}

.theme-toggle svg {
  width: 15px;
  height: 15px;
}

.theme-toggle .icon-moon,
[data-theme="light"] .theme-toggle .icon-sun {
  display: none;
}

[data-theme="light"] .theme-toggle .icon-moon {
  display: block;
}

/* ===========================================================================
   Inner pages
   =========================================================================== */

/* A short heading block above a section's content. */
.sec-head {
  max-width: 44rem;
  margin-bottom: var(--s6);
}

.sec-head p:not(.label) {
  margin-top: var(--s3);
  color: var(--muted);
  font-size: 1.0625rem;
}

.sec-head--center {
  margin-inline: auto;
  text-align: center;
}

.sec-head--center p {
  margin-inline: auto;
}

.sec-head--center .btn-row {
  justify-content: center;
  margin-top: var(--s4);
}

.pg-anchor {
  scroll-margin-top: calc(var(--head-h) + 16px);
}

/* ---- features: text beside a clip that holds still while the list scrolls -- */

.part__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--s4);
  border-radius: 14px;
}

.feat {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.feat--flip {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.feat--flip > .feat__show {
  order: -1;
}

.feat__show {
  position: sticky;
  top: calc(var(--head-h) + 32px);
}

.feat__show .showcase {
  margin-top: 0;
}

.feat__show .showcase__cap {
  text-align: left;
}

.feat__text h2 {
  max-width: 16ch;
}

.feat__lead {
  margin: var(--s3) 0 0;
  color: var(--muted);
  font-size: 1.0625rem;
}

.feat__list {
  display: grid;
  gap: var(--s4);
  margin-top: var(--s5);
}

.item h3 {
  font-size: 1rem;
}

.item p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s5);
}

.items:has(> :nth-child(4):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 960px) {
  .feat,
  .feat--flip {
    grid-template-columns: minmax(0, 1fr);
  }

  .feat--flip > .feat__show {
    order: 0;
  }

  .feat__show {
    position: static;
  }

  .items,
  .items:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .items,
  .items:has(> :nth-child(4):last-child) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The page's own index: plain links, not a sticky pill strip. */
.subnav {
  padding: 0 24px var(--s6);
}

.subnav__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 4px;
  max-width: 760px;
  margin-inline: auto;
}

.subnav a {
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.9375rem;
  transition: color 140ms var(--ease);
}

.subnav a:hover,
.subnav a[aria-current="true"] {
  color: var(--fg);
}

/* On a phone the index is one row you swipe, not four lines of links. */
@media (max-width: 700px) {
  .subnav__inner {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .subnav__inner::-webkit-scrollbar {
    display: none;
  }

  .subnav a {
    flex: none;
  }
}

.subnav a[aria-current="true"] {
  background: var(--card-3);
}

/* The closing "get it" block. */
.getit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s5);
  padding-top: var(--s6);
  border-top: 1px solid var(--line);
}

.getit p {
  margin-top: var(--s3);
  color: var(--muted);
  max-width: 52ch;
}

.getit .download__req {
  margin: var(--s3) 0 0;
  text-align: right;
}

@media (max-width: 900px) {
  .getit {
    grid-template-columns: minmax(0, 1fr);
  }

  .getit .download__req {
    text-align: left;
  }
}

/* ---- the split download button ---- */

.dlsplit {
  position: relative;
  display: inline-block;
}

.dlsplit__main {
  display: flex;
}

.dlsplit__primary {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.dlsplit__toggle {
  display: grid;
  place-items: center;
  width: 40px;
  height: 42px;
  padding: 0;
  border: 0;
  border-left: 1px solid color-mix(in srgb, var(--btn-fg) 22%, transparent);
  border-radius: 0 10px 10px 0;
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
}

.dlsplit__toggle svg {
  width: 16px;
  height: 16px;
}

.dlsplit__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 5;
  display: none;
  min-width: 100%;
  padding: 6px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--bg);
  box-shadow: 0 20px 40px -20px rgb(0 0 0 / 0.6);
}

.dlsplit.is-open .dlsplit__menu {
  display: block;
}

.dlsplit__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: 0.9375rem;
  white-space: nowrap;
}

.dlsplit__item:hover {
  background: var(--card-2);
}

.dlsplit__size {
  color: var(--muted);
  font-size: 0.8125rem;
}

/* Revealed only by [data-dl-active="windows"], an attribute main.js writes
   after OS detection. Name and value are a CSS-to-JS contract. */
.dlsplit__warn {
  display: none;
  max-width: 60ch;
  margin-top: var(--s3);
  color: var(--muted);
  font-size: 0.875rem;
}

[data-dl-active="windows"] .dlsplit__warn {
  display: block;
}

.download__req {
  color: var(--muted);
  font-size: 0.875rem;
}

.download__req b {
  color: var(--fg-2);
  font-weight: 500;
}

/* ---- products ---- */

.prodx__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--s5);
}

.prodx__head p {
  margin-top: var(--s3);
  color: var(--muted);
  font-size: 1.0625rem;
}

.prodx__fine {
  margin: var(--s5) 0 0;
  color: var(--muted);
  font-size: 0.875rem;
  text-align: center;
}

@media (max-width: 860px) {
  .prodx__head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
}

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--s4) var(--s5);
  margin: var(--s6) 0 0;
}

.facts dt {
  color: var(--muted);
  font-size: 0.8125rem;
}

.facts dd {
  margin: 2px 0 0;
  color: var(--fg);
  font-size: 0.9375rem;
}

.also {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s6);
}

.also__card h3 {
  font-size: 1.25rem;
}

.also__card p {
  margin-top: var(--s2);
  color: var(--muted);
}

.also__card .cmd {
  margin-top: var(--s4);
}

.also__link {
  margin-top: var(--s3) !important;
  font-size: 0.875rem;
}

@media (max-width: 760px) {
  .also {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s5);
  }
}

/* ---- command boxes ---- */

.cmd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: 10px 10px 10px 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--card);
}

.cmd__text {
  min-width: 0;
  overflow-x: auto;
  color: var(--fg);
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 1.6;
}

code.cmd__text {
  padding: 0;
  background: none;
  white-space: nowrap;
}

.cmd__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--muted);
  font: 500 0.8125rem/1.2 var(--sans);
  cursor: pointer;
  transition: color 140ms var(--ease), background-color 140ms var(--ease);
}

.cmd__btn:hover {
  color: var(--fg);
  background: var(--card-2);
}

.cmd__btn.is-copied {
  color: var(--fg);
}

.cmd__ic {
  width: 14px;
  height: 14px;
}

/* A code block with a header: language on the left, Copy on the right. */
.cmd--block {
  display: block;
  margin: var(--s3) 0;
  padding: 0;
  overflow: hidden;
}

.cmd__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px 4px 16px;
  border-bottom: 1px solid var(--line);
}

.cmd__lang {
  color: var(--muted);
  font-size: 0.8125rem;
}

.cmd--block .cmd__text {
  display: block;
  margin: 0;
  padding: 16px;
  white-space: pre;
}

.t-k {
  color: var(--fg);
}

.t-s {
  color: #f6b39e;
}

.t-c {
  color: var(--muted);
}

.t-p {
  color: var(--fg-2);
}

[data-theme="light"] .t-s {
  color: #a3401f;
}

/* Language tabs above a group of code blocks. */
.samples__tabs {
  display: flex;
  gap: 2px;
  margin-bottom: var(--s2);
}

.samples__tab {
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: 500 0.875rem/1.2 var(--sans);
  cursor: pointer;
}

.samples__tab[aria-selected="true"] {
  background: var(--card-3);
  color: var(--fg);
}

.samples .cmd--block {
  margin-top: 0;
}

/* ---- docs ---- */

.starts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s5);
  max-width: 880px;
  margin: var(--s6) auto 0;
  text-align: left;
}

.start {
  display: block;
  color: inherit;
}

.start__ic {
  display: none;
}

.start h2 {
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
}

.start p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.start__go {
  display: inline-block;
  margin-top: var(--s2);
  font-size: 0.9375rem;
  font-weight: 500;
  border-bottom: 1px solid var(--line-3);
}

@media (max-width: 760px) {
  .starts {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s4);
  }
}

.docs {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: var(--s7);
  align-items: start;
}

.docs__side {
  position: sticky;
  top: calc(var(--head-h) + 16px);
  max-height: calc(100vh - var(--head-h) - 40px);
  padding-right: var(--s2);
  overflow-y: auto;
  scrollbar-width: thin;
}

.docs__nav {
  display: flex;
  flex-direction: column;
}

.docs__filter {
  width: 100%;
  margin: 0 0 var(--s4);
  padding: 9px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: 0.875rem;
}

.docs__filter::placeholder {
  color: var(--muted);
}

.docs__nav-group {
  max-width: none;
  margin: var(--s4) 0 var(--s2);
  padding-left: 10px;
  color: var(--fg);
  font-size: 0.8125rem;
  font-weight: 600;
}

.docs__nav-group:first-of-type {
  margin-top: 0;
}

.docs__nav-link {
  padding: 5px 10px;
  border-radius: var(--r-xs);
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.4;
  transition: color 140ms var(--ease), background-color 140ms var(--ease);
}

.docs__nav-link:hover {
  color: var(--fg);
}

.docs__nav-link.is-current {
  background: var(--card-3);
  color: var(--fg);
}

.docs__body {
  min-width: 0;
  max-width: 76ch;
}

.docs__part {
  max-width: none;
  margin: var(--s7) 0 var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 500;
}

.docs__part:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.docs__section {
  padding-top: var(--s7);
  scroll-margin-top: calc(var(--head-h) + 16px);
}

.docs__part + .docs__section,
.docs__section:first-child {
  padding-top: 0;
}

.docs__section h2 {
  position: relative;
  margin-bottom: var(--s3);
}

.docs__section h3 {
  margin: var(--s5) 0 var(--s2);
}

.docs__section p,
.docs__section li {
  color: var(--fg-2);
}

.docs__anchor {
  position: absolute;
  left: -1.1em;
  top: 0;
  padding-right: 0.3em;
  color: var(--muted);
  font-weight: 400;
  opacity: 0;
  transition: opacity 140ms var(--ease);
}

.docs__section h2:hover .docs__anchor,
.docs__anchor:focus {
  opacity: 1;
}

.docs__ol,
.docs__ul {
  margin: var(--s3) 0;
}

.docs__note {
  margin: var(--s4) 0;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r);
}

.docs__note p {
  margin: 0;
  color: var(--fg-2);
  font-size: 0.9375rem;
}

.docs__note--warn {
  border-color: rgb(242 193 78 / 0.4);
}

.docs__steps {
  display: grid;
  gap: var(--s4);
  margin: var(--s4) 0;
  padding: 0;
  list-style: none;
}

.docs__step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: var(--s3);
  margin: 0;
}

.docs__step h3 {
  margin: 2px 0 var(--s2);
}

.docs__step-n {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  color: var(--fg);
  font-size: 0.8125rem;
  font-weight: 600;
}

.docs .tablewrap {
  margin: var(--s4) 0;
  overflow-x: auto;
}

.docs__shot {
  margin: var(--s5) 0 0;
}

.docs__shot figcaption {
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.875rem;
}

.docs__foot {
  margin-top: var(--s7);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.deflist {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 8px var(--s5);
  margin: var(--s4) 0;
}

.deflist dt {
  color: var(--muted);
}

.deflist dd {
  margin: 0;
}

/* Inline code never pushes a narrow screen sideways. */
p code,
li code,
dd code {
  overflow-wrap: anywhere;
}

@media (max-width: 480px) {
  .deflist {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .deflist dd {
    margin-bottom: var(--s3);
  }
}

.ep {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: var(--s3) 0 var(--s4);
  padding: 10px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  font-family: var(--mono);
  font-size: 0.875rem;
}

.ep__m {
  padding: 1px 8px;
  border-radius: var(--r-xs);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.75rem;
  font-weight: 600;
}

.ep__m--get {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line-3);
  color: var(--fg);
}

.ep__p {
  color: var(--fg);
}

.ep__auth {
  margin-left: auto;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.8125rem;
}

.req,
.opt {
  margin-left: 8px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 400;
}

@media (max-width: 1000px) {
  .docs {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s5);
  }

  .docs__side {
    position: static;
    max-height: none;
    padding-right: 0;
  }

  .docs__filter,
  .docs__anchor {
    display: none;
  }

  /* A short scroll area, not a 14-line cloud of links above the content. */
  .docs__nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2px 8px;
    max-height: 176px;
    padding-bottom: var(--s3);
    overflow-y: auto;
    border-bottom: 1px solid var(--line);
  }

  .docs__nav-group {
    flex-basis: 100%;
    margin: var(--s3) 0 0;
    padding-left: 0;
  }

  .docs__nav-link {
    padding: 4px 8px;
  }
}

/* ---- changelog ---- */

.clog-filter {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin-top: var(--s5);
}

.clog-filter button {
  padding: 7px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: 500 0.9375rem/1.2 var(--sans);
  cursor: pointer;
}

.clog-filter button:hover {
  color: var(--fg);
}

.clog-filter button[aria-pressed="true"] {
  background: var(--card-3);
  color: var(--fg);
}

.clog-filter b {
  margin-left: 4px;
  color: var(--muted);
  font-weight: 400;
}

.clog-app__head {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin-bottom: var(--s5);
}

.clog-app__head img {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 12px;
}

.clog-app__head p:not(.label) {
  margin-top: 4px;
  color: var(--muted);
}

.latest__card {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  margin-bottom: var(--s7);
}

.latest__top {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s3);
}

.latest__top img {
  width: 36px;
  height: 36px;
  border-radius: 9px;
}

.latest__top time {
  color: var(--muted);
  font-size: 0.875rem;
}

.latest__body ul {
  margin: 0 0 var(--s4);
  color: var(--fg-2);
}

@media (max-width: 860px) {
  .latest__card {
    grid-template-columns: minmax(0, 1fr);
  }
}

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

.rel {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--s5);
  padding: var(--s6) 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: calc(var(--head-h) + 8px);
}

.rel__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--muted);
  font-size: 0.875rem;
}

.rel__app {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.rel__app img {
  border-radius: 5px;
}

.rel__main {
  min-width: 0;
  max-width: 76ch;
}

.rel__ver {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s3);
  font-size: 1.5rem;
}

.rel__badge {
  padding: 2px 10px;
  border: 1px solid var(--line-3);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0;
}

.rel__badge--latest {
  border-color: transparent;
  background: var(--btn-bg);
  color: var(--btn-fg);
}

.rel__notes {
  color: var(--fg-2);
}

.rel__notes h3 {
  margin: var(--s4) 0 var(--s2);
  font-size: 1rem;
}

.rel__notes > :first-child {
  margin-top: 0;
}

.rel__notes.is-folded {
  max-height: 280px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
  mask-image: linear-gradient(#000 55%, transparent);
}

.rel__table {
  margin: var(--s3) 0;
  overflow-x: auto;
}

.rel__more {
  margin-top: var(--s3);
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line-3);
  background: transparent;
  color: var(--fg);
  font: 500 0.9375rem/1.4 var(--sans);
  cursor: pointer;
}

.rel__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px var(--s3);
  margin-top: var(--s4);
}

.rel__dl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  font-size: 0.875rem;
  font-weight: 500;
  transition: border-color 140ms var(--ease);
}

.rel__dl:hover {
  border-color: var(--line-3);
}

.rel__dl svg {
  width: 14px;
  height: 14px;
}

.rel__dl span {
  color: var(--muted);
  font-weight: 400;
}

.rel__gh {
  color: var(--muted);
  font-size: 0.875rem;
}

.rel__gh:hover {
  color: var(--fg);
}

.rel__src {
  color: var(--muted);
}

.clog-more {
  margin-top: var(--s5);
  font-size: 0.9375rem;
}

@media (max-width: 760px) {
  .rel {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s3);
    padding: var(--s5) 0;
  }

  .rel__meta {
    flex-direction: row;
    align-items: center;
    gap: var(--s3);
  }
}

/* ---- download ---- */

.phead {
  padding: clamp(56px, 9vw, 104px) 0 clamp(24px, 4vw, 48px);
  text-align: center;
}

.phead h1 {
  max-width: 18ch;
  margin-inline: auto;
}

.phead__lead {
  max-width: 52ch;
  margin: var(--s4) auto 0;
  color: var(--muted);
  font-size: 1.125rem;
}

.eyebrow {
  display: block;
  max-width: none;
  margin-bottom: var(--s3);
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 500;
}

.trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px var(--s4);
  margin-top: var(--s5);
  color: var(--muted);
  font-size: 0.9375rem;
}

.dlsec {
  padding-block: clamp(32px, 5vw, 56px);
}

.dlsec > .wrap {
  max-width: calc(var(--prose) + 48px);
}

.dlsec__head {
  margin-bottom: var(--s4);
}

.dlsec__head p {
  margin-top: var(--s2);
  color: var(--muted);
}

.dlrow {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: 18px 0;
  border-top: 1px solid var(--line);
}

.dlrow:last-of-type {
  border-bottom: 1px solid var(--line);
}

.dlrow > div {
  flex: 1;
  min-width: 0;
}

.dlrow__plat {
  color: var(--fg);
  font-weight: 500;
}

.dlrow__meta {
  color: var(--muted);
  font-size: 0.875rem;
}

.dlrow .btn {
  height: 36px;
  font-size: 0.875rem;
}

.dlsec__note {
  margin-top: var(--s4);
  color: var(--muted);
  font-size: 0.9375rem;
}

.dlsec .cmd--block {
  margin-top: var(--s3);
}

.head {
  max-width: var(--prose);
  margin-inline: auto;
}

.head p {
  margin-top: var(--s2);
  color: var(--muted);
}

/* ---- privacy ---- */

.legal__inner {
  max-width: var(--prose);
  margin-inline: auto;
}

.legal__head {
  margin-bottom: var(--s6);
}

.legal__title {
  margin-bottom: var(--s2);
}

.legal__meta {
  color: var(--muted);
  font-size: 0.9375rem;
}

.legal__summary {
  margin-bottom: var(--s6);
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--line);
}

.legal__summary-title {
  margin-bottom: var(--s3);
  font-size: 1.125rem;
}

.legal__lead {
  color: var(--fg-2);
  font-size: 1.0625rem;
}

.legal__list {
  margin: var(--s3) 0;
}

.legal h2 {
  margin: var(--s7) 0 var(--s3);
  font-size: 1.5rem;
}

.legal h3 {
  margin: var(--s5) 0 var(--s2);
}

.legal p,
.legal li {
  color: var(--fg-2);
}

/* ---- 404 ---- */

.nf {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: var(--s6) 24px;
  text-align: center;
}

.nf__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 520px;
}

.nf__mark svg {
  width: 40px;
  height: 40px;
  margin-bottom: var(--s5);
}

.nf h1 {
  font-size: clamp(1.875rem, 4vw, 2.5rem);
}

.nf__lead {
  margin-top: var(--s3);
  color: var(--muted);
}

.nf__acts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: var(--s5);
}

.nf__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 20px;
  margin-top: var(--s6);
  color: var(--muted);
  font-size: 0.9375rem;
}

.nf__links a:hover {
  color: var(--fg);
}

/* A down arrow fixed to the foot of the first screen, for a page whose top
   ends in empty space. It scrolls to the next section and goes once you do. */
.scroll-cue {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 40;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: -22px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--muted);
  transition: opacity 240ms var(--ease), transform 240ms var(--ease), visibility 240ms,
    color 140ms var(--ease), border-color 140ms var(--ease);
}

.scroll-cue:hover {
  color: var(--fg);
  border-color: var(--line-3);
}

.scroll-cue svg {
  width: 20px;
  height: 20px;
}

.scroll-cue.is-gone {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
}

@media (prefers-reduced-motion: no-preference) {
  .scroll-cue svg {
    animation: cue-bob 2.2s ease-in-out infinite;
  }
}

@keyframes cue-bob {
  0%,
  100% {
    transform: translateY(-2px);
  }
  50% {
    transform: translateY(3px);
  }
}

/* ------------------------------------------------------ reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------- Brand kit (brand.html) ---------------- */

.kit {
  padding-block: clamp(40px, 5.5vw, 72px);
  border-top: 1px solid var(--line);
}

.kit__head {
  max-width: var(--prose);
}

.kit__head p {
  margin-top: var(--s3);
  color: var(--muted);
  font-size: 1.0625rem;
  line-height: 1.65;
}

.kit__head p a {
  text-decoration: underline;
  text-decoration-color: var(--line-3);
  text-underline-offset: 3px;
}

.kit__head p a:hover {
  text-decoration-color: currentColor;
}

.kit h3 {
  margin: var(--s5) 0 0;
  font-size: 1rem;
  font-weight: 500;
}

.kit h3 + .specs {
  margin-top: var(--s3);
}

/* A mark on the ground it is meant for, with where to get it underneath. The
   grounds are literal: Ink and Paper stay Ink and Paper in either theme. */
.specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s5) var(--s4);
  margin-top: var(--s5);
}

.specs--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.specs--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.spec {
  min-width: 0;
  margin: 0;
}

.spec__panel {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  padding: var(--s4);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: #111111;
}

.spec__panel--paper {
  background: #ffffff;
}

/* Marks that are not the Eaon logo say so on the panel itself, so a screenshot
   of one still carries the label. */
.spec__tag {
  position: absolute;
  top: var(--s2);
  left: var(--s2);
  padding: 3px 10px;
  border-radius: 999px;
  background: #ededed;
  color: #111111;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
}

.spec__panel--paper .spec__tag {
  background: #111111;
  color: #ffffff;
}

.kit__head .kit__notice {
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line-3);
  border-radius: var(--r);
  color: var(--fg-2);
}

.kit__notice b {
  color: var(--fg);
  font-weight: 600;
}

.kit__notice a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.spec__panel img {
  display: block;
  width: auto;
  max-width: 100%;
  height: var(--h, 96px);
}

.spec__shot {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: #111111;
}

.spec__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px var(--s3);
  margin-top: var(--s2);
  font-size: 0.9375rem;
}

.spec__name {
  font-weight: 500;
}

.spec__links {
  display: flex;
  gap: var(--s3);
  color: var(--muted);
}

.spec__links a {
  text-decoration: underline;
  text-decoration-color: var(--line-3);
  text-underline-offset: 3px;
}

.spec__links a:hover {
  color: var(--fg);
  text-decoration-color: currentColor;
}

.spec__note {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Colour */
.swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr));
  gap: var(--s4) var(--s3);
  margin-top: var(--s4);
}

.swatch {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.swatch__chip {
  height: 96px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
}

.swatch__name {
  margin-top: var(--s2);
  font-weight: 500;
}

.swatch__use {
  flex: 1;
  margin: 2px 0 var(--s2);
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.swatch .cmd {
  padding: 3px 4px 3px 12px;
}

.swatch .cmd__text {
  font-size: 0.8125rem;
}

.swatch__vals {
  margin-top: var(--s1);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.6;
}

.kit__files {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  margin-top: var(--s4);
  color: var(--muted);
  font-size: 0.9375rem;
}

.kit__files a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--line-3);
  text-underline-offset: 3px;
}

.kit__files a:hover {
  text-decoration-color: currentColor;
}

/* Type */
.typespec {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s5) var(--s4);
  margin-top: var(--s5);
}

.typespec__big {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
}

.typespec__sample {
  margin-top: var(--s3);
  color: var(--muted);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.typespec__mono {
  font-weight: 500;
  font-family: var(--mono);
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  line-height: 1.3;
}

/* Rules: one per row, hairlines between */
.rules {
  max-width: var(--prose);
  margin: var(--s4) 0 0;
  padding: 0;
  list-style: none;
}

.rules li {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: var(--s3);
  padding: 14px 0;
  border-top: 1px solid var(--line);
  line-height: 1.55;
}

.rules li:last-child {
  border-bottom: 1px solid var(--line);
}

.rules b {
  font-weight: 500;
}

.rules span {
  color: var(--muted);
}

@media (max-width: 760px) {
  .specs,
  .specs--3,
  .typespec {
    grid-template-columns: minmax(0, 1fr);
  }

  .specs--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rules li {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

/* ===========================================================================
   Security (security.html)
   =========================================================================== */

.sec-link {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--line-3);
  text-underline-offset: 3px;
}

.sec-link:hover {
  text-decoration-color: currentColor;
}

.sec-docs {
  margin-top: var(--s5);
}

/* The roadmap: the plan on the left, its status on the right. */
.rules--status li {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s3);
}