/* Page-group styles (money). Shared building blocks live in site.css "Page kit"; only group-specific rules here.
   Prefix nx-pm-. Partials: app/Views/partials/money/ (steps, checklist, icons). */

/* Screenshot under the hero: a little narrower than the container so it reads as one object. */
.nx-pm-shot { max-width: 68rem; margin-inline: auto; }

/* Small factual note under the hero CTAs (e.g. "not my.proxmox.com"). */
.nx-pm-note { max-width: 40rem; margin: 1.25rem auto 0; font-size: .9375rem; line-height: 1.55; }
.nx-pm-note a { text-decoration: underline; text-underline-offset: .2em; }

/* Numbered steps (partials/money/steps.php): big counter numbers, plain text, no cards. */
.nx-pm-steps {
  counter-reset: nx-pm-step;
  display: grid;
  gap: clamp(2.5rem, 4vw, 3.5rem) clamp(2rem, 5vw, 5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nx-pm-steps--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nx-pm-steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nx-pm-step { counter-increment: nx-pm-step; }
.nx-pm-step::before {
  content: counter(nx-pm-step, decimal-leading-zero);
  display: block;
  margin-bottom: 1rem;
  font-size: clamp(2.75rem, 2rem + 2.4vw, 4rem);
  line-height: 1;
  letter-spacing: -.045em;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  color: var(--nx-accent);
}
.nx-pm-step__title { margin: 0; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem); line-height: 1.2; letter-spacing: -.025em; font-weight: 700; color: inherit; }
.nx-pm-step__text { margin-top: .75rem; font-size: 1.0625rem; line-height: 1.65; }
.nx-pm-step__text p { margin: 0; }
.nx-pm-step__text p + p { margin-top: .75rem; }
.nx-pm-step__text a,
.nx-pm-checks a,
.nx-pm-body a:not(.btn):not(.nx-link) { font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }

/* Checklist (partials/money/checklist.php) */
.nx-pm-checks { display: grid; gap: 1.25rem clamp(2rem, 5vw, 4rem); margin: 0; padding: 0; list-style: none; }
.nx-pm-checks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nx-pm-checks li { display: flex; gap: .875rem; font-size: 1.125rem; line-height: 1.55; }
.nx-pm-checks .nx-check { margin-top: .1875rem; color: var(--nx-accent); }

/* Text column next to a section title (pairs with .nx-prose--split from site.css). */
.nx-pm-body p { margin: 0; font-size: 1.125rem; line-height: 1.7; }
.nx-pm-body p + p,
.nx-pm-body * + .nx-pm-checks,
.nx-pm-body * + .nx-pm-code,
.nx-pm-body * + .nx-actions { margin-top: 1.5rem; }
.nx-pm-body h3 { margin: 2.5rem 0 0; font-size: 1.375rem; line-height: 1.25; letter-spacing: -.02em; font-weight: 700; color: inherit; }
.nx-pm-body h3 + p { margin-top: .75rem; }
.nx-pm-body .nx-lead + p { margin-top: 1.5rem; }

/* Code sample: a solid block in the band's opposite colour, scrolls inside on narrow screens. */
.nx-pm-code {
  margin-bottom: 0;
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
  border-radius: 14px;
  background: var(--nx-fg);
  color: var(--nx-bg);
  font-family: var(--nx-mono);
  font-size: .875rem;
  line-height: 1.6;
}
.nx-pm-code code { padding: 0; color: inherit; background: transparent; font-size: inherit; }

/* Content after a table or the plans row. */
.nx-pm-after { max-width: 52rem; margin: 2rem 0 0; font-size: 1rem; line-height: 1.6; }
.nx-pm-after a { font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.nx-pm-after--center { margin-inline: auto; text-align: center; }
.nx-pm-table-first th:first-child,
.nx-pm-table-first td:first-child { font-weight: 600; }

/* Related links sit under the FAQ in the same band. */
.nx-pm-related { margin-top: clamp(4rem, 8vw, 6rem); }

@media (max-width: 991.98px) {
  .nx-pm-steps--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .nx-pm-steps--2,
  .nx-pm-steps--3,
  .nx-pm-checks--2 { grid-template-columns: 1fr; }
  .nx-pm-code { font-size: .8125rem; padding: 1rem 1.125rem; }
}

/* A block that follows other content inside the same section (e.g. a second screenshot). */
.nx-pm-later { margin-top: clamp(3rem, 6vw, 5rem); }
/* Our own column in a comparison table: weight, not colour (keeps the accent rare). */
.nx-table td.nx-pm-us { font-weight: 650; }