:root {
  color-scheme: dark;
  --bg-primary: #060608;
  --bg-secondary: #0c0c0f;
  --bg-tertiary: #111115;
  --border-color: #17171e;
  --text-primary: #949aab;
  --text-secondary: #5f636e;
  --text-heading: #f4f4f7;
  --accent-color: #4f46e5;
  --accent-dim: rgba(79, 70, 229, 0.08);
  --max-width: 1200px;
  --mono-font: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --sans-font: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
  --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--sans-font);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background-color 400ms ease, color 400ms ease;
}

body.modal-open {
  overflow: hidden;
}

#scene-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.9s ease;
}

/* Revealed once three.js has drawn its first frame, so the background eases
   in instead of popping after the page has already painted. */
#scene-canvas.is-ready {
  opacity: 0.9;
}

.skip-link,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.skip-link:focus {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 3000;
  width: auto;
  height: auto;
  clip: auto;
  padding: 0.75rem 1rem;
  background: var(--text-heading);
  color: var(--bg-primary);
  text-decoration: none;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: color-mix(in srgb, var(--bg-primary) 88%, transparent);
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22), 0 1px 0 rgba(255, 255, 255, 0.018) inset;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.nav {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1.5rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand {
  color: var(--text-heading);
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.nav-menu {
  display: flex;
  gap: 2.5rem;
  list-style: none;
}

.nav-menu a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: var(--transition);
}

.nav-menu a:hover,
.nav-menu a.active {
  color: var(--text-heading);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 5px;
  border: 0;
  background: none;
  cursor: pointer;
}

.nav-toggle span:not(.sr-only) {
  width: 18px;
  height: 1.5px;
  background-color: var(--text-primary);
  transition: var(--transition);
}

.section {
  max-width: var(--max-width);
  min-height: 90vh;
  margin: 0 auto;
  padding: 10rem 2rem 6rem;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 4rem;
  align-items: start;
  border-bottom: 1px solid var(--border-color);
}


.hero {
  align-items: center;
}

.catalog-page {
  max-width: 1440px;
  grid-template-columns: 1fr;
}

.catalog-page .section-content {
  max-width: none;
}

.section-index {
  position: sticky;
  top: 8rem;
  color: var(--text-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.section-number {
  display: block;
  color: var(--accent-color);
  font-family: var(--mono-font);
  font-weight: 500;
}

.section-label {
  display: block;
  margin-top: 0.5rem;
  color: var(--text-heading);
}

.section-index::after {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  margin-top: 1rem;
  background-color: var(--border-color);
}

.section-content {
  width: 100%;
}

.markdown h1 {
  margin-bottom: 2rem;
  color: var(--text-heading);
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.markdown h2,
.contact-panel h2 {
  margin: 2rem 0 1.5rem;
  color: var(--text-heading);
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.12;
}

.markdown h3 {
  margin: 3rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-heading);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.markdown p,
.contact-panel p {
  max-width: 65ch;
  margin-bottom: 1.5rem;
  color: var(--text-primary);
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.markdown a,
.button {
  display: inline-block;
  margin-top: 2rem;
  margin-right: 1rem;
  padding: 0.8rem 1.6rem;
  border: 1px solid var(--border-color);
  border-radius: 2px;
  background: transparent;
  color: var(--text-heading);
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: var(--transition);
}

.hero .markdown a:first-of-type,
.button {
  border-color: var(--accent-color);
  background: var(--accent-dim);
}

.markdown a:hover,
.button:hover {
  border-color: var(--accent-color);
  background: var(--accent-color);
  color: #ffffff;
  box-shadow: 0 4px 20px rgba(79, 70, 229, 0.2);
}

.button.secondary {
  border-color: var(--border-color);
  background: transparent;
  color: var(--text-secondary);
}

.markdown ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  padding-left: 0;
  list-style: none;
}

.markdown li,
.contact-panel {
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: rgba(12, 12, 15, 0.68);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: var(--transition);
}

@supports not (background: color-mix(in srgb, black, white)) {
  .site-header {
    background: rgba(6, 6, 8, 0.88);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

.markdown li {
  position: relative;
  padding: 1.2rem;
  color: var(--text-primary);
  font-size: 0.95rem;
}

.markdown li:hover,
.contact-panel:hover {
  border-color: var(--accent-color);
  background: rgba(12, 12, 15, 0.86);
}

.markdown li strong {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--text-heading);
  font-size: 0.95rem;
}

.markdown code {
  display: inline-block;
  margin-top: 0.5rem;
  margin-right: 0.5rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--border-color);
  border-radius: 2px;
  background: var(--bg-tertiary);
  color: var(--text-heading);
  font-family: var(--mono-font);
  font-size: 0.75rem;
}

/* Evidence row under the hero. Opts out of the boxed list grid the rest of
   the landing page uses -- these are facts, not cards. */
.proof-strip {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--border-color);
}

.proof-strip ul {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
  margin-bottom: 0;
}

.proof-strip li,
.proof-strip li:hover {
  padding: 0;
  border: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: #b8bdca;
  font-size: 0.94rem;
  line-height: 1.65;
}

.proof-strip li strong {
  margin-bottom: 0.9rem;
  color: var(--accent-color);
  font-family: var(--mono-font);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.proof-strip li strong::before {
  content: '';
  display: block;
  width: 20px;
  height: 1px;
  margin-bottom: 0.8rem;
  background: var(--accent-color);
}

/* A quiet text link, not another button. */
.hero .proof-strip a,
.proof-strip a {
  margin-top: 2.25rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-secondary);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
}

.proof-strip a:hover {
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--text-heading);
}

.card-grid-source h3 {
  margin-top: 2rem;
}

#portfolio .markdown h1,
#portfolio .markdown h3,
#portfolio .markdown p {
  color: #f4f4f7;
}

#portfolio .card-grid-source h3 + p {
  color: #b8bdca;
}

.card-grid-source h3 + p {
  max-width: none;
  margin-top: -1rem;
  margin-bottom: 1.5rem;
  padding: 0 1.2rem 1.2rem;
  border: 1px solid var(--border-color);
  border-top: 0;
  border-radius: 0 0 4px 4px;
  background: rgba(12, 12, 15, 0.68);
}

.card-grid-source h3 {
  padding: 1.2rem 1.2rem 0.7rem;
  border: 1px solid var(--border-color);
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  background: rgba(12, 12, 15, 0.68);
}

#products .markdown ul {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}

#products .markdown li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 150px;
  text-align: center;
}

#products .markdown li strong a,
#products .markdown li strong a:hover {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: none;
}

#products .markdown li strong a:hover {
  color: var(--accent-color);
}

.software-catalog,
.store-catalog {
  margin-top: 4rem;
}

.catalog-head {
  margin-bottom: 1.5rem;
}

.catalog-controls {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(150px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.catalog-controls label {
  display: grid;
  gap: 0.45rem;
  color: var(--text-secondary);
  font-family: var(--mono-font);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.catalog-controls input,
.catalog-controls select {
  width: 100%;
  min-height: 44px;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border-color);
  border-radius: 3px;
  background: rgba(12, 12, 15, 0.78);
  color: var(--text-heading);
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
}

.catalog-controls input:focus,
.catalog-controls select:focus {
  outline: 1px solid var(--accent-color);
  outline-offset: 2px;
}

.software-grid {
  display: grid;
  gap: 1rem;
}

.software-card,
.store-card {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 1.25rem;
  padding: 1rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: rgba(12, 12, 15, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: var(--transition);
}

.software-card:hover,
.store-card:hover {
  border-color: var(--accent-color);
  background: rgba(12, 12, 15, 0.88);
}

.software-thumb {
  position: relative;
  overflow: hidden;
  min-height: 124px;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  /* Two rows -- icon over mark. `align-content` keeps the pair centred as a
     block; without it the auto rows stretch apart to fill the tile. */
  align-content: center;
  gap: 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: 3px;
  background: var(--bg-tertiary);
  color: var(--text-heading);
  font-family: var(--mono-font);
  font-size: 1.4rem;
  letter-spacing: 0.08em;
}

.software-card-body h2 {
  margin: 0.65rem 0 0.75rem;
  color: var(--text-heading);
  font-size: 1.45rem;
  letter-spacing: -0.03em;
  line-height: 1.12;
}

.store-grid {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.store-card h2 {
  margin: 0.65rem 0 0.75rem;
  color: var(--text-heading);
  font-size: 1.45rem;
  letter-spacing: -0.03em;
  line-height: 1.12;
}

.store-card p {
  max-width: 72ch;
  margin-bottom: 1rem;
  color: var(--text-primary);
}

.software-card-body p {
  max-width: 72ch;
  margin-bottom: 1rem;
  color: var(--text-primary);
}

.software-card-topline,
.software-tags,
.software-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.software-status,
.software-license,
.software-tags > span,
.software-links > span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  color: var(--text-secondary);
  font-family: var(--mono-font);
  font-size: 0.7rem;
}

.software-status {
  border-color: var(--accent-color);
  color: var(--text-heading);
}

.software-links {
  margin-top: 1.1rem;
}

.software-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 2px;
  color: var(--text-heading);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-decoration: none;
  text-transform: uppercase;
  transition: var(--transition);
}

.software-status span,
.software-license span,
.software-tags > span span,
.software-links a span,
.software-links > span span {
  color: inherit;
}

.software-links a:hover {
  border-color: var(--accent-color);
  background: var(--accent-color);
  color: #ffffff;
}

.software-empty {
  padding: 1.25rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: rgba(12, 12, 15, 0.68);
  color: var(--text-secondary);
}

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 390px;
  gap: 3rem;
  align-items: start;
}

.contact-panel {
  padding: 2.5rem;
}

.eyebrow,
.fine-print {
  color: var(--text-secondary);
  font-family: var(--mono-font);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.fine-print {
  margin-top: 1rem;
  font-family: var(--sans-font);
  font-size: 0.8rem;
  letter-spacing: normal;
  text-transform: none;
}

.site-footer {
  max-width: none;
  margin: 0;
  padding: 4rem 2rem;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  border-top: 1px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.text-button {
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font: inherit;
  transition: var(--transition);
}

.text-button:hover {
  color: var(--text-heading);
}

.cookie-banner {
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  z-index: 1000;
  width: 380px;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 1.5rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: rgba(12, 12, 15, 0.9);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.cookie-banner.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.cookie-banner p {
  color: var(--text-primary);
  font-size: 0.8rem;
  line-height: 1.5;
}

.cookie-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.8rem;
}

.cookie-actions .button {
  margin: 0;
  padding: 0.5rem 1rem;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 6, 8, 0.85);
  opacity: 1;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.modal[hidden] {
  display: none;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
}

.modal-card {
  position: relative;
  z-index: 1;
  width: calc(100% - 2rem);
  max-width: 750px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 3.5rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--bg-secondary);
}

.modal-card::-webkit-scrollbar {
  width: 6px;
}

.modal-card::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

.modal-card::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: var(--border-color);
}

.modal-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  border: 0;
  background: none;
  color: var(--text-secondary);
  font-size: 1.5rem;
  cursor: pointer;
  transition: var(--transition);
}

.modal-close:hover {
  color: var(--text-heading);
}

@media (max-width: 820px) {
  .nav-toggle {
    display: flex;
  }

  .nav-menu {
    position: fixed;
    top: 73px;
    right: -100%;
    z-index: 99;
    width: 100%;
    height: calc(100vh - 73px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    border-top: 1px solid var(--border-color);
    background: var(--bg-primary);
    transition: var(--transition);
  }

  .nav-menu.open {
    right: 0;
  }

  .nav-menu a {
    justify-content: center;
  }

  .section {
    min-height: auto;
    padding-top: 8rem;
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .section-index {
    position: relative;
    top: 0;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
  }

  .section-index::after {
    display: none;
  }

  .markdown h1 {
    font-size: 2.2rem;
  }

  .markdown h2,
  .contact-panel h2 {
    font-size: 1.8rem;
  }

  .markdown ul,
  .proof-strip ul,
  .contact-layout,
  .catalog-controls,
  .software-card,
  .store-card {
    grid-template-columns: 1fr;
  }

  .software-thumb {
    min-height: 140px;
  }

  #products .markdown ul {
    grid-template-columns: 1fr;
  }

  #products .markdown li {
    min-height: auto;
    text-align: left;
  }

  .cookie-banner {
    left: 2rem;
    width: calc(100% - 4rem);
  }

  .site-footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* ==========================================================================
   Product pages
   A reading surface, not a marketing surface. These pages deliberately opt
   out of the site's card language -- no panels, no glass, no filled buttons.
   Type, contrast, and whitespace carry the page instead.
   ========================================================================== */

body.is-product #scene-canvas.is-ready {
  opacity: 0.2;
}

.product-page {
  --pp-ink: #d7d9e0;
  --pp-ink-strong: #f4f4f7;
  --pp-ink-quiet: #6c707d;
  --pp-rule: #1c1c24;
  --pp-accent: #8b83ff;
  --pp-sans: var(--sans-font);
  --pp-mono: "IBM Plex Mono", var(--mono-font);

  max-width: none;
  min-height: 100vh;
  padding: 9rem 2rem 4rem;
  display: block;
  border-bottom: 0;
  color: var(--pp-ink);
  font-family: var(--pp-sans);

  opacity: 1;
}

.product-body {
}



.product-body {
  max-width: 760px;
  margin: 0 auto;
}

.pp-back {
  display: inline-block;
  margin-bottom: 5rem;
  color: var(--pp-ink-quiet);
  font-family: var(--pp-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.3s ease;
}

.pp-back:hover {
  color: var(--pp-ink-strong);
}

.pp-name {
  color: var(--pp-ink-strong);
  font-family: var(--pp-sans);
  font-size: clamp(3rem, 7vw, 4.75rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
}

.pp-tagline {
  margin-top: 2.25rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--pp-rule);
  color: var(--pp-ink);
  font-family: var(--pp-sans);
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.5;
}

.pp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.75rem;
  color: var(--pp-ink-quiet);
  font-family: var(--pp-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pp-meta span:first-child {
  color: var(--pp-accent);
}

.pp-meta span + span::before {
  content: '·';
  margin-right: 0.85rem;
  color: var(--pp-rule);
}

/* The screenshot breaks wider than the reading column -- the one place the
   page raises its voice. */
.pp-shot {
  position: relative;
  width: min(1000px, calc(100vw - 4rem));
  margin: 4.5rem 0 5.5rem 50%;
  transform: translateX(-50%);
  overflow: hidden;
  border: 1px solid var(--pp-rule);
  border-radius: 3px;
  background: var(--bg-tertiary);
}

/* The frame takes its height from the screenshot rather than forcing 16:9 --
   product UI shots come in different ratios and cropping one loses content. */
.pp-shot img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
}

/* Only the fallback panel needs a shape of its own. */
.pp-shot.is-missing {
  aspect-ratio: 16 / 9;
}

.pp-shot.is-missing img {
  display: none;
}

.pp-shot-mark {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  color: var(--pp-ink-quiet);
  font-family: var(--pp-mono);
  font-size: 1.6rem;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
}

.pp-block {
  margin-bottom: 5rem;
}

/* An in-body figure. Breaks wider than the text column like the hero shot,
   but keeps a caption and no forced ratio. */
.pp-figure {
  width: min(1000px, calc(100vw - 4rem));
  margin: 2.75rem 0 0 50%;
  transform: translateX(-50%);
}

.pp-figure img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--pp-rule);
}

.pp-figure figcaption {
  margin-top: 0.9rem;
  color: var(--pp-ink-quiet);
  font-family: var(--pp-mono);
  font-size: 0.72rem;
  line-height: 1.5;
}

.pp-intro {
  margin-bottom: 5.5rem;
}

.pp-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 2.25rem;
  color: var(--pp-ink-quiet);
  font-family: var(--pp-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pp-eyebrow::before {
  content: '';
  width: 22px;
  height: 1px;
  flex: none;
  background: var(--pp-accent);
}

.pp-block p {
  max-width: 68ch;
  margin-bottom: 1.4rem;
  color: var(--pp-ink);
  font-size: 1.05rem;
  line-height: 1.75;
}

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

.pp-intro p {
  font-size: 1.15rem;
  line-height: 1.7;
}

.pp-list {
  list-style: none;
}

/* Feature lists read as a compact spec table: counter, name, description.
   `display: contents` lifts the name and blurb into the row grid so the
   name column stays aligned down the whole list. */
.pp-list.is-numbered li {
  display: grid;
  grid-template-columns: 2.9rem minmax(0, 12.5rem) 1fr;
  gap: 0 1.15rem;
  align-items: start;
  padding: 0.7rem 0;
}

/* Counter and icon read as one unit in the left column. */
.pp-lead {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.1rem;
}

.pp-list.is-numbered li + li {
  border-top: 1px solid var(--pp-rule);
}

.pp-item {
  display: contents;
}

.pp-count {
  color: var(--pp-ink-quiet);
  font-family: var(--pp-mono);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}

.pp-item h3 {
  margin: 0;
  color: var(--pp-ink-strong);
  font-family: var(--pp-sans);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.5;
}

.pp-item-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--pp-rule);
  transition: color 0.3s ease, border-color 0.3s ease;
}

.pp-item-link:hover {
  color: var(--pp-accent);
  border-color: var(--pp-accent);
}

.pp-item-link:focus-visible {
  outline: 2px solid var(--pp-accent);
  outline-offset: 3px;
}

.pp-item p {
  max-width: none;
  margin: 0;
  color: var(--pp-ink);
  font-size: 0.92rem;
  line-height: 1.5;
}

/* MDI icons: single-path, 24x24, coloured by `currentColor` so they inherit
   whatever the surrounding text is doing. */
.mdi,
.mdi path {
  fill: currentColor;
}

.mdi {
  flex: none;
  width: 1em;
  height: 1em;
}

.pp-feature-icon {
  width: 17px;
  height: 17px;
  color: var(--pp-accent);
}

.pp-icon {
  width: 15px;
  height: 15px;
  vertical-align: -0.18em;
}

.pp-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.pp-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.pp-meta .pp-icon {
  width: 13px;
  height: 13px;
  vertical-align: 0;
}

.pp-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.pp-cta-link .pp-icon {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.pp-cta-link:hover .pp-icon {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .pp-cta-link:hover .pp-icon {
    transform: none;
  }
}

.pp-list:not(.is-numbered) li {
  position: relative;
  padding: 0 0 1rem 3.5rem;
}

.pp-list:not(.is-numbered) li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--pp-accent);
}

.pp-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  margin-top: 6rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--pp-rule);
}

.pp-cta-link {
  color: var(--pp-accent);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  transition: color 0.3s ease;
}

.pp-cta-link:hover {
  color: var(--pp-ink-strong);
}

.pp-back:focus-visible,
.pp-cta-link:focus-visible {
  outline: 2px solid var(--pp-accent);
  outline-offset: 4px;
}

@media (max-width: 768px) {
  .product-page {
    padding: 7rem 1.5rem 3rem;
  }

  .pp-back {
    margin-bottom: 3rem;
  }

  .pp-shot {
    width: calc(100vw - 3rem);
    margin: 3rem 0 4rem 50%;
  }

  .pp-figure {
    width: calc(100vw - 3rem);
    margin: 2rem 0 0 50%;
  }

  .pp-tagline {
    font-size: 1.2rem;
  }

  .pp-block,
  .pp-intro {
    margin-bottom: 3.5rem;
  }

  .pp-list.is-numbered li {
    grid-template-columns: 2.7rem 1fr;
    gap: 0 0.8rem;
    padding: 0.9rem 0;
  }

  /* Too narrow for a name column -- blurb drops under the name, still
     aligned to the same left edge. */
  .pp-list.is-numbered .pp-item p {
    grid-column: 2;
    margin-top: 0.2rem;
  }

  .pp-list:not(.is-numbered) li {
    padding-left: 2.4rem;
  }

  .pp-cta {
    gap: 1.25rem;
    margin-top: 4rem;
  }
}

/* ==========================================================================
   Catalog and nav icons
   Modifiers on the shared `.mdi` base (fill: currentColor, 1em box). Sizes
   are em-relative so each icon tracks the type it sits next to; none of them
   set `color`, so they inherit their host's hover and active transitions.
   ========================================================================== */

.nav-icon {
  width: 1.05em;
  height: 1.05em;
}

/* Screenshot covers the tile; the icon and mark sit beneath it untouched. */
.software-thumb-img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}

.software-card:hover .software-thumb-img,
.store-card:hover .software-thumb-img {
  filter: saturate(1);
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .software-thumb-img {
    transition: none;
  }

  .software-card:hover .software-thumb-img,
  .store-card:hover .software-thumb-img {
    transform: none;
  }
}

.thumb-icon {
  width: 2rem;
  height: 2rem;
  /* Accent held back from full strength so it reads on the tile's own
     indigo gradient rather than fighting it. */
  color: rgba(139, 131, 255, 0.72);
}

.chip-icon {
  width: 0.95em;
  height: 0.95em;
}

.link-icon {
  width: 1em;
  height: 1em;
}

/* ==========================================================================
   Square corners
   Product and catalog pages drop the home page's rounded card language --
   including the pill chips, which square off completely. Shared chrome
   (modal, cookie banner, header) keeps its radii, so this is scoped to the
   two body classes rather than zeroed at each selector.
   ========================================================================== */

body:is(.is-product, .is-catalog) :is(
  .software-card,
  .store-card,
  .software-thumb,
  .software-empty,
  .software-links a,
  .software-status,
  .software-license,
  .software-tags > span,
  .software-links > span,
  .catalog-controls input,
  .catalog-controls select,
  .pp-shot
) {
  border-radius: 0;
}