apps/desktop/src/renderer/styles/settings/about.css

/* About and data-portability settings. */
/* Astryx convergence: the page container is the kit's SettingsPage now —
   the About-only `.settingsAboutPage` grid (16px rhythm, breaking the shared
   32px page rhythm) is retired. */

.settingsAboutHero {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  padding: 0;
  border: 0;
  /* Not a shape decision: this is a bare layout grid — transparent, borderless,
     unpadded — so it paints no box for a corner to appear on. The declarations
     strip inherited chrome; DESIGN.md §6 governs boxes that render. */
  border-radius: 0;
  background: transparent;
}

.settingsAboutLogo {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  /* Square icon plate — ratio-governed, see --radius-plate. */
  border-radius: var(--radius-plate);
  /* Deliberately NOT migrated to the T4 status-wash family: this is a brand
     icon plate, not a status surface, so no `--{status}-wash` applies. The
     other candidate, `--accent-wash`, is not a like-for-like swap either — it
     is an OPAQUE tint with lightness pinned to 0.96, whereas this is a 10%
     alpha over whatever the plate sits on. Swapping constructions would change
     how the mark reads against the card rather than just its alpha, so the
     glyph and its plate stay coupled here until someone judges the mark
     itself. */
  background: oklch(from var(--brand-deep) l c h / 0.10);
  color: var(--brand-deep);
}

.settingsAboutHeading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2-5);
  margin: 0 0 var(--space-1);
}

.settingsAboutHeading h2 {
  font: var(--maka-text-heading-2);
  margin: 0;
  color: var(--foreground);
  letter-spacing: var(--tracking-normal);
}

/* #1879: both hero pills are Astryx `Badge`s, and neither has a product rule
   left. The version keeps the mono stack — a version string is read digit by
   digit — but takes it from being a `<code>` inside the badge rather than from
   a rule here: `:where(code, kbd, samp, pre)` in maka-tokens.css is the one
   monospace authority in the renderer, and it composes the roles a second time
   against that family, so nothing else about the badge's type moves. The
   channel pill was a hand-tinted `--brand-deep` wash; `blue` is the tinted
   variant that keeps it distinguishable from the neutral version pill. */

.settingsAboutTagline {
  font: var(--maka-text-body);
  margin: 0;
  color: var(--foreground-secondary);
}