/* ============================================================================
 * Listing detail — v4, product variant
 * Ported from Sigrix_new/marketplace/Marketplace - Listing Product v4.html at
 * f5b307d: its page-local "pr-v2" block, and the product's own accent and kind
 * chip. The page is the MCP layout (`css/sx-listing-mcp.css` is loaded for the
 * `mc-*` structure: the hero's run card, the trust row, the buy box, the
 * Example pair) with the product's sections under it, so this sheet holds only
 * what no other type renders: the service and credential tables, the staged
 * flow, the cost card, the readiness pillars, and the parts the live page keeps
 * that the prototype does not draw (the post-purchase panel, the buyer's setup
 * guide, the install line, the seller's checks, the buyer's copy card).
 *
 * Loads after css/sx-listing-v4.css and css/sx-listing-mcp.css, before the
 * style-guide layer (css/sx-listing-sg-v2.css). Translated, not copied: the
 * prototype is authored at data-theme="dark" on its own `.sx` div and reads
 * bare tokens; here `data-theme` is on the root, light is the default and the
 * tokens are the site's. A prototype `--text-faint` that inks words is
 * `--sx-text-3` (the quietest step that clears 4.5:1 in both themes); the
 * prototype's `--text-soft` and `--text-mute` are one step here, `--sx-text-2`.
 * ==========================================================================*/

/* ── the product's accents ───────────────────────────────────────────────
   Two. The page's own parts are mint, as the MCP page's are (the design moved
   both off indigo to match Browse), and its kind chip is the product's own
   rose; the shell's accent (`--ig-accent`) is the style guide v2 layer's brand
   indigo, what the prototype's shared `--persona` resolves to. The mint is a
   dark-theme value in the prototype and splits here as every v4 accent does:
   the fill keeps the prototype's hue, the ink is lowered until it clears AA on
   all three light surfaces and on its own tint; the pair is the MCP page's,
   measured there (#6450). The rose the prototype states for both themes
   (`#FFB7C5` in dark, `#B91C5C` in light), and the light ink is 6.2:1 on white
   and 5.8:1 on its tint, so it is ported as drawn. Written at (0,2,1) so they
   win on specificity rather than on load order. */
body.listing-v4-page.product-listing-page {
  --mc-accent: #1f9d6b;
  --mc-accent-text: #0f6b45;
  --mc-accent-soft: rgba(31, 157, 107, 0.08);
  --mc-accent-line: rgba(31, 157, 107, 0.28);
  /* The kind chip: ink, ring and tint. The style-guide layer draws the chip;
     each type says what colour it is. */
  --ig-kind-ink: #b91c5c;
  --ig-kind-line: rgba(220, 44, 80, 0.25);
  --ig-kind-soft: rgba(220, 44, 80, 0.06);
  /* A service's dot. The old page's palette, one per service the registry
     themes (`_SERVICE_SLUGS`); a service it does not theme takes the default. */
  --pr-svc-default: var(--sx-text-3);
  --pr-svc-n8n: #ec6ab8;
  --pr-svc-gmail: #b4761e;
  --pr-svc-openai: #20867a;
  --pr-svc-anthropic: #b4761e;
  --pr-svc-sheets: #2a8b5a;
  --pr-svc-calendar: #3d4dff;
  --pr-svc-slack: #7b3fa0;
  --pr-svc-telegram: #1d7fa8;
  --pr-svc-twilio: #c2453f;
  --pr-svc-retell: #7b3fa0;
}

[data-theme="dark"] body.listing-v4-page.product-listing-page {
  --mc-accent: #6fe3b0;
  --mc-accent-text: #6fe3b0;
  --mc-accent-soft: rgba(111, 227, 176, 0.1);
  --mc-accent-line: rgba(111, 227, 176, 0.3);
  --ig-kind-ink: #ffb7c5;
  --ig-kind-line: rgba(244, 123, 160, 0.3);
  --ig-kind-soft: rgba(244, 123, 160, 0.08);
  --pr-svc-gmail: #f5b454;
  --pr-svc-openai: #7ce3d4;
  --pr-svc-anthropic: #f5b454;
  --pr-svc-sheets: #62d38c;
  --pr-svc-calendar: #8fa8ff;
  --pr-svc-slack: #d4bbff;
  --pr-svc-telegram: #7cc9e3;
  --pr-svc-twilio: #f47b7b;
  --pr-svc-retell: #d4bbff;
}

.ig-kind--product svg {
  flex: none;
}

/* A service's dot is a mark beside its name, never the only thing that names it. */
.pr-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--pr-svc-default);
}
.pr-dot[data-s="n8n"] { background: var(--pr-svc-n8n); }
.pr-dot[data-s="gmail"] { background: var(--pr-svc-gmail); }
.pr-dot[data-s="openai"] { background: var(--pr-svc-openai); }
.pr-dot[data-s="anthropic"] { background: var(--pr-svc-anthropic); }
.pr-dot[data-s="sheets"] { background: var(--pr-svc-sheets); }
.pr-dot[data-s="calendar"] { background: var(--pr-svc-calendar); }
.pr-dot[data-s="slack"] { background: var(--pr-svc-slack); }
.pr-dot[data-s="telegram"] { background: var(--pr-svc-telegram); }
.pr-dot[data-s="twilio"] { background: var(--pr-svc-twilio); }
.pr-dot[data-s="retell"] { background: var(--pr-svc-retell); }
.mc-chip .pr-dot {
  width: 6px;
  height: 6px;
}

/* ── post-purchase panel ─────────────────────────────────────────────────
   One-time, on the return from checkout. Not in the prototype: it is the live
   page's, drawn in the design's own vocabulary (a hairline card, the mint
   accent on its tick). The ids it carries are `product_detail.js`'s. */
.pr-post-wrap {
  padding-top: 24px;
}
.pr-post {
  padding: 20px 22px;
  border-radius: var(--sx-r-lg, 14px);
  background: var(--sx-surface);
  box-shadow: 0 0 0 1px var(--mc-accent-line) inset;
}
.pr-post-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.pr-post-ico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  background: var(--mc-accent-soft);
  box-shadow: 0 0 0 1px var(--mc-accent-line) inset;
  color: var(--mc-accent-text);
}
.pr-post-head > div {
  min-width: 0;
}
.pr-post-head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.pr-post-head p {
  margin: 6px 0 0;
  max-width: 68ch;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--sx-text-2);
  text-wrap: pretty;
}
.pr-post .form-status {
  margin-top: 14px;
}
.pr-post-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.pr-post > .ig-btn {
  margin-top: 12px;
}

/* ── hero ──────────────────────────────────────────────────────────────── */
/* A seller's cover: drawn whole in a 16:9 frame with nothing over it (an image
   suits no ink in both themes and may carry words of its own). */
.pr-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--sx-r-lg, 14px);
  background: var(--sx-surface-2);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
}
.pr-cover img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pr-run-gap {
  margin-top: 20px;
}
.mc-hero-run .ig-mosaic-foot {
  margin-top: 12px;
}
/* The MCP sheet states this heading for its own body class alone (`.mcp-listing-page`), so it falls to the
   user agent's h2 here: 24px bold. Restated for the product, with the prototype's own line height. */
body.product-listing-page .mc-run-t {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.55;
}
.mc-where b {
  color: var(--sx-text);
  font-weight: 600;
}

/* The buy box: price and button on one line while they fit, the button under the
   price when they do not. */
body.listing-v4-page.product-listing-page .ig-buy {
  justify-content: space-between;
  flex-wrap: wrap;
}
.pr-share {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--sx-line);
}
.pr-share .product-share {
  margin-top: 0;
}

/* ── the numbered sub-blocks of a section ────────────────────────────────── */
.pr-block {
  margin-top: 36px;
}
.pr-block:first-of-type {
  margin-top: 8px;
}
.pr-sub {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.pr-sub .n {
  font-family: var(--ig-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--sx-text-3);
}
.pr-sub h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.55;
}
.pr-sub .aux {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--sx-text-3);
}

/* ── Setup: the services a buyer brings and the credentials they paste in ── */
.pr-tbl {
  border-top: 1px solid var(--sx-line);
}
.pr-svc,
.pr-cred {
  display: grid;
  gap: 4px 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--sx-line);
  align-items: baseline;
}
.pr-svc {
  grid-template-columns: 140px minmax(0, 1.2fr) minmax(0, 1fr) auto;
}
.pr-nm {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--sx-text);
}
.pr-role {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--sx-text-2);
}
.pr-price {
  font-family: var(--ig-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--sx-text-3);
}
a.pr-ext {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--sx-text-2);
  white-space: nowrap;
}
a.pr-ext:hover {
  color: var(--sx-text);
}
.pr-cred {
  grid-template-columns: auto minmax(0, 1fr) auto;
}
.pr-key {
  font-family: var(--ig-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--sx-text);
  overflow-wrap: anywhere;
}
.pr-for {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--sx-text-3);
}
.pr-cred .pr-role {
  grid-column: 1 / 3;
}
.pr-cred .ig-model {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
}
/* What a buyer needs to have before they start. */
.pr-need {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pr-need li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--sx-text-2);
}
.pr-need svg {
  flex: none;
  margin-top: 3px;
  color: var(--sx-text-3);
}

/* ── Workflow: the staged diagram ─────────────────────────────────────── */
.pr-flow {
  border-radius: var(--sx-r-lg, 14px);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  overflow: hidden;
}
.pr-stage {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
}
.pr-stage + .pr-stage {
  border-top: 1px solid var(--sx-line);
}
.pr-sl {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--sx-text-2);
  border-right: 1px solid var(--sx-line);
}
.pr-sl .n {
  font-family: var(--ig-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--sx-text-3);
}
.pr-nodes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  padding: 14px;
}
.pr-node {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 11px 13px;
  border-radius: var(--sx-r-md, 10px);
  background: var(--sx-surface);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
}
.pr-node .t {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--sx-text);
  overflow-wrap: anywhere;
}
.pr-node .k {
  font-family: var(--ig-mono);
  font-size: 12px;
  color: var(--sx-text-3);
}
.pr-node .u {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--sx-line);
  font-size: 12px;
  color: var(--sx-text-2);
}
.pr-node-note {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  color: var(--sx-text-3);
}
/* A decision is drawn by its dashed edge, and says so in words for a reader who cannot see it. */
.pr-node.is-decision {
  box-shadow: none;
  border: 1px dashed var(--sx-line-2);
}
/* A stage that branches: the question, then its two answers side by side. */
.pr-branch {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
}
.pr-cond {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 10px;
  border-radius: 999px;
  box-shadow: 0 0 0 1px var(--sx-line-2) inset;
  font-family: var(--ig-mono);
  font-size: 11.5px;
  color: var(--sx-text-2);
}
.pr-arms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.pr-arm {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.pr-arm-l {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sx-text-3);
}
.pr-arm[data-arm="yes"] .pr-arm-l {
  color: var(--ig-ok-text);
}
.pr-arm[data-arm="no"] .pr-arm-l {
  color: var(--ig-warn-text);
}
/* The connection list: the flat drawing, and a staged flow's folded alternative. */
.pr-alt {
  margin-top: 12px;
}
.pr-alt > summary {
  list-style: none;
}
.pr-alt > summary::-webkit-details-marker {
  display: none;
}
.pr-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--sx-text-2);
  cursor: pointer;
}
.pr-toggle:hover {
  color: var(--sx-text);
}
.pr-toggle:focus-visible {
  outline: 2px solid var(--sx-brand-text);
  outline-offset: 2px;
  border-radius: 4px;
}
.pr-toggle svg {
  transition: transform 0.15s;
}
.pr-alt[open] > .pr-toggle svg {
  transform: rotate(90deg);
}
.pr-edges {
  display: grid;
  gap: 0;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--sx-line);
}
.pr-edges li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--sx-line);
  font-size: 13.5px;
  color: var(--sx-text);
  overflow-wrap: anywhere;
}
.pr-edges .i {
  font-family: var(--ig-mono);
  font-size: 11.5px;
  color: var(--sx-text-3);
}
.pr-edges .via {
  color: var(--sx-text-3);
}
.pr-flow + .pr-alt,
.pr-flow ~ .pr-alt {
  margin-top: 14px;
}
.pr-alt .pr-edges {
  margin-top: 8px;
}

/* ── Recurring cost ───────────────────────────────────────────────────── */
.pr-cost {
  border-radius: var(--sx-r-lg, 14px);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
}
.pr-cost .k {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sx-text-3);
}
.pr-cost-h {
  padding: 20px 22px;
  border-bottom: 1px solid var(--sx-line);
}
.pr-cost-h:last-child {
  border-bottom: 0;
}
.pr-big {
  display: block;
  font-family: var(--ig-mono);
  font-size: 36px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--sx-text);
}
.pr-big span {
  font-size: 18px;
  letter-spacing: 0;
  color: var(--sx-text-2);
}
.pr-cost-h p {
  margin: 10px 0 0;
  max-width: 62ch;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--sx-text-2);
}
.pr-cost-b {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 28px;
  padding: 18px 22px 20px;
}
.pr-line {
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px solid var(--sx-line);
}
.pr-line .t {
  display: block;
  font-size: 13.5px;
  color: var(--sx-text);
}
.pr-line .s {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--sx-text-3);
}
.pr-line .v {
  font-family: var(--ig-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--sx-text);
  white-space: nowrap;
}
.pr-line .v.zero {
  color: var(--sx-text-3);
}
/* The prototype draws one plain paragraph; a seller's several assumptions are lines of the same. */
.pr-assume {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.55;
  color: var(--sx-text-2);
}
.pr-assume li + li {
  margin-top: 6px;
}

/* ── What you get ─────────────────────────────────────────────────────── */
.pr-block > .ig-files {
  margin-top: 0;
}
/* The seller's install line (#4800). A line people copy wraps: a scroller hides the characters
   Copy still hands over. The `$` hangs in a gutter so a wrapped line lines up under the first,
   and the button drops under the line on a phone instead of squeezing it. */
.pr-install {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px 12px;
  padding: 14px 16px;
  border-radius: var(--sx-r-md, 10px);
  background: var(--sx-bg-2);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
}
.pr-install code {
  flex: 1 1 260px;
  min-width: 0;
  padding-left: 2ch;
  text-indent: -2ch;
  font-family: var(--ig-mono);
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--sx-text);
}
.pr-install .p {
  display: inline-block;
  width: 2ch;
  text-indent: 0;
  color: var(--sx-text-3);
  user-select: none;
}
.pr-over {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--sx-line);
}
.pr-over h3 {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1.55;
}
.pr-over p {
  margin: 0 0 12px;
  max-width: 72ch;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--sx-text-2);
  text-wrap: pretty;
}

/* ── a seller's markdown: the guide's steps and usage, a recorded response ──
   The page's own sections are the headings, so a body's start small. */
.pr-prose {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--sx-text-2);
  overflow-wrap: anywhere;
}
.pr-prose > :first-child {
  margin-top: 0;
}
.pr-prose > :last-child {
  margin-bottom: 0;
}
.pr-prose h1,
.pr-prose h2,
.pr-prose h3,
.pr-prose h4,
.pr-prose h5,
.pr-prose h6 {
  margin: 22px 0 8px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--sx-text);
}
.pr-prose h2 {
  font-size: 16px;
}
.pr-prose p {
  margin: 0 0 12px;
  max-width: 78ch;
}
.pr-prose ul,
.pr-prose ol {
  margin: 0 0 12px;
  padding-left: 22px;
}
.pr-prose li {
  margin: 4px 0;
}
.pr-prose a {
  color: var(--sx-brand-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pr-prose strong {
  color: var(--sx-text);
  font-weight: 600;
}
.pr-prose code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--sx-bg-2);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  font-family: var(--ig-mono);
  font-size: 0.88em;
  color: var(--sx-text);
}
.pr-prose pre {
  margin: 12px 0;
  padding: 14px 16px;
  border-radius: var(--sx-r-md, 10px);
  background: var(--sx-bg-2);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  overflow-x: auto;
}
.pr-prose pre code {
  padding: 0;
  background: none;
  box-shadow: none;
  white-space: pre;
  font-size: 12.5px;
  line-height: 1.7;
}
.pr-prose blockquote {
  margin: 12px 0;
  padding: 2px 0 2px 14px;
  border-left: 3px solid var(--sx-line-2);
}
.pr-prose hr {
  margin: 18px 0;
  border: 0;
  border-top: 1px solid var(--sx-line);
}
.pr-prose table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  margin: 12px 0;
  border-collapse: collapse;
  font-size: 13.5px;
}
.pr-prose th,
.pr-prose td {
  padding: 6px 12px;
  text-align: left;
  border-bottom: 1px solid var(--sx-line);
  white-space: nowrap;
}
.pr-prose th {
  font-weight: 600;
  color: var(--sx-text);
}

/* ── Proof ────────────────────────────────────────────────────────────── */
.mc-eg + .mc-eg {
  margin-top: 16px;
}
.pr-exchange .pr-prose {
  padding: 20px 22px 4px;
}
.pr-exchange .pr-prose:last-child {
  padding-bottom: 20px;
}
.pr-tested {
  margin: 0;
  padding: 0 22px 18px;
  font-size: 12.5px;
  color: var(--sx-text-3);
}
.pr-demo {
  margin: 16px 0 0;
}
.mc-eg + .pr-demo,
.pr-exchange + .pr-demo {
  margin-top: 24px;
}
.pr-demo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--sx-r-lg, 14px);
  box-shadow: 0 0 0 1px var(--sx-line);
}
.pr-demo figcaption {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--sx-text-3);
}

/* ── the setup guide ──────────────────────────────────────────────────── */
.pr-guide-acts {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pr-guide-steps {
  padding: 24px 26px;
}
.pr-guide .pr-cmd {
  border-top: 1px solid var(--sx-line);
  background: var(--sx-bg-2);
}
.pr-usage-head {
  margin: 0;
  padding: 22px 26px 0;
  border-top: 1px solid var(--sx-line);
}
.pr-guide-usage {
  padding: 0 26px 24px;
}
/* A guest's note closes the guide's panel (#7238), so it takes the panel's bottom inset; the rest is
   the shell's `.ig-guest`. */
.pr-guide .ig-guest {
  padding-bottom: 24px;
}
.pr-example-note {
  margin: 0;
  padding: 16px 18px;
  border-radius: var(--sx-r-md, 10px);
  background: var(--sx-surface-2);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--sx-text-2);
  max-width: 72ch;
}

/* ── Production readiness ─────────────────────────────────────────────── */
.pr-pillars {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 14px;
}
.pr-pillars i {
  height: 4px;
  border-radius: 2px;
  background: var(--sx-line);
}
.pr-pillars i.on {
  background: var(--sx-ok);
}
.pr-pl {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pr-pl li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--sx-line);
  font-size: 13.5px;
  color: var(--sx-text-2);
}
.pr-pl .ico {
  width: 20px;
  height: 20px;
  margin-top: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1px var(--sx-line-2) inset;
  color: var(--sx-text-3);
  flex: none;
}
.pr-pl .is-met .ico {
  background: color-mix(in srgb, var(--sx-ok) 14%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sx-ok) 38%, transparent) inset;
  color: var(--ig-ok-text);
}
.pr-pl .is-met {
  color: var(--sx-text);
}
.pr-pl-b {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.pr-pl-n {
  display: flex;
  align-items: baseline;
  gap: 8px;
  line-height: 1.45;
}
.pr-pl .soon {
  margin-left: auto;
  font-size: 12px;
  color: var(--sx-text-3);
  white-space: nowrap;
}
.pr-pl .is-soon {
  color: var(--sx-text-3);
}
.pr-pl-g {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--sx-text-3);
}
a.pr-pl-fix {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--sx-brand-text);
}
a.pr-pl-fix:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* The seller's own checks: what Sigrix holds about the listing and its tests. */
.pr-checks {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--sx-line);
}
/* A dl the width of the page parts a label from its value by a thousand pixels: hold it to a column. */
.pr-checks .ig-spec {
  max-width: 720px;
}
.pr-runs {
  margin: 10px 0 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--sx-text-2);
}
.pr-runs li + li {
  margin-top: 4px;
}

/* ── Details ──────────────────────────────────────────────────────────── */
.pr-seller-anchor {
  scroll-margin-top: 80px;
}
/* A buyer's own copy: their certificate, the version they hold, the updates they are owed. */
.pr-copy {
  margin-top: 28px;
  padding: 18px 20px;
  border-radius: var(--sx-r-lg, 14px);
  background: var(--sx-surface);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
}
.pr-copy .ig-spec {
  margin-top: 0;
}
.pr-copy-btn {
  margin-left: 10px;
  vertical-align: middle;
}
.pr-copy-note {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--sx-text-2);
  text-wrap: pretty;
}
.pr-copy-note b {
  color: var(--sx-text);
  font-weight: 600;
}
.pr-highlights {
  margin-top: 12px;
}

/* ── narrow ───────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .pr-svc {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .pr-svc .pr-role,
  .pr-svc .pr-price {
    grid-column: 1 / -1;
  }
  .pr-svc .pr-ext {
    grid-column: 2;
    grid-row: 1;
  }
  .pr-cred {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .pr-cred .pr-for {
    grid-column: 1;
  }
  .pr-cred .pr-role {
    grid-column: 1 / -1;
  }
  .pr-cred .ig-model {
    grid-column: 2;
    grid-row: 1;
  }
  .pr-stage {
    grid-template-columns: minmax(0, 1fr);
  }
  .pr-sl {
    flex-direction: row;
    gap: 8px;
    border-right: 0;
    border-bottom: 1px solid var(--sx-line);
    padding: 10px 14px;
  }
  .pr-cost-b {
    grid-template-columns: minmax(0, 1fr);
  }
  .pr-sub .aux {
    margin-left: 0;
    flex-basis: 100%;
  }
  .pr-arms {
    grid-template-columns: minmax(0, 1fr);
  }
  .pr-guide-steps {
    padding: 20px 18px;
  }
  .pr-usage-head {
    padding: 20px 18px 0;
  }
  .pr-guide-usage {
    padding: 0 18px 20px;
  }
  .pr-guide .ig-guest {
    padding: 18px 18px 20px;
  }
  .pr-post {
    padding: 18px;
  }
  .pr-exchange .pr-prose,
  .pr-tested {
    padding-left: 18px;
    padding-right: 18px;
  }
}