/* ===========================================================
   /addons page layer

   Layout for the catalogue's own sections only. Tokens and every
   shared primitive come from assets/insight.css, which this file
   must be loaded AFTER and must never override.
   =========================================================== */

/* ===========================================================
   sections
   Layout only. No new colours, radii or shadows: everything
   below resolves through the tokens above.
   =========================================================== */

/* Offset vertically, not horizontally: a negative left position counts as
   horizontal overflow to layout checks and to some assistive tooling. */
.pi-skip {
  position: absolute;
  left: 0;
  top: -120px;
  z-index: 10;
  padding: var(--space-3) var(--space-4);
  background: var(--color-primary);
  color: #fff;
  border-radius: 0 0 var(--radius-control) 0;
  transition: top 0.12s ease;
}
.pi-skip:focus {
  top: 0;
}

.pi-page {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-7) var(--space-5) var(--space-9);
}

.pi-intro {
  margin-bottom: var(--space-7);
}
.pi-lead {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 62ch;
}

.pi-eyebrow {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

/* ---- platform block ---- */
.pi-platform {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: var(--space-6);
  align-items: start;
  padding: var(--space-6);
  margin-bottom: var(--space-5);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
  box-shadow: var(--shadow-resting);
}
.pi-platform h2 {
  margin-bottom: var(--space-1);
}
.pi-platform__tagline {
  margin: 0 0 var(--space-3);
  font-size: var(--text-lg);
  color: var(--color-text);
  font-weight: var(--weight-medium);
}
.pi-platform__facts {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.pi-platform__buy {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-soft);
  text-align: center;
}
.pi-platform__price {
  margin: 0;
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  line-height: 1;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.pi-platform__price span {
  font-size: 0.5em;
  vertical-align: super;
  color: var(--color-text-muted);
}
.pi-platform__note {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

/* Marketplace-pending status. Text, never a disabled button. */
.pi-status {
  margin: 0;
  padding: var(--space-3) 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
}
.pi-status::before {
  content: "◷ ";
  color: var(--color-text-subtle);
}

/* ---- product card hierarchy ----
   Price stays on every card — transparent pricing is right — but it should not
   be the first thing the eye lands on. The product name leads, the purpose
   carries the decision, and the figure sits beside the name at body weight
   rather than as a headline. */
.pi-card__price {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pi-card__name {
  font-size: var(--text-base);
}
/* Widget and dashboard counts are useful once a product is already of
   interest, so they stay — as subdued metadata, not as a comparison score. */
.pi-card__body .pi-meta {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}
.pi-card__body .pi-meta b {
  color: var(--color-text-muted);
  font-weight: var(--weight-medium);
}

/* ---- group heading ---- */
.pi-group__count {
  max-width: 46ch;
  text-align: right;
  line-height: 1.5;
}

/* ---- guidance ----
   A quiet closing note, deliberately not a second CTA band: the dark
   "See it with real data first" section follows immediately after. */
.pi-guide {
  margin-bottom: var(--space-7);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-panel);
  background: var(--color-surface-soft);
}
.pi-guide h2 {
  margin-bottom: var(--space-2);
  font-size: var(--text-lg);
}
.pi-guide p {
  max-width: 72ch;
}
.pi-guide__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  font-size: var(--text-sm);
}

/* ---- sections ---- */
.pi-section {
  margin-bottom: var(--space-8);
}
.pi-group__blurb {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.pi-card__parent {
  display: block;
  margin-top: var(--space-2);
}

.pi-footnote {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  max-width: var(--measure);
}

/* ---- closing CTA ---- */
.pi-cta {
  padding: var(--space-7) var(--space-6);
  border-radius: var(--radius-panel);
}
.pi-cta h2 {
  margin-bottom: var(--space-3);
}
.pi-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* The catalogue is a card grid, not prose. Above 1600 the shared 1200px
   measure holds only three 320px cards, so the four-product Assets & Equipment
   group spilled its fourth card onto a row of its own. Widening the page here
   — and only here, and only this far — lets four cards complete one row while
   three-card groups stay flush (.pi-catalogue uses auto-fit). The footer
   follows the same measure so both stay on one left edge. */
@media (min-width: 1600px) {
  .pi-page,
  .pi-footer__grid,
  .pi-footer__legal {
    /* Padding outside the measure, matching .pi-page's own convention, so the
       catalogue and the footer keep one left edge. */
    max-width: calc(1440px + 2 * var(--space-5));
  }
}

@media (max-width: 768px) {
  .pi-platform {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-5);
  }
  .pi-page {
    padding: var(--space-6) var(--space-4) var(--space-8);
  }
}

/* ---- module glyph on the card ----
   The same mark the homepage ecosystem uses, at text size beside the name, so
   a product is recognisable across both pages. Light-surface accents here, not
   the dark-band ones: this card sits on white. */
.pi-card__name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.pi-card__glyph {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-control);
  background: var(--card-glyph-bg);
  color: var(--card-glyph-fg);
}
.pi-card__glyph .pi-mod__glyph {
  width: 15px;
  height: 15px;
}
.pi-card__glyph[data-group="finance"] {
  --card-glyph-bg: #eef2fb;
  --card-glyph-fg: #2f4d8c;
}
.pi-card__glyph[data-group="assets"] {
  --card-glyph-bg: #e9f5f3;
  --card-glyph-fg: #1f6f63;
}
.pi-card__glyph[data-group="operations"] {
  --card-glyph-bg: #f7f0e6;
  --card-glyph-fg: #8a5a1c;
}
.pi-card__glyph[data-group="property"] {
  --card-glyph-bg: #f1eefc;
  --card-glyph-fg: #4f3f9c;
}