/* NEXT Difference widget (home section 4 — "Make NEXT your choice for good reason").
 * Colors + fonts come from the site brand kit (--next-* tokens).
 */
.nx-diff {
  --nx-slant: 19.03deg;   /* hero Request a Quote taper: atan(20 / 58) */
  --nx-gutter: clamp(16px, 4vw, 56px);

  box-sizing: border-box;
  padding: clamp(64px, 8vw, 110px) var(--nx-gutter);
  background: var(--next-white);
  color: var(--next-body);
  font-family: var(--next-font-head);
}
.nx-diff *, .nx-diff *::before, .nx-diff *::after { box-sizing: border-box; }
.nx-diff-in {
  max-width: 1480px; margin: 0 auto; padding-inline: clamp(28px, 3vw, 56px);   /* lines up with the sections above */
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); align-items: start;
}

/* Left: heading block stays in view while the rows scroll past */
.nx-diff-side { position: sticky; top: 40px; }
.nx-diff .eyebrow {
  display: flex; align-items: center; gap: 14px; margin: 0 0 16px;
  font: 700 12px/1 var(--next-font-sub); letter-spacing: .2em; text-transform: uppercase; color: var(--next-red);
}
.nx-diff .eyebrow::after { content: ""; width: 48px; height: 2px; background: var(--next-red); }
.nx-diff-side h2, .nx-diff-side h3 {
  margin: 0 0 18px; color: var(--next-black);
  font: 700 clamp(32px, 4vw, 52px)/1.08 var(--next-font-head); letter-spacing: -.02em; text-wrap: balance;
}
.nx-diff .intro { margin: 0 0 36px; max-width: 58ch; font: 400 18px/1.65 var(--next-font-head); color: var(--next-body); }

/* Button — same shape as the hero's Request a Quote */
.nx-diff .btn { display: inline-flex; align-items: stretch; height: 58px; text-decoration: none; }
.nx-diff .btn-label {
  display: flex; align-items: center; padding: 0 44px 0 28px;
  background: var(--next-red); color: var(--next-black);   /* black on red = 5.9:1, per the brand kit */
  font: 700 15px/1 var(--next-font-call); letter-spacing: .08em; text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%);
  transition: background .2s;
}
.nx-diff .btn-arrow {
  width: 64px; margin-left: -14px; padding-left: 14px; display: grid; place-items: center;
  background: var(--next-cyan); clip-path: polygon(20px 0, 100% 0, 100% 100%, 0 100%);
}
.nx-diff .btn-arrow svg { width: 15px; height: 15px; stroke: var(--next-black); fill: none; stroke-width: 2.6; transition: transform .25s; }
.nx-diff .btn:hover .btn-label { background: var(--next-red-hover); }
.nx-diff .btn:hover .btn-arrow svg { transform: translateX(4px); }
.nx-diff .btn:focus-visible { outline: 3px solid var(--next-cyan); outline-offset: 4px; }

/* Right: numbered rows */
.nx-diff-rows { border-top: 3px solid var(--next-black); }
.nx-diff-row {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: 64px minmax(0, 1fr) 44px; gap: 8px 24px; align-items: start;
  padding: 32px 24px 34px 8px; border-bottom: 1px solid var(--next-border);
  color: inherit; text-decoration: none; outline: none;
}
.nx-diff-num { font: 700 15px/1.6 var(--next-font-call); letter-spacing: .08em; color: var(--next-red); transition: color .3s; }
.nx-diff-row h3 { margin: 0 0 8px; color: var(--next-black); font: 700 clamp(22px, 2.2vw, 30px)/1.25 var(--next-font-head); letter-spacing: -.01em; }
.nx-diff-row p { margin: 0; font: 400 15.5px/1.6 var(--next-font-head); color: var(--next-body); transition: color .3s; }
.nx-diff-ico { width: 40px; height: 40px; color: var(--next-red); transition: color .3s; }
.nx-diff-ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nx-diff-ico img { width: 100%; height: 100%; object-fit: contain; }
.nx-diff-ico.nx-ico-lib { display: grid; place-items: center; font-size: 34px; line-height: 1; }
.nx-diff-ico.nx-ico-lib svg { fill: currentColor; stroke: none; }

/* Hover — same red sweep as section 2 (NEXT Stats), on the hero button's slant */
.nx-diff-row::before, .nx-diff-row::after {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; width: 60%;
  background: var(--next-red); opacity: 0; transition: transform .35s ease, opacity .35s ease;
}
.nx-diff-row::before { left: -6%;  transform: translateX(-100%) skewX(calc(var(--nx-slant) * -1)); }
.nx-diff-row::after  { right: -6%; transform: translateX(100%)  skewX(calc(var(--nx-slant) * -1)); }
.nx-diff-row:hover::before, .nx-diff-row:hover::after,
.nx-diff-row:focus-visible::before, .nx-diff-row:focus-visible::after { opacity: 1; transform: translateX(0) skewX(calc(var(--nx-slant) * -1)); }
.nx-diff-row:hover .nx-diff-num, .nx-diff-row:focus-visible .nx-diff-num,
.nx-diff-row:hover .nx-diff-ico, .nx-diff-row:focus-visible .nx-diff-ico,
.nx-diff-row:hover p, .nx-diff-row:focus-visible p { color: var(--next-black); }
.nx-diff-row:focus-visible { box-shadow: inset 0 0 0 3px var(--next-cyan); }

@media (max-width: 1100px) {
  .nx-diff-in { grid-template-columns: 1fr; padding-inline: 28px; }
  .nx-diff-side { position: static; }
  /* wider rows: pull the red panels in so white corners still show (as in section 2) */
  .nx-diff-row::before { left: 0; width: 56%; }
  .nx-diff-row::after  { right: 0; width: 56%; }
}
@media (max-width: 560px) {
  .nx-diff-in { padding-inline: 20px; }
  .nx-diff .intro { font-size: 16px; }
  .nx-diff-row { grid-template-columns: 40px minmax(0, 1fr); padding-right: 12px; }
  .nx-diff-ico { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nx-diff-row::before, .nx-diff-row::after, .nx-diff-num, .nx-diff-ico, .nx-diff-row p { transition: none; }
}