/* NXT EDGE page. Layout comes from the shared px system (css/px.css); only
   what this page adds lives here, prefixed edge-. */

/* ---------- Hero ---------- */
.edge-hero-lead { max-width: 52ch; margin: -12px auto 32px !important; font-size: 16px; line-height: 1.65; color: var(--nxt-gray); }
.edge-three h2 { font-size: 19px; line-height: 1.35; letter-spacing: -0.01em; margin: 0 0 10px; }
.edge-three p { font-size: 15px; line-height: 1.65; color: var(--nxt-graphite); margin: 0; }

/* ---------- Scope: four numbered steps on hairlines ---------- */
.edge-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.edge-steps li { font-size: clamp(18px, 1.6vw, 21px); font-weight: 500; line-height: 1.4; letter-spacing: -0.01em; color: var(--nxt-midnight); }
.edge-steps span {
  display: block; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border-default);
  font-size: 13px; letter-spacing: 0.04em; color: var(--nxt-cobalt);
}

/* ---------- Text beside hairline lists ---------- */
.edge-split { align-items: start; }
.edge-split h2 { font-size: clamp(25px, 2.48vw, 33px); line-height: 1.15; letter-spacing: -0.03em; margin-bottom: 20px; }
.edge-intro { font-size: 17px; }
.edge-lines strong { font-weight: 500; color: var(--nxt-midnight); }
.edge-after-lines { margin-top: 24px !important; }

/* ---------- Where EDGE stops: text left, whole diagram right ---------- */
.edge-feature-flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.edge-diagram { background: var(--nxt-ink-50); padding: 32px; }
.edge-diagram img { width: 100%; mix-blend-mode: multiply; }

/* ---------- What makes it different ---------- */
.edge-why article { padding-top: 20px; border-top: 1px solid var(--border-default); }
.edge-why strong { font-weight: 500; color: var(--nxt-midnight); }

/* ---------- Pricing band ---------- */
.edge-band-intro { margin-top: -16px !important; font-size: 17px; color: rgba(255, 255, 255, 0.82); }
.edge-band-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 48px; }
.edge-band-facts li { padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.28); font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.78); }
.edge-band-facts strong { display: block; margin-bottom: 8px; font-size: clamp(19px, 1.8vw, 22px); font-weight: 500; line-height: 1.3; letter-spacing: -0.015em; color: #fff; }

/* ---------- Closing call ---------- */
.edge-close-copy { max-width: 60ch; margin: -12px auto 36px !important; font-size: 17px; line-height: 1.65; color: var(--nxt-graphite); }

/* ---------- Smaller screens ---------- */
@media (max-width: 1020px) {
  .edge-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
}
@media (max-width: 720px) {
  .edge-steps, .edge-band-facts, .edge-feature-flip { grid-template-columns: 1fr; }
  .edge-steps { gap: 28px; }
  .edge-band-facts { gap: 24px; }
  .edge-diagram { padding: 20px; }
}