/* Northside 4x4 lift kit store (build_store.py). Own design; only the brand colours carry over from the logo:
   ink #0a0203, cyan #00aeef, white, and the black/white/cyan stripe. Contrast checked: --cyan-ink 5.9:1 and --muted 6.9:1 on white. */
:root {
  --ink: #0a0203; --ink-2: #15171b; --ink-3: #2a2d33;
  --cyan: #00aeef; --cyan-ink: #006c97; --cyan-wash: #e6f6fd;
  --paper: #ffffff; --stone: #f4f5f3; --line: #dcdfe3; --muted: #545b66; --muted-2: #6b717a; --field: #8a919b;
  --on-dark: #d5d8dc; --on-dark-2: #9aa0a8;
  --warn-bg: #fff4dc; --warn: #6b4a00;
  --r-sm: 4px; --r: 8px; --r-lg: 12px; --r-xl: 16px;
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1240px; --gutter: 20px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.nx { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.55; color: var(--ink); background: var(--stone); -webkit-font-smoothing: antialiased; }
.nx img { display: block; max-width: 100%; height: auto; }
.nx :where(button, select, input, textarea) { font: inherit; color: inherit; }
.nx :where(a) { color: inherit; }
.nx [hidden] { display: none !important; }
.nx-wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.nx-skip { position: absolute; left: 12px; top: -60px; background: var(--cyan); color: var(--ink); padding: 10px 14px; border-radius: var(--r); font-weight: 700; z-index: 100; }
.nx-skip:focus { top: 12px; }

/* focus: ink ring on light surfaces, cyan on dark */
.nx :focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.nx-header :focus-visible, .nx-footer :focus-visible, .nx-hero :focus-visible, .nx-vhero :focus-visible, .nx-band :focus-visible,
.nx-section--dark :focus-visible, .nx-filters__help :focus-visible { outline-color: var(--cyan); }
.nx-finder :focus-visible { outline-color: var(--ink); }

/* type */
.nx-h1 { margin: 0; font-weight: 800; font-stretch: 125%; text-transform: uppercase; letter-spacing: -0.01em; line-height: .98; font-size: clamp(34px, 4.4vw, 56px); color: #fff; text-wrap: balance; }
.nx-h1--xl { font-size: clamp(38px, 4.6vw, 60px); }
.nx-h2 { margin: 0 0 12px; font-weight: 800; font-stretch: 112%; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; letter-spacing: -0.005em; text-wrap: balance; }
.nx-h2--light { color: #fff; }
.nx-h3 { margin: 0 0 10px; font-weight: 700; font-size: 20px; line-height: 1.25; }
.nx-lede { margin: 0; color: var(--muted); font-size: 17px; max-width: 62ch; }
.nx-lede--light { color: var(--on-dark); }
.nx-over { margin: 0 0 14px; color: var(--cyan); font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.nx-stars { color: var(--cyan); letter-spacing: 2px; font-size: 15px; }

/* buttons */
.nx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 11px 18px; border: 2px solid transparent; border-radius: var(--r);
  font-weight: 700; font-size: 15px; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap; background: none; }
.nx-btn:active { transform: translateY(1px); }
.nx-btn--cyan { background: var(--cyan); color: var(--ink); }
.nx-btn--ink { background: var(--ink); color: #fff; }
.nx-btn--outline { border-color: var(--ink); color: var(--ink); background: #fff; }
.nx-btn--outline-light { border-color: rgba(255,255,255,.7); color: #fff; }
.nx-btn--lg { min-height: 52px; padding: 14px 24px; font-size: 16px; }
.nx-btn--block { width: 100%; }
.nx-btn:disabled { background: #e3e5e8; color: var(--muted-2); cursor: not-allowed; transform: none; }
.nx-link-btn { border: 0; background: none; padding: 6px 0; color: var(--cyan-ink); font-weight: 700; font-size: 14px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) {
  .nx-btn--cyan:hover:not(:disabled) { background: #fff; color: var(--ink); border-color: var(--ink); }
  .nx-btn--ink:hover { background: var(--cyan); color: var(--ink); }
  .nx-btn--outline:hover { background: var(--ink); color: #fff; }
  .nx-btn--outline-light:hover { background: #fff; color: var(--ink); border-color: #fff; }
  .nx-link-btn:hover { color: var(--ink); }
}

/* stripes from the logo */
.nx-stripes { height: 6px; background: linear-gradient(#fff 0 34%, var(--cyan) 34% 100%); }

/* header */
.nx-header { background: var(--ink); color: #fff; position: relative; z-index: 20; }
.nx-header__bar { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 10px var(--gutter); display: flex; align-items: center; gap: 28px; min-height: 84px; }
.nx-header__logo { display: block; width: 86px; flex: none; }
.nx-header__logo svg, .nx-footer__logo svg { width: 100%; height: auto; display: block; }
.nx-header__nav { display: flex; gap: 22px; flex-wrap: wrap; }
.nx-header__nav a { color: var(--on-dark); text-decoration: none; font-weight: 600; font-size: 15px; padding: 8px 0; border-bottom: 2px solid transparent; }
.nx-header__nav a[aria-current] { color: #fff; border-color: var(--cyan); }
.nx-header__actions { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.nx-header__phone { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-weight: 700; white-space: nowrap; }
.nx-header__phone svg { width: 18px; height: 18px; fill: var(--cyan); }
@media (hover: hover) { .nx-header__nav a:hover, .nx-header__phone:hover { color: var(--cyan); } }
.nx-menu { display: none; position: relative; }
.nx-menu summary { list-style: none; width: 44px; height: 44px; display: grid; place-content: center; gap: 5px; cursor: pointer; border-radius: var(--r); border: 2px solid var(--ink-3); }
.nx-menu summary::-webkit-details-marker { display: none; }
.nx-menu summary span { display: block; width: 20px; height: 2px; background: #fff; }
.nx-menu__panel { position: absolute; right: 0; top: 54px; width: min(320px, calc(100vw - 32px)); background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: var(--r-lg); padding: 10px; display: grid; box-shadow: 0 20px 50px rgba(0,0,0,.4); }
.nx-menu__panel a { color: #fff; text-decoration: none; padding: 12px 12px; border-radius: var(--r); font-weight: 600; }
.nx-menu__panel a[aria-current] { color: var(--cyan); }
.nx-menu__call { margin-top: 6px; background: var(--cyan); color: var(--ink) !important; text-align: center; font-weight: 800 !important; }

/* breadcrumbs (on dark heroes) */
.nx-crumbs ol { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; color: var(--on-dark-2); }
.nx-crumbs li:not(:last-child)::after { content: "/"; margin-left: 6px; color: #5d636c; }
.nx-crumbs a { color: var(--on-dark); text-decoration: none; }
.nx-crumbs a:hover { color: #fff; text-decoration: underline; }

/* hero (finder and make pages): photo on the right, ink on the left */
.nx-hero { position: relative; background: var(--ink); color: #fff; overflow: hidden; isolation: isolate; }
.nx-hero::before { content: ""; position: absolute; inset: 0 0 0 30%; background: var(--photo) 30% 60% / cover; z-index: -2; }
.nx-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--ink) 0%, var(--ink) 32%, rgba(10,2,3,.7) 46%, rgba(10,2,3,.1) 66%, rgba(10,2,3,0) 100%); }
.nx-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 56px; align-items: center; padding-block: 72px; }
.nx-hero__text, .nx-vhero__text { min-width: 0; }
.nx-hero__text { max-width: 760px; }
.nx-hero__lede { margin: 20px 0 0; font-size: 19px; color: var(--on-dark); max-width: 34ch; }
.nx-hero__proof { margin: 32px 0 0; max-width: 46ch; }
.nx-hero__proof blockquote { margin: 6px 0 6px; font-size: 16px; color: #fff; }
.nx-hero__proof figcaption { font-size: 14px; color: var(--on-dark-2); }
.nx-hero__badge { display: inline-flex; background: #fff; border-radius: var(--r-lg); padding: 12px 18px; margin-bottom: 20px; }
.nx-hero__badge img { height: 48px; width: auto; max-width: 180px; object-fit: contain; }

/* finder */
.nx-finder { background: #fff; color: var(--ink); border-radius: var(--r-xl); padding: 28px; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.nx-steps { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; counter-reset: step; }
.nx-steps li { counter-increment: step; padding-top: 10px; border-top: 4px solid var(--line); font-size: 13px; font-weight: 700; color: var(--muted-2); }
.nx-steps li::before { content: counter(step) ". "; }
.nx-steps li[data-state="now"] { color: var(--ink); border-color: var(--cyan); }
.nx-steps li[data-state="done"] { color: var(--ink); border-color: var(--ink); }
.nx-finder__title { margin: 0 0 16px; font-size: 22px; font-weight: 800; font-stretch: 112%; line-height: 1.2; }
.nx-finder__sub { margin: -8px 0 16px; color: var(--muted); font-size: 15px; }
.nx-finder__hint { margin: 12px 0 0; font-size: 14px; color: var(--muted); }
.nx-finder__hint a { color: var(--ink); font-weight: 700; }
.nx-finder__foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; }
.nx-field { display: grid; gap: 6px; margin-bottom: 14px; }
.nx-field label { font-size: 14px; font-weight: 700; color: #33383f; }
.nx-field select { appearance: none; width: 100%; min-height: 50px; padding: 12px 44px 12px 14px; border: 1.5px solid var(--field); border-radius: var(--r); font-size: 16px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%230a0203' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat right 16px center; }
.nx-field select:disabled { background-color: var(--stone); border-color: var(--line); color: var(--muted-2); cursor: not-allowed; }
.nx-field select:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(0,174,239,.45); }
.nx-variants { display: grid; gap: 10px; }
.nx-variants button { display: grid; gap: 2px; text-align: left; padding: 14px 16px; border: 1.5px solid var(--field); border-radius: var(--r-lg); background: #fff; cursor: pointer; }
.nx-variants b { font-size: 17px; }
.nx-variants span { font-size: 14px; color: var(--muted); }
.nx-uses { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nx-use { display: grid; gap: 6px; align-content: start; text-align: left; padding: 14px; border: 1.5px solid var(--field); border-radius: var(--r-lg); background: #fff; cursor: pointer; }
.nx-use svg, .nx-seg__btn svg { width: 28px; height: 28px; fill: none; stroke: var(--cyan-ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nx-use b { font-size: 15px; line-height: 1.25; }
.nx-use span { font-size: 13px; color: var(--muted); line-height: 1.35; }
@media (hover: hover) { .nx-variants button:hover, .nx-use:hover { border-color: var(--ink); background: var(--stone); } }

/* sections */
.nx-section { padding-block: 72px; }
.nx-section--tight { padding-block: 48px; }
.nx-section--dark { background: var(--ink); color: #fff; }
.nx-sechead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; margin-bottom: 24px; }
.nx-sechead .nx-h2 { margin: 0; }

/* makes */
.nx-makes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.nx-make { display: grid; justify-items: start; gap: 2px; padding: 18px; background: #fff; border-radius: var(--r-lg); text-decoration: none; color: var(--ink); border: 1.5px solid transparent; }
.nx-make__logo { height: 52px; display: flex; align-items: center; margin-bottom: 10px; }
.nx-makelogo { max-height: 44px; max-width: 130px; width: auto; object-fit: contain; }
.nx-make__name { font-weight: 700; font-size: 16px; }
.nx-make__count { font-size: 14px; color: var(--muted); }
.nx-make.is-current { border-color: var(--ink); }
@media (hover: hover) { .nx-make:hover { border-color: var(--ink); } }
.nx-makes--compact { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.nx-makes--compact .nx-make { padding: 14px; }
.nx-makes--compact .nx-make__logo { height: 40px; margin-bottom: 6px; }
.nx-makes--compact .nx-makelogo { max-height: 34px; max-width: 100px; }
.nx-makes--compact .nx-make__count { display: none; }

/* gallery */
.nx-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.nx-gallery__item { margin: 0; }
.nx-gallery__item img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); width: 100%; }
.nx-gallery__item figcaption { margin-top: 8px; font-size: 14px; color: var(--on-dark-2); }

/* about */
.nx-about { background: #fff; }
.nx-about__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 64px; }
.nx-about__text p { max-width: 62ch; color: #33383f; margin: 0 0 14px; }
.nx-about__ranges dl { margin: 0; }
.nx-about__ranges dl div { padding: 14px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 150px 1fr; gap: 12px; }
.nx-about__ranges dt { font-weight: 700; }
.nx-about__ranges dd { margin: 0; color: var(--muted); }

/* reviews */
.nx-reviews__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.nx-quote { margin: 0; }
.nx-quote blockquote { margin: 8px 0 8px; font-size: 16px; }
.nx-quote figcaption { font-size: 14px; color: var(--muted); }
.nx-quote--big blockquote { font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; font-stretch: 105%; line-height: 1.3; }
.nx-reviews__list .nx-quote { padding: 18px 0; border-top: 1px solid var(--line); }
.nx-reviews__list .nx-quote:first-child { border-top: 0; padding-top: 0; }

/* band */
.nx-band { background: var(--ink); color: #fff; }
.nx-band__inner { padding-block: 56px; display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: center; justify-content: space-between; }
.nx-band__text { max-width: 60ch; }
.nx-band__text p { margin: 0; color: var(--on-dark); }

/* footer */
.nx-footer { background: var(--ink); color: var(--on-dark); border-top: 1px solid var(--ink-3); }
.nx-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 40px; padding-block: 56px 40px; }
.nx-footer__logo { display: block; width: 96px; margin-bottom: 16px; }
.nx-footer__brand p { margin: 0; max-width: 34ch; font-size: 15px; }
.nx-footer h2 { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: #fff; }
.nx-footer__grid > div:not(.nx-footer__brand) { display: grid; gap: 8px; align-content: start; font-size: 15px; }
.nx-footer a { color: var(--on-dark); text-decoration: none; }
.nx-footer a:hover { color: #fff; text-decoration: underline; }
.nx-footer__base { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-block: 18px 28px; border-top: 1px solid var(--ink-3); font-size: 13px; color: var(--on-dark-2); }
.nx-footer__base a { color: var(--on-dark-2); }

/* vehicle hero */
.nx-vhero { background: var(--ink); color: #fff; }
.nx-vhero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 48px; align-items: center; padding-block: 48px; }
.nx-vhero__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 16px 0 0; color: var(--on-dark); font-size: 16px; }
.nx-vhero__meta span:not(:last-child)::after { content: "·"; margin-left: 18px; color: #5d636c; }
.nx-vhero__meta b { color: var(--cyan); }
.nx-vhero__photo { margin: 0; }
.nx-vhero__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-xl); }
.nx-vhero__photo figcaption { margin-top: 8px; font-size: 13px; color: var(--on-dark-2); }
.nx-switch { margin-top: 26px; }
.nx-vhero__change { display: inline-block; margin-top: 16px; color: var(--cyan); font-weight: 700; font-size: 15px; }
.nx-switch__label { display: block; font-size: 14px; color: var(--on-dark-2); margin-bottom: 8px; }
.nx-switch__list { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.nx-switch__all { display: inline-flex; align-items: center; padding: 10px 4px; color: var(--cyan); font-weight: 700; font-size: 14px; }
.nx-switch .nx-gen { background: transparent; border-color: var(--ink-3); color: #fff; }
.nx-switch .nx-gen__code, .nx-switch .nx-gen__count { color: var(--on-dark-2); }
.nx-switch .nx-gen.is-current { border-color: var(--cyan); }
@media (hover: hover) { .nx-switch .nx-gen:hover { border-color: #fff; } }

/* generation chips (make page rows and the vehicle switcher) */
.nx-gen { display: grid; gap: 1px; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: var(--r); background: #fff; text-decoration: none; color: var(--ink); min-width: 120px; }
.nx-gen b { font-size: 15px; }
.nx-gen__code { font-size: 13px; color: var(--muted); max-width: 26ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-gen__code:empty { display: none; }
.nx-gen__count { font-size: 13px; font-weight: 700; color: var(--cyan-ink); }
.nx-gen.is-current { border-color: var(--ink); }
@media (hover: hover) { .nx-gen:hover { border-color: var(--ink); } }
.nx-families { margin-top: 24px; border-bottom: 1px solid var(--line); }
.nx-family { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; padding: 24px 0; border-top: 1px solid var(--line); scroll-margin-top: 16px; }
.nx-family:first-child { border-top: 0; }
.nx-family__name .nx-h3 { margin: 0 0 2px; }
.nx-family__name span { font-size: 14px; color: var(--muted); }
.nx-family__gens { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.nx-family:target { background: #fff; box-shadow: 0 0 0 12px #fff; border-radius: var(--r); }

/* suggestions */
.nx-suggest { background: #fff; border-bottom: 1px solid var(--line); }
.nx-suggest__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding-block: 24px; }
.nx-suggest__q { margin: 0; font-size: 22px; font-weight: 800; font-stretch: 112%; }
.nx-seg { display: flex; flex-wrap: wrap; border: 1.5px solid var(--field); border-radius: var(--r); overflow: hidden; }
.nx-seg__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 8px 16px; border: 0; border-left: 1.5px solid var(--line); background: #fff; cursor: pointer; font-weight: 600; font-size: 15px; }
.nx-seg__btn:first-child { border-left: 0; }
.nx-seg__btn svg { width: 22px; height: 22px; }
.nx-seg__btn[aria-pressed="true"] { background: var(--ink); color: #fff; }
.nx-seg__btn[aria-pressed="true"] svg { stroke: var(--cyan); }
@media (hover: hover) { .nx-seg__btn:hover:not([aria-pressed="true"]) { background: var(--stone); } }
.nx-picks { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; padding-bottom: 8px; align-items: start; }
.nx-pick { display: grid; grid-template-columns: 220px minmax(0, 1fr); background: #fff; border: 2px solid var(--ink); border-radius: var(--r-lg); overflow: hidden; }
.nx-pick__img { background: var(--stone); display: flex; align-items: center; justify-content: center; padding: 16px; }
.nx-pick__img img { max-height: 190px; width: auto; mix-blend-mode: multiply; }
.nx-pick__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; }
.nx-pick__label { margin: 0; font-size: 13px; font-weight: 800; color: var(--ink); }
.nx-pick__label span { color: var(--muted); font-weight: 600; }
.nx-pick__name { margin: 0; font-size: 19px; line-height: 1.3; }
.nx-pick__why { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; font-size: 15px; line-height: 1.4; color: #33383f; }
.nx-pick__why li { padding-left: 22px; position: relative; }
.nx-pick__why li::before { content: ""; position: absolute; left: 0; top: 3px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--cyan-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' stroke='%23006c97' stroke-width='1.8' fill='none'/%3E%3C/svg%3E") no-repeat center; }
.nx-pick__facts { margin: 2px 0 0; font-size: 14px; color: var(--muted); }
.nx-pick__actions { margin-top: 6px; display: flex; align-items: center; gap: 16px; }
.nx-pick__actions a, .nx-consider__name { font-size: 14px; font-weight: 700; color: var(--cyan-ink); }
.nx-consider { background: var(--stone); border-radius: var(--r-lg); padding: 16px 18px; }
.nx-consider__title { margin: 0 0 4px; font-size: 15px; font-weight: 800; }
.nx-consider__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.nx-consider__row:first-of-type { border-top: 0; }
.nx-consider__what { margin: 0 0 2px; font-size: 15px; }
.nx-consider__row .nx-btn { min-height: 40px; padding: 8px 14px; flex: none; }
.nx-note { margin: 12px 0 0; padding-bottom: 24px; font-size: 14px; color: var(--muted); max-width: 80ch; }

/* all kits */
.nx-all__body { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 8px; }
.nx-all__body--single { grid-template-columns: minmax(0, 1fr); }
.nx-filters { position: sticky; top: 16px; background: #fff; border-radius: var(--r-lg); padding: 18px 20px; }
.nx-filters__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.nx-filters__head h2 { margin: 0; font-size: 17px; }
.nx-filters__close, .nx-filters__apply { display: none; }
.nx-facet { border: 0; margin: 0; padding: 12px 0; border-top: 1px solid var(--line); }
.nx-facet legend { padding: 0; margin-bottom: 6px; font-size: 14px; font-weight: 700; }
.nx-check { display: flex; align-items: center; gap: 10px; min-height: 36px; cursor: pointer; font-size: 15px; }
.nx-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); flex: none; }
.nx-check__count { margin-left: auto; font-size: 13px; color: var(--muted); }
.nx-check.is-empty { color: var(--muted-2); }
.nx-filters__help { margin-top: 10px; background: var(--ink); color: #fff; border-radius: var(--r-lg); padding: 16px; }
.nx-filters__help p { margin: 0 0 12px; font-size: 14px; color: var(--on-dark); }
.nx-toolbar { display: flex; align-items: center; gap: 12px 16px; margin-bottom: 14px; flex-wrap: wrap; }
.nx-toolbar__filter { display: none; }
.nx-toolbar__badge { min-width: 22px; height: 22px; border-radius: 11px; background: var(--cyan); color: var(--ink); font-size: 12px; display: inline-grid; place-content: center; padding: 0 6px; }
.nx-toolbar__count { font-size: 15px; color: var(--muted); }
.nx-toolbar__sort { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.nx-toolbar__sort select { min-height: 40px; padding: 6px 10px; border: 1.5px solid var(--field); border-radius: var(--r); background: #fff; color: var(--ink); font-size: 15px; }
.nx-kits { display: grid; gap: 14px; }

/* kit card */
.nx-kit { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; padding: 20px; background: #fff; border-radius: var(--r-lg); border: 1.5px solid transparent; scroll-margin-top: 16px; }
.nx-kit:target { border-color: var(--cyan); }
.nx-kit__img { background: var(--stone); border-radius: var(--r); aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; padding: 12px; align-self: start; }
.nx-kit__img img { max-height: 100%; width: auto; mix-blend-mode: multiply; }
.nx-kit__noimg { font-size: 13px; color: var(--muted); }
.nx-kit__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px 24px; }
.nx-kit__range { margin: 0 0 4px; font-size: 13px; font-weight: 800; color: var(--cyan-ink); }
.nx-kit__match { margin-left: 10px; padding: 2px 8px; border-radius: var(--r-sm); background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; }
.nx-kit__name { margin: 0; font-size: 19px; line-height: 1.3; font-weight: 700; }
.nx-kit__fits { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.nx-kit__cta { display: grid; justify-items: end; gap: 6px; flex: none; }
.nx-kit__sku { font-size: 13px; color: var(--muted); }
.nx-specs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); }
.nx-specs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nx-specs dt { font-size: 13px; color: var(--muted); }
.nx-specs dd { margin: 2px 0 0; font-size: 15px; font-weight: 700; }
.nx-kit__flag { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; padding: 10px 12px; background: var(--warn-bg); color: var(--warn); border-radius: var(--r); font-size: 14px; }
.nx-kit__flag svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-top: 1px; }
.nx-kit__details { margin-top: 10px; }
.nx-more { border-top: 1px solid var(--line); }
.nx-more summary { list-style: none; cursor: pointer; padding: 11px 0; font-weight: 700; font-size: 15px; display: flex; justify-content: space-between; align-items: center; }
.nx-more summary::-webkit-details-marker { display: none; }
.nx-more summary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg) translate(-2px, -2px); }
.nx-more[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.nx-more ul { margin: 0 0 12px; padding-left: 20px; font-size: 15px; color: #33383f; }
.nx-more li { margin-bottom: 3px; }
.nx-more p { margin: 0 0 10px; font-size: 15px; color: #33383f; max-width: 75ch; }
.nx-empty { background: #fff; border: 1.5px dashed var(--field); border-radius: var(--r-lg); padding: 32px; text-align: center; }
.nx-empty p { margin: 0 0 14px; color: var(--muted); }
.nx-more-help { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 20px; background: #fff; border-radius: var(--r-lg); border: 1.5px dashed var(--field); }
.nx-more-help p { margin: 0; max-width: 60ch; }

/* sheet backdrop (filters on smaller screens) */
.nx-backdrop { position: fixed; inset: 0; background: rgba(10,2,3,.55); z-index: 40; }

/* enquiry dialog */
.nx-dialog { border: 0; padding: 0; border-radius: var(--r-xl); width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); color: var(--ink); box-shadow: 0 30px 80px rgba(0,0,0,.35); font-family: var(--font); }
.nx-dialog::backdrop { background: rgba(10,2,3,.6); }
.nx-form { position: relative; display: grid; gap: 14px; padding: 28px; }
.nx-form__over { margin: 0; font-size: 14px; font-weight: 700; color: var(--cyan-ink); }
.nx-form__title { margin: -6px 30px 0 0; font-size: 20px; line-height: 1.3; }
.nx-form__context { margin: -6px 0 0; font-size: 14px; color: var(--muted); }
.nx-form__context:empty { display: none; }
.nx-form label { display: grid; gap: 6px; }
.nx-form__label { font-weight: 700; font-size: 14px; }
.nx-form__label i { color: var(--cyan-ink); font-style: normal; }
.nx-form__label em { font-style: normal; font-weight: 400; color: var(--muted); font-size: 13px; margin-left: 4px; }
.nx-form input:not([type=hidden]), .nx-form textarea { width: 100%; min-height: 48px; padding: 11px 12px; border: 1.5px solid var(--field); border-radius: var(--r); font-size: 16px; font-weight: 400; background: #fff; }
.nx-form textarea { min-height: 90px; resize: vertical; }
.nx-form input:focus-visible, .nx-form textarea:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(0,174,239,.45); }
.nx-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.nx-form__close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border: 0; border-radius: var(--r); background: none; font-size: 28px; line-height: 1; cursor: pointer; color: var(--muted); }
.nx-form__close:hover { background: var(--stone); color: var(--ink); }
.nx-form__note { margin: 0; font-size: 13px; color: var(--muted); }
.nx-form .crsp-form-error { color: #a4161a; font-size: 14px; font-weight: 600; }
.nx-form [aria-busy="true"] .nx-btn, .nx-form[aria-busy="true"] button[type=submit] { opacity: .7; }

/* pressed states */
.nx-use:active, .nx-seg__btn:active, .nx-make:active, .nx-gen:active, .nx-variants button:active, .nx-more summary:active { transform: translateY(1px); }
.nx-use:active, .nx-variants button:active { background: var(--stone); }

/* motion: calm, and only when the visitor allows it */
@media (prefers-reduced-motion: no-preference) {
  .nx-btn, .nx-make, .nx-gen, .nx-use, .nx-variants button, .nx-seg__btn, .nx-header__nav a, .nx-makelogo { transition: background-color .18s, color .18s, border-color .18s, filter .18s, opacity .18s; }
  html { scroll-behavior: smooth; }
}

/* tablet */
@media (max-width: 1100px) {
  .nx-header__nav { display: none; }
  .nx-menu { display: block; }
  .nx-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: 48px 56px; }
  .nx-hero::before { inset: 0; opacity: .45; }
  .nx-hero::after { background: linear-gradient(180deg, rgba(10,2,3,.6) 0%, rgba(10,2,3,.92) 55%, var(--ink) 100%); }
  .nx-finder { max-width: 560px; }
  .nx-makes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nx-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nx-vhero__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .nx-vhero__photo { order: 2; }
  .nx-vhero__photo img { aspect-ratio: 21 / 9; }
  .nx-picks { grid-template-columns: minmax(0, 1fr); }
  .nx-pick { grid-template-columns: 180px minmax(0, 1fr); }
  .nx-all__body { grid-template-columns: minmax(0, 1fr); }
  .nx-toolbar__filter { display: inline-flex; }
  .nx-filters { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 50; max-height: 85dvh; overflow: auto; border-radius: var(--r-xl) var(--r-xl) 0 0; padding: 20px 20px 0; transform: translateY(105%); visibility: hidden; box-shadow: 0 -20px 50px rgba(0,0,0,.3); }
  .nx-filters.is-open { transform: none; visibility: visible; }
  .nx-filters__close { display: grid; place-content: center; width: 40px; height: 40px; border: 0; background: var(--stone); border-radius: var(--r); font-size: 24px; cursor: pointer; }
  .nx-filters__apply { display: block; position: sticky; bottom: 0; background: #fff; padding: 14px 0 18px; margin-top: 10px; }
  .nx-filters__help { display: none; }
  .nx-about__grid, .nx-reviews__grid { grid-template-columns: 1fr; gap: 36px; }
  .nx-footer__grid { grid-template-columns: 1fr 1fr; }
  @media (prefers-reduced-motion: no-preference) { .nx-filters { transition: transform .25s ease, visibility .25s; } }
}

/* phone */
@media (max-width: 640px) {
  :root { --gutter: 16px; }
  .nx-header__bar { min-height: 68px; gap: 12px; }
  .nx-header__logo { width: 64px; }
  .nx-header__book { display: none; }
  .nx-header__phone span { display: none; }
  .nx-header__phone { width: 44px; height: 44px; justify-content: center; border-radius: var(--r); border: 2px solid var(--ink-3); }
  .nx-section { padding-block: 48px; }
  .nx-hero__grid { padding-block: 32px 40px; gap: 24px; }
  .nx-hero__lede { font-size: 17px; margin-top: 14px; }
  .nx-hero__proof { display: none; }
  .nx-hero--make .nx-hero__lede { display: none; }
  .nx-hero__badge { padding: 8px 12px; margin-bottom: 14px; }
  .nx-hero__badge img { height: 34px; }
  .nx-finder { padding: 20px; }
  .nx-uses { grid-template-columns: 1fr 1fr; }
  .nx-use span { display: none; }
  .nx-makes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .nx-make { padding: 14px; }
  .nx-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .nx-family { grid-template-columns: 1fr; gap: 12px; padding: 18px 16px; }
  .nx-gen { min-width: 0; flex: 1 1 140px; }
  .nx-vhero__grid { padding-block: 24px 32px; gap: 20px; }
  .nx-vhero__photo { order: 2; }
  .nx-vhero__photo img { aspect-ratio: 21 / 9; border-radius: var(--r-lg); }
  .nx-vhero__photo figcaption { display: none; }
  .nx-h1 { font-size: clamp(28px, 8vw, 34px); }
  .nx-h1--xl { font-size: clamp(30px, 8.6vw, 36px); }
  .nx-vhero__meta { font-size: 15px; }
  .nx-switch__list { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 40px; }
  .nx-switch .nx-gen { flex: none; }
  .nx-suggest__bar { padding-block: 20px; }
  .nx-suggest__q { font-size: 19px; }
  .nx-seg { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .nx-seg__btn { border-left: 0; border-top: 1.5px solid var(--line); justify-content: flex-start; font-size: 14px; }
  .nx-seg__btn:nth-child(-n+2) { border-top: 0; }
  .nx-seg__btn:nth-child(even) { border-left: 1.5px solid var(--line); }
  .nx-pick { grid-template-columns: 1fr; }
  .nx-pick__img { height: 150px; }
  .nx-pick__img img { max-height: 130px; }
  .nx-pick__body { padding: 14px 16px 16px; }
  .nx-consider__row { align-items: flex-start; }
  .nx-family__gens { grid-template-columns: 1fr 1fr; }
  .nx-kit { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 14px; }
  .nx-kit__img { padding: 6px; }
  /* phone card: photo beside the name, then specs, warning, button, details */
  .nx-kit__main, .nx-kit__head { display: contents; }
  .nx-kit__img { grid-column: 1; grid-row: 1; }
  .nx-kit__head > div:first-child { grid-column: 2; grid-row: 1; align-self: center; }
  .nx-kit__name { font-size: 17px; }
  .nx-kit__fits { display: none; }
  .nx-specs, .nx-specs--3 { grid-column: 1 / -1; order: 1; grid-template-columns: 1fr 1fr; margin-top: 0; }
  .nx-kit__flag { grid-column: 1 / -1; order: 2; margin-top: 0; }
  .nx-kit__cta { grid-column: 1 / -1; order: 3; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
  .nx-kit__cta .nx-btn { flex: 1; }
  .nx-kit__cta .nx-kit__sku { order: -1; flex: none; }
  .nx-kit__details { grid-column: 1 / -1; order: 4; margin-top: -6px; }
  .nx-toolbar__count { display: none; }
  .nx-about__ranges dl div { grid-template-columns: 1fr; gap: 2px; }
  .nx-band__inner { padding-block: 40px; }
  .nx-band .nx-btn { width: 100%; }
  .nx-footer__grid { grid-template-columns: 1fr; gap: 28px; padding-block: 40px 28px; }
  .nx-form { padding: 22px 18px; }
  .nx-form__row { grid-template-columns: 1fr; }
}

/* ---------- finder-first hero on /lift-kits/ (Kyle, 16 Oct: the quiz front and centre) ---------- */
.nx-hero--quiz::before { inset: 0; background-position: center 55%; }
.nx-hero--quiz::after { background: linear-gradient(180deg, rgba(10,2,3,.86) 0%, rgba(10,2,3,.62) 45%, rgba(10,2,3,.9) 100%); }
.nx-quiz { display: grid; justify-items: center; text-align: center; padding-block: 64px 56px; }
.nx-quiz .nx-h1 { max-width: 22ch; }
.nx-quiz__lede { margin: 18px 0 0; max-width: 46ch; font-size: 19px; color: var(--on-dark); }
.nx-quiz__trust { margin: 24px 0 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 10px; font-size: 14px; color: var(--on-dark); }
.nx-quiz__dot { color: #5d636c; }
.nx-finder--wide { width: 100%; max-width: 1000px; margin-top: 36px; padding: 28px 32px 30px; text-align: left; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.nx-finder--wide .nx-steps { max-width: 560px; margin: 0 auto 22px; }
.nx-finder--wide .nx-finder__title { text-align: center; font-size: 26px; margin-bottom: 20px; }
.nx-finder--wide .nx-finder__sub, .nx-finder--wide .nx-finder__hint { text-align: center; margin-inline: auto; max-width: 60ch; }
.nx-finder--wide .nx-finder__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 14px; align-items: end; }
.nx-finder--wide .nx-finder__row .nx-field { margin: 0; }
.nx-finder--wide .nx-field select { min-height: 58px; font-size: 17px; }
.nx-finder--wide .nx-finder__row .nx-btn { width: auto; min-height: 58px; margin: 0; padding-inline: 34px; font-size: 17px; }
.nx-finder--wide .nx-variants { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.nx-finder--wide .nx-uses { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.nx-finder--wide .nx-use { padding: 20px 18px; gap: 8px; }
.nx-finder--wide .nx-use svg { width: 38px; height: 38px; }
.nx-finder--wide .nx-use b { font-size: 17px; }
.nx-finder--wide .nx-finder__foot { justify-content: center; gap: 28px; }
.nx-finder--wide [data-panel="variant"] > .nx-link-btn { display: block; margin: 12px auto 0; }
@media (max-width: 1100px) {
  .nx-finder--wide .nx-uses { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .nx-quiz { padding-block: 36px 40px; }
  .nx-quiz__lede { font-size: 17px; }
  .nx-finder--wide { margin-top: 24px; padding: 20px; }
  .nx-finder--wide .nx-finder__title { font-size: 22px; }
  .nx-finder--wide .nx-finder__row { grid-template-columns: 1fr; gap: 12px; }
  .nx-finder--wide .nx-finder__row .nx-btn { width: 100%; }
  .nx-finder--wide .nx-field select { min-height: 52px; font-size: 16px; }
  .nx-finder--wide .nx-use { padding: 14px; }
  .nx-finder--wide .nx-use b { font-size: 15px; }
}

/* ---------- motion and flourishes (Kyle, 16 Oct). Everything here sits under html.nx-motion, which store.js only
   adds when the visitor has not asked for reduced motion, so without it every element simply shows. ---------- */
.nx-quiz__stripe { display: grid; gap: 3px; width: 92px; margin-top: 18px; }
.nx-quiz__stripe i { display: block; height: 4px; border-radius: 2px; }
.nx-quiz__stripe i:nth-child(1) { background: #fff; }
.nx-quiz__stripe i:nth-child(2) { background: var(--cyan); width: 80%; justify-self: center; }
.nx-quiz__stripe i:nth-child(3) { background: #fff; opacity: .35; width: 55%; justify-self: center; }
.nx-btn--arrow::after { content: "→"; display: inline-block; font-weight: 800; }
.nx-steps li { position: relative; }
.nx-steps li::after { content: ""; position: absolute; left: 0; top: -4px; height: 4px; width: 0; background: var(--cyan); }
.nx-steps li[data-state="now"]::after { width: 100%; }
.nx-steps li[data-state="done"]::after { width: 100%; background: var(--ink); }
.nx-sechead .nx-h2 { position: relative; }

@keyframes nx-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes nx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes nx-slide-in { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes nx-zoom-out { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes nx-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes nx-ready { 0% { box-shadow: 0 0 0 0 rgba(0,174,239,.6); } 100% { box-shadow: 0 0 0 14px rgba(0,174,239,0); } }
@keyframes nx-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes nx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.nx-motion .nx-steps li::after { transition: width .55s cubic-bezier(.2,.8,.2,1), background-color .3s; }

/* page entrance */
.nx-motion .nx-header .nx-stripes { transform-origin: left; animation: nx-draw .9s cubic-bezier(.6,0,.2,1) both .1s; }
.nx-motion .nx-hero::before { animation: nx-zoom-out 2.2s cubic-bezier(.2,.7,.2,1) both; }
.nx-motion .nx-quiz > * { animation: nx-rise .8s cubic-bezier(.2,.7,.2,1) both; }
.nx-motion .nx-quiz > :nth-child(1) { animation-delay: .15s; }
.nx-motion .nx-quiz > :nth-child(2) { animation: nx-draw .7s cubic-bezier(.6,0,.2,1) both .45s; }
.nx-motion .nx-quiz > :nth-child(3) { animation-delay: .35s; }
.nx-motion .nx-quiz > :nth-child(4) { animation-delay: .5s; }
.nx-motion .nx-quiz > :nth-child(5) { animation-delay: .75s; }
.nx-motion .nx-hero__text > *, .nx-motion .nx-vhero__text > * { animation: nx-rise .7s cubic-bezier(.2,.7,.2,1) both; }
.nx-motion .nx-hero__text > :nth-child(2), .nx-motion .nx-vhero__text > :nth-child(2) { animation-delay: .1s; }
.nx-motion .nx-hero__text > :nth-child(3), .nx-motion .nx-vhero__text > :nth-child(3) { animation-delay: .2s; }
.nx-motion .nx-hero__text > :nth-child(4), .nx-motion .nx-vhero__text > :nth-child(4) { animation-delay: .3s; }
.nx-motion .nx-hero__text > :nth-child(n+5), .nx-motion .nx-vhero__text > :nth-child(n+5) { animation-delay: .4s; }
.nx-motion .nx-hero__grid > .nx-finder { animation: nx-rise .8s cubic-bezier(.2,.7,.2,1) both .3s; }
.nx-motion .nx-vhero__photo { animation: nx-fade 1s ease both .2s; }
.nx-motion .nx-vhero__photo img { animation: nx-zoom-out 1.8s cubic-bezier(.2,.7,.2,1) both; }

/* finder steps */
.nx-motion [data-panel].is-entering { animation: nx-slide-in .45s cubic-bezier(.2,.7,.2,1) both; }
.nx-motion [data-panel].is-entering .nx-use, .nx-motion [data-panel].is-entering .nx-variants button { animation: nx-rise .5s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(.08s + var(--i, 0) * .07s); }
.nx-motion [data-finder-next].is-ready { animation: nx-ready .9s ease-out 1; }
.nx-motion .nx-field select:not(:disabled) { transition: border-color .2s, box-shadow .2s, background-color .2s; }

/* scroll reveals (store.js tags these and adds .is-in as they come into view) */
.nx-motion .nx-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 55ms); }
.nx-motion .nx-reveal.is-in { opacity: 1; transform: none; }
.nx-motion .nx-sechead .nx-h2::after { content: ""; position: absolute; left: 0; bottom: -10px; width: 56px; height: 4px; border-radius: 2px; background: var(--cyan); transform: scaleX(0); transform-origin: left; transition: transform .8s cubic-bezier(.6,0,.2,1) .25s; }
.nx-motion .nx-sechead.is-in .nx-h2::after { transform: scaleX(1); }

/* suggestions and details */
.nx-motion .nx-picks.is-swap > * { animation: nx-rise .5s cubic-bezier(.2,.7,.2,1) both; }
.nx-motion .nx-picks.is-swap > :nth-child(2) { animation-delay: .1s; }
.nx-motion .nx-kits.is-shuffle .nx-kit:not([hidden]) { animation: nx-rise .45s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(min(var(--n, 0), 6) * 45ms); }
.nx-motion .nx-more[open] > :not(summary) { animation: nx-drop .3s ease both; }
.nx-motion .nx-more summary::after { transition: transform .25s ease; }
.nx-motion .nx-dialog[open] { animation: nx-rise .35s cubic-bezier(.2,.7,.2,1) both; }
.nx-motion .nx-dialog[open]::backdrop { animation: nx-fade .3s ease both; }

/* hover flourishes (mouse only) */
@media (hover: hover) {
  .nx-motion .nx-btn--arrow::after { transition: transform .25s cubic-bezier(.2,.7,.2,1); }
  .nx-motion .nx-btn--arrow:hover:not(:disabled)::after { transform: translateX(4px); }
  .nx-motion .nx-header__nav a { position: relative; border-bottom-color: transparent !important; }
  .nx-motion .nx-header__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--cyan); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
  .nx-motion .nx-header__nav a:hover::after, .nx-motion .nx-header__nav a[aria-current]::after { transform: scaleX(1); }
  .nx-motion .nx-make, .nx-motion .nx-gen, .nx-motion .nx-kit, .nx-motion .nx-pick, .nx-motion .nx-use, .nx-motion .nx-variants button { transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .2s, background-color .2s; }
  .nx-motion .nx-make:hover, .nx-motion .nx-gen:hover, .nx-motion .nx-use:hover, .nx-motion .nx-variants button:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(10,2,3,.12); }
  .nx-motion .nx-makelogo { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
  .nx-motion .nx-make:hover .nx-makelogo { transform: scale(1.07); }
  .nx-motion .nx-kit:hover { box-shadow: 0 16px 34px rgba(10,2,3,.09); transform: translateY(-2px); }
  .nx-motion .nx-kit__img img, .nx-motion .nx-pick__img img { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
  .nx-motion .nx-kit:hover .nx-kit__img img, .nx-motion .nx-pick:hover .nx-pick__img img { transform: scale(1.06) rotate(-1deg); }
  .nx-motion .nx-gallery__item { overflow: hidden; border-radius: var(--r-lg); }
  .nx-motion .nx-gallery__item img { transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .4s; }
  .nx-motion .nx-gallery__item:hover img { transform: scale(1.06); filter: saturate(1.15); }
  .nx-motion .nx-use:hover svg { animation: nx-float 1.2s ease-in-out infinite; }
}

/* ---------- browse by make (finder page) ---------- */
.nx-mcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.nx-mcard { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: var(--r-lg); overflow: hidden; text-decoration: none; color: var(--ink); border: 1.5px solid transparent; }
.nx-mcard__photo { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink); }
.nx-mcard__photo img { width: 100%; height: 100%; object-fit: cover; }
.nx-mcard__badge { position: absolute; left: 20px; top: calc((100% - 0px) * 0); margin-top: calc(56.25% - 36px); display: inline-flex; align-items: center; justify-content: center; height: 64px; min-width: 110px; padding: 10px 16px; background: #fff; border-radius: var(--r-lg); box-shadow: 0 8px 22px rgba(10,2,3,.18); }
.nx-mcard__badge .nx-makelogo { max-height: 40px; max-width: 120px; }
.nx-mcard__body { display: grid; gap: 4px; padding: 40px 22px 20px; }
.nx-mcard__name { font-size: 22px; font-weight: 800; font-stretch: 112%; line-height: 1.2; }
.nx-mcard__models { font-size: 15px; color: #33383f; }
.nx-mcard__meta { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; font-weight: 700; color: var(--cyan-ink); }
.nx-mcard__go { width: 36px; height: 36px; display: grid; place-content: center; border-radius: 50%; background: var(--ink); color: #fff; font-size: 16px; }
.nx-browse__all { margin: 36px 0 14px; font-size: 17px; font-weight: 800; }
.nx-mtiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.nx-mtile { display: grid; justify-items: center; gap: 4px; padding: 18px 12px 14px; background: #fff; border-radius: var(--r-lg); text-decoration: none; color: var(--ink); border: 1.5px solid transparent; text-align: center; }
.nx-mtile__logo { height: 46px; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.nx-mtile__logo .nx-makelogo { max-height: 36px; max-width: 110px; }
.nx-mtile__name { font-weight: 700; font-size: 15px; }
.nx-mtile__count { font-size: 13px; color: var(--muted); }
@media (hover: hover) {
  .nx-mcard:hover, .nx-mtile:hover { border-color: var(--ink); }
  .nx-motion .nx-mcard, .nx-motion .nx-mtile { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .2s; }
  .nx-motion .nx-mcard:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(10,2,3,.14); }
  .nx-motion .nx-mtile:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(10,2,3,.1); }
  .nx-motion .nx-mcard__photo img { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
  .nx-motion .nx-mcard:hover .nx-mcard__photo img { transform: scale(1.07); }
  .nx-motion .nx-mcard__go { transition: transform .3s cubic-bezier(.2,.7,.2,1), background-color .2s, color .2s; }
  .nx-motion .nx-mcard:hover .nx-mcard__go { transform: translateX(4px); background: var(--cyan); color: var(--ink); }
  .nx-motion .nx-mcard__badge { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
  .nx-motion .nx-mcard:hover .nx-mcard__badge { transform: translateY(-4px); }
  .nx-motion .nx-mtile .nx-makelogo { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
  .nx-motion .nx-mtile:hover .nx-makelogo { transform: scale(1.08); }
}
.nx-mcard:active, .nx-mtile:active { transform: translateY(1px); }
@media (max-width: 1100px) {
  .nx-mcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-mtiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .nx-mcards { grid-template-columns: 1fr; gap: 14px; }
  .nx-mcard { display: grid; grid-template-columns: 120px minmax(0, 1fr); }
  .nx-mcard__photo { aspect-ratio: auto; height: 100%; min-height: 128px; }
  .nx-mcard__badge { display: none; }
  .nx-mcard__body { padding: 14px; align-content: center; }
  .nx-mcard__name { font-size: 18px; }
  .nx-mcard__models { font-size: 14px; }
  .nx-mcard__meta { margin-top: 6px; padding-top: 8px; }
  .nx-mcard__go { width: 30px; height: 30px; }
  .nx-mtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* AI vehicle heroes are 16:9; never crop the vehicle's ends */
.nx-vhero__photo--wide img { aspect-ratio: 16 / 9; }
@media (max-width: 1100px) { .nx-vhero__photo--wide img { aspect-ratio: 16 / 9; } }
@media (max-width: 640px) { .nx-vhero__photo--wide img { aspect-ratio: 16 / 9; } }

/* ---------- Fitted at Northside gallery: bento on desktop, swipe carousel on phones, lightbox ---------- */
.nx-gal__head { align-items: flex-end; }
.nx-sechead > div > .nx-h2 + .nx-lede { margin-top: 20px; }
.nx-gal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 200px; grid-auto-flow: dense; gap: 12px; }
.nx-gal__item { position: relative; display: block; padding: 0; border: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--ink-2); cursor: zoom-in; color: #fff; text-align: left; }
.nx-gal__item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.nx-gal__item:nth-child(4), .nx-gal__item:nth-child(6), .nx-gal__item:nth-child(9), .nx-gal__item:nth-child(11), .nx-gal__item:nth-child(12) { grid-column: span 2; }
.nx-gal__item img { width: 100%; height: 100%; object-fit: cover; }
.nx-gal__cap { position: absolute; inset: auto 0 0 0; display: grid; gap: 2px; padding: 40px 16px 14px; background: linear-gradient(transparent, rgba(10,2,3,.88)); }
.nx-gal__cap b { font-size: 16px; font-weight: 800; }
.nx-gal__cap span { font-size: 13px; color: var(--on-dark); }
.nx-gal__item:nth-child(1) .nx-gal__cap b { font-size: 22px; }
.nx-gal__item:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.nx-gal__count { display: none; }
@media (hover: hover) {
  .nx-motion .nx-gal__item img { transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .5s; }
  .nx-motion .nx-gal__item:hover img { transform: scale(1.06); filter: saturate(1.12); }
  .nx-motion .nx-gal__cap { transition: transform .45s cubic-bezier(.2,.7,.2,1); }
  .nx-motion .nx-gal__cap span { opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s cubic-bezier(.2,.7,.2,1); }
  .nx-motion .nx-gal__item:hover .nx-gal__cap span { opacity: 1; transform: none; }
  .nx-motion .nx-gal__item::after { content: "+"; position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; display: grid; place-content: center; border-radius: 50%; background: var(--cyan); color: var(--ink); font-size: 22px; font-weight: 700; opacity: 0; transform: scale(.6); transition: opacity .3s, transform .35s cubic-bezier(.2,.7,.2,1); }
  .nx-motion .nx-gal__item:hover::after { opacity: 1; transform: none; }
}
.nx-motion .nx-gal__item.nx-reveal { transform: translateY(30px) scale(.97); }
.nx-motion .nx-gal__item.nx-reveal.is-in { transform: none; }

.nx-lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(10,2,3,.94); color: #fff; }
.nx-lightbox[open] { display: grid; grid-template-columns: 72px minmax(0, 1fr) 72px; align-items: center; }
.nx-lightbox::backdrop { background: transparent; }
.nx-lightbox__fig { margin: 0; display: grid; justify-items: center; gap: 14px; padding: 56px 0 24px; max-height: 100dvh; }
.nx-lightbox__fig img { max-width: 100%; max-height: calc(100dvh - 160px); width: auto; border-radius: var(--r-lg); box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.nx-lightbox figcaption { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: center; align-items: baseline; font-size: 15px; color: var(--on-dark); }
.nx-lightbox figcaption b { color: #fff; font-size: 18px; }
.nx-lightbox__n { color: var(--on-dark-2); }
.nx-lightbox__close { position: absolute; top: 14px; right: 16px; width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; font-size: 30px; cursor: pointer; }
.nx-lightbox__nav { justify-self: center; width: 52px; height: 52px; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; font-size: 34px; line-height: 1; cursor: pointer; }
.nx-lightbox__close:hover, .nx-lightbox__nav:hover { background: var(--cyan); color: var(--ink); }
.nx-lightbox :focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.nx-motion .nx-lightbox[open] { animation: nx-fade .3s ease both; }
.nx-motion .nx-lightbox__fig.is-swap img { animation: nx-rise .4s cubic-bezier(.2,.7,.2,1) both; }

@media (max-width: 1100px) {
  .nx-gal { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 190px; }
  .nx-gal__item:nth-child(n) { grid-column: auto; grid-row: auto; }
  .nx-gal__item:nth-child(1), .nx-gal__item:nth-child(6), .nx-gal__item:nth-child(11) { grid-column: span 2; grid-row: span 2; }
  .nx-gal__item:nth-child(12) { grid-column: span 2; }
}
@media (max-width: 640px) {
  .nx-gal__head .nx-btn { display: none; }
  .nx-gal { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .nx-gal::-webkit-scrollbar { display: none; }
  .nx-gal__item, .nx-gal__item:nth-child(n) { flex: 0 0 84%; aspect-ratio: 4 / 3; scroll-snap-align: start; grid-column: auto; grid-row: auto; }
  .nx-gal__item .nx-gal__cap span { opacity: 1 !important; transform: none !important; }
  .nx-gal__item:nth-child(1) .nx-gal__cap b { font-size: 16px; }
  .nx-motion .nx-gal__item.nx-reveal { transform: translateX(30px); }
  .nx-gal__count { display: block; margin: 14px 0 0; text-align: center; font-size: 14px; color: var(--on-dark-2); }
  .nx-lightbox[open] { grid-template-columns: 0 minmax(0, 1fr) 0; }
  .nx-lightbox__nav { display: none; }
  .nx-lightbox__fig { padding: 70px 12px 24px; }
}

/* ---------- every make as a photo card (16 Oct) ---------- */
.nx-mcards--all { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; --ph: 168px; }
.nx-mcards--all .nx-mcard__photo { aspect-ratio: auto; height: var(--ph); }
.nx-mcards--all .nx-mcard__photo img { object-position: center 62%; }
.nx-mcards--all .nx-mcard__badge { top: 0; margin-top: calc(var(--ph) - 28px); left: 16px; height: 52px; min-width: 88px; padding: 8px 12px; }
.nx-mcards--all .nx-mcard__badge .nx-makelogo { max-height: 32px; max-width: 100px; }
.nx-mcards--all .nx-mcard__body { padding: 34px 18px 16px; }
.nx-mcards--all .nx-mcard__name { font-size: 19px; }
.nx-mcards--all .nx-mcard__models { font-size: 14px; }
.nx-mcards--all .nx-mcard__meta { font-size: 13px; }
.nx-mcards--all .nx-mcard__go { width: 32px; height: 32px; }
@media (max-width: 1100px) {
  .nx-mcards--all { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .nx-mcards--all { grid-template-columns: 1fr; gap: 12px; }
  .nx-mcards--all .nx-mcard:not(.nx-mcard--ask) { grid-template-columns: 130px minmax(0, 1fr); }
  .nx-mcards--all .nx-mcard__photo { height: 100%; min-height: 118px; }
  .nx-mcards--all .nx-mcard__body { padding: 12px 14px; }
}

.nx-mcard--ask { background: var(--ink); color: #fff; padding: 22px 20px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; border: 0; }
.nx-mcard--ask .nx-mcard__ask-body { display: grid; gap: 8px; }
.nx-mcard--ask .nx-mcard__name { font-size: 21px; }
.nx-mcard--ask .nx-mcard__models { color: var(--on-dark); font-size: 15px; line-height: 1.45; }
.nx-mcard__ask-cta { display: grid; gap: 10px; justify-items: start; }
.nx-mcard__ask-link { color: var(--cyan); font-weight: 700; font-size: 14px; }
.nx-motion .nx-mcard--ask:hover { transform: none; box-shadow: none; }

/* ---------- How it works + range ladder (finder page) ---------- */



/* ---------- reviews strip ---------- */
.nx-reviews2 { overflow: hidden; }
.nx-marquee { margin-top: 6px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.nx-marquee__track { display: flex; gap: 18px; width: max-content; padding: 6px 0 10px; }
.nx-marquee__dupe { display: contents; }
.nx-rcard { position: relative; margin: 0; width: 380px; flex: none; display: flex; flex-direction: column; gap: 12px; padding: 26px 24px 22px; background: #fff; border-radius: var(--r-lg); box-shadow: 0 6px 20px rgba(10,2,3,.06); }
.nx-rcard__mark { position: absolute; top: 4px; right: 18px; font-size: 76px; line-height: 1; font-weight: 800; color: var(--cyan-wash); }
.nx-rcard blockquote { margin: 0; font-size: 17px; line-height: 1.5; color: var(--ink); flex: 1; }
.nx-rcard figcaption { display: flex; align-items: center; gap: 12px; }
.nx-rcard figcaption > span:last-child { display: grid; font-size: 14px; }
.nx-rcard figcaption > span:last-child span { color: var(--muted); font-size: 13px; }
.nx-rcard__avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-content: center; background: var(--ink); color: #fff; font-weight: 800; }
@keyframes nx-marquee { to { transform: translateX(-50%); } }
.nx-motion .nx-marquee__track { animation: nx-marquee 48s linear infinite; }
.nx-motion .nx-marquee:hover .nx-marquee__track, .nx-motion .nx-marquee:focus-within .nx-marquee__track { animation-play-state: paused; }
html:not(.nx-motion) .nx-marquee { -webkit-mask-image: none; mask-image: none; }
html:not(.nx-motion) .nx-marquee__track { width: auto; flex-wrap: wrap; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding-inline: var(--gutter); }
html:not(.nx-motion) .nx-marquee__dupe { display: none; }
html:not(.nx-motion) .nx-rcard { width: auto; flex: 1 1 260px; }

@media (max-width: 1100px) {
}
@media (max-width: 640px) {
  .nx-rcard { width: 300px; padding: 22px 20px 18px; }
  .nx-rcard blockquote { font-size: 16px; }
}


/* ---------- visual pass 2 (16 Oct): ask card, How it works cards, range ladder ---------- */
.nx-mcard--ask { position: relative; overflow: hidden; justify-content: flex-start; gap: 0; padding: 24px 22px 22px; }
.nx-mcard--ask .nx-mcard__name { font-size: 22px; line-height: 1.15; }
.nx-mcard--ask .nx-mcard__models { margin-top: 8px; font-size: 15px; }
.nx-mcard--ask { --yellow: #ffc513; position: relative; background: radial-gradient(110% 60% at 100% 0%, rgba(255,197,19,.13), transparent 60%), radial-gradient(90% 50% at 0% 100%, rgba(0,174,239,.12), transparent 60%), var(--ink); }
.nx-mcard__kicker { display: inline-block; justify-self: start; padding: 4px 8px; border-radius: var(--r-sm); background: var(--yellow); color: var(--ink); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.nx-mcard--ask .nx-mcard__name em { font-style: normal; color: var(--yellow); }
.nx-mcard--ask .nx-btn--cyan { background: var(--yellow); color: var(--ink); }
@media (hover: hover) { .nx-mcard--ask .nx-btn--cyan:hover { background: #fff; border-color: #fff; } }

.nx-ute { position: relative; display: block; margin: 30px 0 14px; }
.nx-ute__box { position: relative; display: block; aspect-ratio: 1646 / 611; }
.nx-ute__art { display: block; width: 100%; height: auto; }
.nx-ute__box::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: 0; height: 1px; background: repeating-linear-gradient(90deg, rgba(0,174,239,.6) 0 6px, transparent 6px 12px); }
.nx-ute__glow { position: absolute; left: 88.2%; top: 42.5%; width: 9%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, var(--yellow) 0 22%, rgba(255,197,19,.35) 40%, transparent 70%); }
.nx-ute__tag { position: absolute; left: 78.7%; top: 4%; translate: -50% 0; white-space: nowrap; padding: 3px 7px; border-radius: var(--r-sm); background: var(--yellow); color: var(--ink); font-size: 11px; font-weight: 800; }
.nx-ute__tag::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1.5px; height: 18px; margin-left: -.75px; background: var(--yellow); }
.nx-ute__q { position: absolute; left: 41%; top: -30%; width: 26px; height: 26px; display: grid; place-content: center; border-radius: 8px 8px 8px 2px; background: var(--yellow); color: var(--ink); font-weight: 900; font-size: 16px; }
.nx-motion .nx-ute__art { clip-path: inset(0 100% 0 0); }
.nx-motion .nx-ute__box::before { content: ""; position: absolute; top: -6%; bottom: -6%; left: 0; width: 2px; background: var(--cyan); box-shadow: 0 0 12px 2px rgba(0,174,239,.8); opacity: 0; }
.nx-motion .nx-mcard--ask.is-in .nx-ute__art { animation: nx-wipe 1.6s cubic-bezier(.6,0,.3,1) both .2s; }
.nx-motion .nx-mcard--ask.is-in .nx-ute__box::before { animation: nx-scan 1.6s cubic-bezier(.6,0,.3,1) both .2s; }
.nx-motion .nx-ute__glow, .nx-motion .nx-ute__tag, .nx-motion .nx-ute__q { opacity: 0; }
.nx-motion .nx-mcard--ask.is-in .nx-ute__glow { animation: nx-fade .4s ease both 1.7s, nx-glow 3s ease-in-out infinite 2.2s; }
.nx-motion .nx-mcard--ask.is-in .nx-ute__tag { animation: nx-drop .45s cubic-bezier(.3,1.5,.5,1) both 2s; }
.nx-motion .nx-mcard--ask.is-in .nx-ute__q { animation: nx-pop .5s cubic-bezier(.3,1.6,.5,1) both 2.3s, nx-bob 2.6s ease-in-out infinite 3s; }
@keyframes nx-wipe { to { clip-path: inset(0 0 0 0); } }
@keyframes nx-scan { 0% { left: 0; opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes nx-glow { 0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 50% { opacity: .7; transform: translate(-50%, -50%) scale(1.25); } }
@keyframes nx-pop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
@keyframes nx-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }




@media (max-width: 1100px) {
}
@media (max-width: 640px) {
}

.nx-mcard__ask-cta .nx-btn svg { width: 18px; height: 18px; flex: none; fill: currentColor; }

/* ask card: never taller than the make cards in its row (Kyle, 16 Oct) */
.nx-mcard--ask { padding: 20px 18px 18px; gap: 0; }
.nx-mcard--ask .nx-mcard__name { font-size: 20px; }
.nx-mcard--ask .nx-mcard__models { margin-top: 6px; font-size: 14px; }
.nx-mcard--ask .nx-mcard__ask-cta { display: flex; gap: 8px; margin-top: 0; }
.nx-mcard--ask .nx-mcard__ask-cta .nx-btn--cyan { flex: 1; min-width: 0; padding-inline: 10px; }
.nx-mcard__msg { flex: none; width: 46px; padding: 0; }
.nx-mcard__msg svg { width: 20px; height: 20px; fill: currentColor; }
@media (min-width: 641px) {
  .nx-mcards--all .nx-mcard--ask { height: 0; min-height: 100%; }
  .nx-mcard--ask .nx-ute { flex: 1 1 0; min-height: 0; container-type: size; display: grid; place-items: center; margin: 22px 0 14px; }
  .nx-mcard--ask .nx-ute__box { width: min(100cqw, 100cqh * 1646 / 611); }
}
@media (max-width: 640px) { .nx-mcard--ask .nx-ute { margin: 44px 0 14px; } }

/* ---------- How it works: a route the traced ute drives along as you scroll (Kyle, 16 Oct) ---------- */
.nx-btn--yellow { background: #ffc513; color: var(--ink); }
@media (hover: hover) { .nx-btn--yellow:hover { background: #fff; } }
@media (max-width: 760px) {
}

/* ---------- How it works: photo split (direction 1) ---------- */
.nx-hw { background: #fff; }
.nx-hw__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.nx-hw__photo { position: relative; margin: 0; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3.3; }
.nx-hw__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.nx-hw__photo figcaption { position: absolute; left: 16px; bottom: 16px; padding: 6px 10px; border-radius: 6px; background: #ffc513; color: var(--ink); font-size: 13px; font-weight: 800; }
.nx-hw__text .nx-lede { margin-top: 12px; }
.nx-hw__steps { list-style: none; margin: 28px 0 0; padding: 0; }
.nx-hw__step { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; padding: 20px 0; border-top: 1px solid var(--line); }
.nx-hw__step:last-child { border-bottom: 1px solid var(--line); }
.nx-hw__n { font-size: 40px; line-height: 1; font-weight: 900; font-stretch: 125%; color: #ffc513; -webkit-text-stroke: 1.5px var(--ink); }
.nx-hw__step h3 { margin: 2px 0 6px; font-size: 20px; font-weight: 800; }
.nx-hw__step p { margin: 0; color: #33383f; max-width: 52ch; }
.nx-motion .nx-hw__photo img { transform: scale(1.08); transition: transform 1.6s cubic-bezier(.2,.7,.2,1); }
.nx-motion .nx-hw__photo.is-in img { transform: none; }
.nx-motion .nx-hw__step { opacity: 0; transform: translateY(16px); transition: opacity .6s, transform .6s cubic-bezier(.2,.7,.2,1); transition-delay: calc(.2s + var(--i) * .15s); }
.nx-motion .nx-hw__steps.is-in .nx-hw__step { opacity: 1; transform: none; }
.nx-motion .nx-hw__n { display: inline-block; transform: scale(.5); opacity: 0; transition: transform .5s cubic-bezier(.3,1.6,.5,1), opacity .3s; transition-delay: calc(.35s + var(--i) * .15s); }
.nx-motion .nx-hw__steps.is-in .nx-hw__n { transform: none; opacity: 1; }
@media (max-width: 900px) { .nx-hw__grid { grid-template-columns: 1fr; gap: 32px; } .nx-hw__photo { aspect-ratio: 4 / 3; } }

/* ---------- Which range is which, simplified (16 Oct) ---------- */

@media (max-width: 640px) {
}
@media (max-width: 640px) { .nx-sechead { row-gap: 20px; } }

/* ---------- Which range is which: selector + detail panel (16 Oct) ---------- */
.nx-rng { background: #fff; }
.nx-rng__body { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 28px; align-items: stretch; }
.nx-rng__tabs { display: flex; flex-direction: column; gap: 6px; }
.nx-rng__tab { position: relative; display: grid; gap: 2px; text-align: left; padding: 14px 18px; border: 0; border-radius: 10px; background: var(--stone); cursor: pointer; color: var(--ink); overflow: hidden; transition: background-color .25s, color .25s; }
.nx-rng__tab:nth-of-type(1) { --c: #cfe9f5; } .nx-rng__tab:nth-of-type(2) { --c: #7fd0f3; } .nx-rng__tab:nth-of-type(3) { --c: #00aeef; } .nx-rng__tab:nth-of-type(4) { --c: #0a6a8f; } .nx-rng__tab:nth-of-type(5) { --c: #6b717a; }
.nx-rng__tab b { font-size: 18px; }
.nx-rng__tab span { font-size: 14px; color: var(--muted); }
.nx-rng__tab[aria-selected="true"] { background: var(--ink); color: #fff; }
.nx-rng__tab[aria-selected="true"] span { color: #ffc513; }
.nx-rng__tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #ffc513; transform: scaleX(0); transform-origin: left; }
.nx-rng__tab.is-timing::after { animation: nx-rng-timer var(--dur, 5s) linear forwards; }
@keyframes nx-rng-timer { to { transform: scaleX(1); } }
@media (hover: hover) { .nx-rng__tab:not([aria-selected="true"]):hover { background: #e9ebe8; } }
.nx-rng__panels { position: relative; background: var(--stone); border-radius: 16px; overflow: hidden; }
.nx-rng__panel { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: 28px; align-items: center; padding: 28px 32px; height: 100%; }
.nx-rng__photo { position: relative; background: #fff; border-radius: 12px; height: 100%; min-height: 260px; display: flex; align-items: center; justify-content: center; padding: 20px; }
.nx-rng__photo img { max-height: 260px; width: auto; }
.nx-rng__kind { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan-ink); }
.nx-rng__info h3 { margin: 6px 0 8px; font-size: 30px; font-weight: 800; font-stretch: 112%; line-height: 1.1; }
.nx-rng__info p { margin: 0; color: #33383f; font-size: 16px; }
.nx-rng__stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 28px; margin: 22px 0; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.nx-rng__stats dt { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.nx-rng__stats dd { margin: 4px 0 0; font-size: 26px; font-weight: 800; font-stretch: 112%; }
.nx-rng__stats span { font-size: 13px; color: var(--muted); }
.nx-rng__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.nx-rng__best { position: absolute; left: 14px; top: 14px; z-index: 1; padding: 6px 11px; border-radius: 6px; background: #ffc513; color: var(--ink); font-size: 14px; font-weight: 800; box-shadow: 0 6px 14px rgba(10,2,3,.12); }
.nx-rng__link { font-weight: 700; font-size: 15px; color: var(--ink); }
.nx-motion .nx-rng__panel:not([hidden]) .nx-rng__photo img { animation: nx-rng-in .5s cubic-bezier(.2,.7,.2,1) both; }
.nx-motion .nx-rng__panel:not([hidden]) .nx-rng__info > * { animation: nx-rise .45s cubic-bezier(.2,.7,.2,1) both; }
.nx-motion .nx-rng__panel:not([hidden]) .nx-rng__info > :nth-child(2) { animation-delay: .05s; } .nx-motion .nx-rng__panel:not([hidden]) .nx-rng__info > :nth-child(3) { animation-delay: .1s; }
.nx-motion .nx-rng__panel:not([hidden]) .nx-rng__info > :nth-child(4) { animation-delay: .15s; } .nx-motion .nx-rng__panel:not([hidden]) .nx-rng__info > :nth-child(5) { animation-delay: .2s; }
@keyframes nx-rng-in { from { opacity: 0; transform: scale(.92) rotate(-2deg); } to { opacity: 1; transform: none; } }
@media (max-width: 1100px) {
  .nx-rng__body { grid-template-columns: 1fr; }
  .nx-rng__tabs { flex-direction: row; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .nx-rng__tabs::-webkit-scrollbar { display: none; }
  .nx-rng__tab { flex: none; padding: 12px 16px 12px 20px; }
  .nx-rng__tab span { display: none; }
  .nx-rng__tab b { font-size: 16px; white-space: nowrap; }
}
@media (max-width: 700px) {
  .nx-rng__panel { grid-template-columns: 1fr; padding: 18px; gap: 18px; }
  .nx-rng__photo { min-height: 0; height: 190px; }
  .nx-rng__photo img { max-height: 160px; }
  .nx-rng__info h3 { font-size: 24px; }
  .nx-rng__stats { gap: 18px; } .nx-rng__stats dd { font-size: 20px; }
}

/* range axis: budget to most capable, beside the tabs */
.nx-rng__side { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 14px; }
.nx-rng__axis { display: grid; grid-template-rows: auto 1fr auto; justify-items: center; gap: 8px; text-align: center; }
.nx-rng__axis-end { display: grid; gap: 2px; font-size: 11px; line-height: 1.25; color: var(--muted); }
.nx-rng__axis-end b { font-size: 13px; font-weight: 800; color: var(--ink); text-transform: uppercase; letter-spacing: .04em; }
.nx-rng__rail { position: relative; width: 8px; border-radius: 4px; background: linear-gradient(180deg, #cfe9f5, var(--cyan) 55%, var(--ink)); margin-bottom: 10px; }
.nx-rng__rail::after { content: ""; position: absolute; left: 50%; bottom: -10px; width: 0; height: 0; margin-left: -9px; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 12px solid var(--ink); }
.nx-rng__cta { margin-top: 4px; align-self: flex-start; }
.nx-rng__info { display: flex; flex-direction: column; align-items: flex-start; }
.nx-rng__stats { align-self: stretch; }
.nx-motion .nx-rng__rail { transform: scaleY(0); transform-origin: top; transition: transform 1.1s cubic-bezier(.6,0,.2,1) .2s; }
.nx-motion .nx-rng__side.is-in .nx-rng__rail { transform: none; }
@media (max-width: 1100px) {
  .nx-rng__side { grid-template-columns: 1fr; gap: 10px; }
  .nx-rng__axis { grid-template-columns: auto 1fr auto; grid-template-rows: none; align-items: center; text-align: left; gap: 12px; }
  .nx-rng__axis-end { font-size: 0; } .nx-rng__axis-end b { font-size: 12px; }
  .nx-rng__axis-end:last-child { text-align: right; }
  .nx-rng__rail { width: auto; height: 6px; margin: 0 12px 0 0; background: linear-gradient(90deg, #cfe9f5, var(--cyan) 55%, var(--ink)); }
  .nx-rng__rail::after { left: auto; right: -10px; bottom: auto; top: 50%; margin: -8px 0 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 11px solid var(--ink); border-right: 0; }
  .nx-motion .nx-rng__rail { transform: scaleX(0); transform-origin: left; }
}
@media (max-width: 700px) { .nx-rng__cta { align-self: stretch; } }
.nx-rng__stats dd { white-space: nowrap; }
.nx-rng__stats { gap: 24px; }
@media (max-width: 1100px) { .nx-rng__rail { justify-self: stretch; } }

/* range panel: specs in their own row of tiles (Kyle, 17 Oct: they were crammed) */
.nx-rng__panel { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); grid-template-rows: auto auto; row-gap: 22px; align-content: start; }
.nx-rng__info p { margin-bottom: 22px; }
.nx-rng__panel .nx-rng__stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; border: 0; }
.nx-rng__panel .nx-rng__stats > div { background: #fff; border-radius: 12px; padding: 16px 18px; }
.nx-rng__panel .nx-rng__stats dd { margin: 6px 0 2px; font-size: 28px; }
.nx-rng__panel .nx-rng__stats span { display: block; }
.nx-rng__photo { min-height: 230px; }
.nx-rng__photo img { max-height: 210px; }
@media (max-width: 700px) {
  .nx-rng__panel { grid-template-columns: 1fr; }
  .nx-rng__panel .nx-rng__stats { grid-template-columns: 1fr 1fr; }
  .nx-rng__panel .nx-rng__stats > div:first-child { grid-column: 1 / -1; }
  .nx-rng__panel .nx-rng__stats dd { font-size: 24px; }
}
@media (max-width: 700px) { .nx-rng__panel { grid-template-columns: minmax(0, 1fr); } .nx-rng__cta { white-space: normal; text-align: center; min-width: 0; } }

/* 19 Oct: tabs fill the panel height; more air under section headings */
@media (min-width: 1101px) {
  .nx-rng__side { align-items: stretch; }
  .nx-rng__tabs { height: 100%; }
  .nx-rng__tab { flex: 1 1 0; align-content: center; }
}
.nx-sechead { margin-bottom: 44px; }
@media (max-width: 640px) { .nx-sechead { margin-bottom: 30px; } }

/* 19 Oct: whole car in every gallery photo. Tiles match the 4:3 photos, captions sit under the photo, nothing is cropped */
.nx-gal { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; gap: 26px 16px; }
.nx-gal__item, .nx-gal__item:nth-child(n) { grid-column: auto !important; grid-row: auto !important; display: flex; flex-direction: column; gap: 10px; background: none; overflow: visible; border-radius: 0; }
.nx-gal__item img { aspect-ratio: 4 / 3; height: auto; object-fit: contain; background: #15171b; border-radius: var(--r-lg); }
.nx-gal__cap { position: static; padding: 0; background: none; }
.nx-gal__cap b, .nx-gal__item:nth-child(1) .nx-gal__cap b { font-size: 16px; }
.nx-motion .nx-gal__item::after { top: 12px; right: 12px; }
@media (hover: hover) { .nx-motion .nx-gal__item:hover img { transform: scale(1.03); } }
@media (max-width: 1100px) { .nx-gal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .nx-gal__item, .nx-gal__item:nth-child(n) { aspect-ratio: auto; } }

/* ---------- vehicle hero, redesigned 19 Oct ---------- */
.nx-vhero { position: relative; padding-bottom: 56px; }
.nx-vhero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 56px; align-items: center; padding-block: 48px 24px; }
.nx-vhero__h1 { font-size: clamp(34px, 4.2vw, 58px); }
.nx-vhero__h1 em { display: block; font-style: normal; color: #ffc513; }
.nx-vhero__sub { margin: 14px 0 0; font-size: 17px; color: var(--on-dark); }
.nx-vhero__facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0; margin: 26px 0 0; }
.nx-vhero__facts > div { padding: 0 26px; border-left: 1px solid var(--ink-3); }
.nx-vhero__facts > div:first-child { padding-left: 0; border-left: 0; }
.nx-vhero__facts dt { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-2); }
.nx-vhero__facts dd { margin: 6px 0 0; font-size: 26px; font-weight: 800; font-stretch: 112%; color: #fff; white-space: nowrap; }
.nx-vhero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.nx-vhero__switch { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--ink-3); }
.nx-vpick { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--on-dark-2); }
.nx-vpick select { appearance: none; max-width: 100%; min-height: 40px; padding: 8px 36px 8px 12px; border: 1.5px solid var(--ink-3); border-radius: var(--r); background: var(--ink-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23d5d8dc' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat right 12px center; color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; }
.nx-vpick select:hover { border-color: var(--on-dark-2); }
.nx-vhero__change { margin-top: 0; font-size: 14px; color: var(--on-dark); }
.nx-vhero__change:hover { color: #fff; }
.nx-vhero__photo img, .nx-vhero__photo--wide img { border-radius: 18px; box-shadow: 0 30px 60px rgba(0,0,0,.45); }
.nx-motion .nx-vhero__photo { animation: nx-slide-in .9s cubic-bezier(.2,.7,.2,1) both .15s; }
/* the use question sits as a card overlapping the hero */
.nx-suggest { background: none; border: 0; margin-top: -44px; position: relative; z-index: 2; }
.nx-suggest__bar { background: #fff; border-radius: 16px; padding: 20px 26px; box-shadow: 0 18px 44px rgba(10,2,3,.14); }
.nx-suggest .nx-picks { margin-top: 18px; }
@media (max-width: 1100px) {
  .nx-vhero__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .nx-vhero__photo { order: 2; }
}
@media (max-width: 640px) {
  .nx-vhero { padding-bottom: 50px; }
  .nx-vhero__grid { padding-block: 22px 8px; }
  .nx-vhero__h1 { font-size: clamp(30px, 9vw, 38px); }
  .nx-vhero__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nx-vhero__facts > div { padding: 0 12px; }
  .nx-vhero__facts dd { font-size: 19px; }
  .nx-vhero__actions .nx-btn { flex: 1 1 100%; }
  .nx-vpick { flex-wrap: wrap; width: 100%; }
  .nx-vpick select { width: 100%; }
  .nx-suggest__bar { padding: 16px; }
}
@media (max-width: 640px) { .nx-vhero__facts > div { padding: 0 10px; } .nx-vhero__facts dd { font-size: 17px; } .nx-vhero__facts dt { font-size: 11px; } }
@media (max-width: 640px) { .nx-seg__btn { text-align: left; gap: 10px; padding: 10px 12px; } }

/* ---------- make pages, redesigned 19 Oct ---------- */
.nx-hero--makeq .nx-crumbs ol { justify-content: center; margin-bottom: 18px; }
.nx-hero--makeq .nx-hero__badge { margin-bottom: 18px; }
.nx-hero--makeq .nx-h1 em { font-style: normal; color: #ffc513; }
.nx-models { display: grid; gap: 20px; }
.nx-model { display: grid; grid-template-columns: 340px minmax(0, 1fr); background: #fff; border-radius: 16px; overflow: hidden; scroll-margin-top: 20px; }
.nx-model__media { background: var(--ink); min-height: 200px; }
.nx-model__media img { width: 100%; height: 100%; object-fit: cover; }
.nx-model__ph { height: 100%; min-height: 200px; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 20px; background: radial-gradient(80% 80% at 50% 0%, #1d2026, var(--ink)); }
.nx-model__ph img { max-height: 30px; max-width: 110px; filter: brightness(0) invert(1); opacity: .55; }
.nx-model__ph b { color: #fff; font-size: 26px; font-weight: 800; font-stretch: 115%; text-transform: uppercase; text-align: center; }
.nx-model__body { padding: 24px 28px; }
.nx-model__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 14px; }
.nx-model__head h3 { margin: 0; font-size: 24px; font-weight: 800; font-stretch: 112%; }
.nx-model__head span { font-size: 14px; color: var(--muted); }
.nx-vers { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 28px; }
.nx-vers--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nx-ver { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto 18px; align-items: center; gap: 12px; padding: 11px 4px; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.nx-ver b { font-size: 15px; white-space: nowrap; }
.nx-ver__code { font-size: 14px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-ver__n { font-size: 13px; font-weight: 700; color: var(--cyan-ink); white-space: nowrap; }
.nx-ver__go { color: var(--muted); font-weight: 700; }
@media (hover: hover) {
  .nx-ver:hover { background: var(--stone); }
  .nx-ver:hover .nx-ver__go { color: var(--ink); }
  .nx-motion .nx-ver__go { transition: transform .25s cubic-bezier(.2,.7,.2,1); }
  .nx-motion .nx-ver:hover .nx-ver__go { transform: translateX(4px); }
  .nx-motion .nx-model__media img { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
  .nx-motion .nx-model:hover .nx-model__media img { transform: scale(1.05); }
}
@media (max-width: 900px) {
  .nx-model { grid-template-columns: minmax(0, 1fr); }
  .nx-model__media { min-height: 0; aspect-ratio: 16 / 7; }
  .nx-model__ph { min-height: 0; }
  .nx-vers--two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .nx-model__body { padding: 18px 16px; }
  .nx-ver { grid-template-columns: 86px minmax(0, 1fr) auto; }
  .nx-ver__go { display: none; }
}

/* model cards, 19 Oct: photo keeps its 16:9 shape at the top of the left column, never stretched to the card height */
.nx-model { grid-template-columns: 360px minmax(0, 1fr); align-items: start; }
.nx-model__side { padding: 16px; }
.nx-model__media { min-height: 0; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; }
.nx-model__media img { width: 100%; height: 100%; object-fit: cover; }
.nx-model__side .nx-model__head { display: grid; gap: 4px; margin: 14px 4px 4px; }
.nx-model__body { padding: 16px 24px 16px 4px; }
.nx-model__body .nx-vers .nx-ver:first-child, .nx-vers--two .nx-ver:nth-child(2) { border-top: 0; }
@media (max-width: 900px) {
  .nx-model { grid-template-columns: minmax(0, 1fr); }
  .nx-model__media { aspect-ratio: 16 / 9; }
  .nx-model__body { padding: 0 16px 14px; }
  .nx-vers--two .nx-ver:nth-child(2) { border-top: 1px solid var(--line); }
}

/* model cards, 19 Oct: photo + name sit on their own dark panel, versions on white */
.nx-model { gap: 0; }
.nx-model__side { align-self: stretch; padding: 14px 14px 20px; background: var(--ink); color: #fff; }
.nx-model__side .nx-model__head h3 { color: #fff; }
.nx-model__side .nx-model__head span { color: #ffc513; font-weight: 700; }
.nx-model__body { padding: 18px 28px; }
@media (max-width: 900px) { .nx-model__body { padding: 12px 16px 14px; } }

/* the ask card fills the rest of the last row, so the grid always ends flush */
.nx-mcards--all .nx-mcard--ask { grid-column: span var(--span4, 1); }
@media (max-width: 1100px) { .nx-mcards--all .nx-mcard--ask { grid-column: span var(--span2, 1); } }
@media (max-width: 640px) { .nx-mcards--all .nx-mcard--ask { grid-column: auto; } }

@media (min-width: 641px) {
  .nx-mcards--all .nx-mcard--ask-wide { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-rows: 1fr auto; column-gap: 26px; padding: 26px 26px 22px; }
  .nx-mcard--ask-wide .nx-mcard__ask-body { grid-column: 1; grid-row: 1; align-self: start; }
  .nx-mcard--ask-wide .nx-mcard__ask-cta { grid-column: 1; grid-row: 2; }
  .nx-mcard--ask-wide .nx-ute { grid-column: 2; grid-row: 1 / span 2; margin: 26px 0 0; align-self: center; }
  .nx-mcard--ask-wide .nx-mcard__name { font-size: 24px; }
  .nx-mcard--ask-wide .nx-mcard__models { font-size: 15px; }
}
@media (min-width: 641px) { .nx-mcard--ask-wide .nx-ute { container-type: normal; flex: none; display: block; min-height: 0; } .nx-mcard--ask-wide .nx-ute__box { width: 100%; } }
@media (min-width: 641px) { .nx-mcards--all .nx-mcard--ask-wide { height: auto; min-height: 300px; } }

/* ---------- vehicle pages: suggestions and kit cards, redesigned 19 Oct ---------- */
/* prompt before a use is picked, and the caveat after */
.nx-note--prompt { display: flex; align-items: center; gap: 12px; margin-top: 16px; font-size: 15px; color: var(--ink); font-weight: 600; }
.nx-note--prompt svg { width: 30px; height: 30px; flex: none; padding: 6px; border-radius: 50%; background: #ffc513; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.nx-motion .nx-note--prompt svg { animation: nx-bob 1.8s ease-in-out infinite; }
.nx-note--info { margin-top: 14px; }

/* our pick */
.nx-suggest .nx-picks { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.nx-pick { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); border: 0; border-radius: var(--r-xl); box-shadow: 0 18px 44px rgba(10,2,3,.10); }
.nx-pick__img { position: relative; padding: 52px 22px 22px; background: radial-gradient(80% 70% at 50% 60%, #fff 0, var(--stone) 70%); }
.nx-pick__img img { max-height: 210px; }
.nx-pick__label { position: absolute; left: 16px; top: 16px; z-index: 1; padding: 6px 10px; border-radius: var(--r-sm); background: #ffc513; color: var(--ink); font-size: 13px; font-weight: 800; line-height: 1.2; }
.nx-pick__body { gap: 12px; padding: 26px 28px 26px; }
.nx-pick__range { margin: 0; font-size: 13px; font-weight: 800; color: var(--cyan-ink); }
.nx-pick__name { margin-top: -6px; font-size: 23px; line-height: 1.22; font-weight: 800; font-stretch: 108%; }
.nx-pick__why { gap: 7px; font-size: 15px; }
.nx-pick__why li { padding-left: 28px; }
.nx-pick__why li::before { top: 1px; width: 19px; height: 19px; background: #ffc513 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0203' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat; }
.nx-pick__specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); margin: 4px 0 0; padding: 12px 0; background: var(--stone); border-radius: var(--r); }
.nx-pick__specs div { padding: 0 14px; border-left: 1px solid var(--line); }
.nx-pick__specs div:first-child { border-left: 0; }
.nx-pick__specs dt { font-size: 12px; color: var(--muted); }
.nx-pick__specs dd { margin: 2px 0 0; font-size: 15px; font-weight: 800; line-height: 1.25; }
.nx-pick__actions { margin-top: 6px; gap: 20px; flex-wrap: wrap; }
.nx-pick__actions a { font-size: 15px; }

/* or consider: a dark panel beside the pick */
.nx-consider { display: flex; flex-direction: column; padding: 22px 22px 10px; border-radius: var(--r-xl); color: #fff;
  background: radial-gradient(110% 60% at 100% 0%, rgba(255,197,19,.12), transparent 60%), radial-gradient(90% 50% at 0% 100%, rgba(0,174,239,.14), transparent 60%), var(--ink); }
.nx-consider__title { margin: 0 0 6px; font-size: 19px; font-weight: 800; font-stretch: 112%; }
.nx-consider__row { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 4px 14px; align-items: start; padding: 16px 0; border-top: 1px solid rgba(255,255,255,.14); }
.nx-consider__row:first-of-type { border-top: 0; }
.nx-consider__img { grid-row: 1 / span 2; display: grid; place-items: center; aspect-ratio: 1; padding: 6px; border-radius: var(--r); background: #fff; overflow: hidden; }
.nx-consider__img img { max-height: 100%; width: auto; }
.nx-consider__what { margin: 0; font-size: 13px; font-weight: 800; color: #ffc513; }
.nx-consider__name { display: block; margin-top: 2px; font-size: 16px; line-height: 1.3; font-weight: 700; color: #fff; text-decoration: none; }
.nx-consider__name:hover { text-decoration: underline; text-underline-offset: 3px; }
.nx-consider__diff { margin: 6px 0 0; font-size: 14px; color: var(--on-dark); }
.nx-consider__row .nx-btn { grid-column: 2; justify-self: start; margin-top: 8px; min-height: 40px; padding: 7px 16px; font-size: 14px; }
.nx-consider :focus-visible { outline-color: #ffc513; }
.nx-motion .nx-consider__img img { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
@media (hover: hover) { .nx-motion .nx-consider__row:hover .nx-consider__img img { transform: scale(1.08) rotate(-2deg); } }

/* kit cards */
.nx-kit { grid-template-columns: 230px minmax(0, 1fr); gap: 26px; padding: 22px; border: 2px solid transparent; transition: border-color .25s; }
.nx-kit.is-pick { border-color: #ffc513; }
.nx-kit__img { background: radial-gradient(80% 70% at 50% 55%, #fff 0, var(--stone) 72%); }
.nx-kit__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 4px; }
.nx-kit__eyebrow .nx-kit__range { margin: 0; }
.nx-kit__badge { padding: 3px 8px; border-radius: var(--r-sm); font-size: 12px; font-weight: 800; line-height: 1.3; background: var(--stone); color: var(--ink); border: 1px solid var(--line); }
.is-pick .nx-kit__badge { background: #ffc513; border-color: #ffc513; }
.nx-motion .nx-kit__badge:not([hidden]) { animation: nx-pop .35s cubic-bezier(.2,.7,.2,1.3) both; }
.nx-kit__name { font-size: 20px; font-weight: 800; }
.is-pick .nx-kit__cta .nx-btn { background: #ffc513; color: var(--ink); }
@media (hover: hover) { .is-pick .nx-kit__cta .nx-btn:hover { background: var(--ink); color: #fff; } }
.nx-kit .nx-specs { gap: 0; margin-top: 16px; padding: 12px 0; border-top: 0; background: var(--stone); border-radius: var(--r); }
.nx-kit .nx-specs > div { padding: 0 16px; border-left: 1px solid var(--line); }
.nx-kit .nx-specs > div:first-child { border-left: 0; }
.nx-specs dt { font-size: 12px; }
.nx-specs__lead dd { font-size: 21px; font-weight: 800; font-stretch: 110%; line-height: 1.15; }
.nx-kit__details { margin-top: 12px; }
.nx-more--kit { border-top: 0; }
.nx-more--kit summary { justify-content: flex-start; gap: 12px; padding: 6px 0; color: var(--cyan-ink); font-size: 15px; }
.nx-more--kit summary::after { border-color: var(--cyan-ink); width: 8px; height: 8px; }
.nx-more__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 28px; padding: 12px 0 4px; }
.nx-more__cols h4 { margin: 0 0 8px; font-size: 14px; font-weight: 800; }
.nx-more--kit > p:first-of-type { margin-top: 10px; }

@media (max-width: 1100px) {
  .nx-suggest .nx-picks { grid-template-columns: minmax(0, 1fr); }
  .nx-pick { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); }
  .nx-consider__rows, .nx-consider { padding-bottom: 14px; }
  .nx-kit { grid-template-columns: 180px minmax(0, 1fr); gap: 20px; }
  .nx-more__cols { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}
@media (max-width: 640px) {
  .nx-pick { grid-template-columns: minmax(0, 1fr); }
  .nx-pick__img { height: auto; padding: 48px 16px 14px; }
  .nx-pick__img img { max-height: 150px; }
  .nx-pick__body { padding: 18px 18px 20px; }
  .nx-pick__name { font-size: 20px; }
  .nx-pick__specs { grid-template-columns: 1fr 1fr; row-gap: 12px; }
  .nx-pick__specs div:nth-child(odd) { border-left: 0; }
  .nx-pick__actions .nx-btn { width: 100%; }
  .nx-pick__actions a { margin-inline: auto; }
  .nx-consider { padding: 18px 16px 8px; }
  .nx-consider__row { grid-template-columns: 64px minmax(0, 1fr); }
  .nx-consider__row .nx-btn { grid-column: 1 / -1; justify-self: stretch; }
  .nx-kit { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 16px; }
  .nx-kit .nx-specs { grid-template-columns: 1fr 1fr; row-gap: 12px; }
  .nx-kit .nx-specs > div:nth-child(odd) { border-left: 0; }
  .nx-kit__name { font-size: 17px; }
  .nx-specs__lead dd { font-size: 19px; }
}
.nx-consider__help { margin-top: auto; padding: 16px 0 12px; border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.nx-consider__help p { margin: 0; flex: 1 1 200px; font-size: 14px; color: var(--on-dark); }
.nx-consider__help a { display: inline-flex; align-items: center; min-height: 40px; font-weight: 800; font-size: 15px; color: #ffc513; text-decoration: none; }
.nx-consider__help a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- vehicle hero, decluttered 19 Oct: title, version, one line, photo ---------- */
.nx-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.nx-vhero__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; padding-block: 44px 28px; }
.nx-vhero__h1 { font-size: clamp(34px, 3.6vw, 52px); line-height: 1.02; }
.nx-vhero__switch { margin-top: 22px; padding-top: 0; border-top: 0; gap: 10px 18px; }
.nx-vhero__switch .nx-vhero__sub { margin: 0; font-size: 18px; font-weight: 700; color: #fff; }
.nx-vpick select { min-height: 44px; padding: 9px 40px 9px 14px; font-size: 16px; font-weight: 700; border-color: rgba(255,255,255,.28); background-color: transparent; }
.nx-vpick select option { color: var(--ink); background: #fff; }
.nx-vhero__change { font-size: 14px; font-weight: 600; color: var(--on-dark); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.35); }
.nx-vhero__lede { margin: 18px 0 0; max-width: 44ch; font-size: 17px; line-height: 1.5; color: var(--on-dark); }
@media (max-width: 1100px) { .nx-vhero__grid { grid-template-columns: minmax(0, 1fr); gap: 26px; } }
@media (max-width: 640px) {
  .nx-vhero__grid { padding-block: 20px 6px; gap: 20px; }
  .nx-vhero__h1 { font-size: clamp(30px, 8.6vw, 36px); }
  .nx-vhero__switch { margin-top: 16px; }
  .nx-vpick { width: auto; flex: 1 1 auto; }
  .nx-vhero__lede { margin-top: 14px; font-size: 16px; }
}
.nx-vhero__switch { flex-direction: column; align-items: flex-start; gap: 10px; } .nx-vpick, .nx-vpick select { max-width: 100%; }

/* ---------- vehicle pages: filter rail and about section, redesigned 19 Oct ---------- */
.nx-filters { padding: 22px; }
@media (min-width: 1101px) { .nx-filters { top: 20px; border-radius: var(--r-xl); } }
.nx-filters__head { margin-bottom: 2px; }
.nx-filters__head h2 { font-size: 19px; font-weight: 800; font-stretch: 112%; }
.nx-facet { border-top: 0; padding: 14px 0 4px; }
.nx-facet legend { margin-bottom: 6px; font-size: 13px; font-weight: 800; color: var(--muted); }
.nx-check { min-height: 42px; margin: 0 -10px; padding: 6px 10px; border-radius: var(--r); transition: background-color .18s; }
.nx-check input { appearance: none; -webkit-appearance: none; display: grid; place-content: center; width: 20px; height: 20px; border: 1.5px solid var(--field); border-radius: 5px; background: #fff; cursor: pointer; transition: background-color .18s, border-color .18s; }
.nx-check input::after { content: ""; width: 10px; height: 6px; margin-top: -3px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg) scale(0); transition: transform .18s cubic-bezier(.3,1.6,.5,1); }
.nx-check input:checked { background: var(--ink); border-color: var(--ink); }
.nx-check input:checked::after { transform: rotate(-45deg) scale(1); }
.nx-check input:disabled { cursor: not-allowed; opacity: .5; }
.nx-check:has(input:checked) { background: var(--cyan-wash); }
.nx-check:has(input:checked) .nx-check__label { font-weight: 700; }
.nx-check__count { min-width: 26px; padding: 2px 6px; border-radius: var(--r-sm); background: var(--stone); text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); }
.nx-check:has(input:checked) .nx-check__count { background: #fff; color: var(--ink); }
@media (hover: hover) { .nx-check:hover:not(.is-empty) { background: var(--stone); } .nx-check:has(input:checked):hover { background: var(--cyan-wash); } }
.nx-filters__help { margin-top: 16px; padding: 18px; border-radius: var(--r-lg);
  background: radial-gradient(110% 70% at 100% 0%, rgba(255,197,19,.14), transparent 60%), radial-gradient(90% 60% at 0% 100%, rgba(0,174,239,.14), transparent 60%), var(--ink); }
.nx-filters__help-title { margin: 0 0 4px !important; font-size: 16px !important; font-weight: 800; color: #fff !important; }
.nx-filters__help p { margin-bottom: 14px; }
.nx-filters__help :focus-visible { outline-color: #ffc513; }

/* about: intro beside its heading, then range cards on a budget-to-capable scale */
.nx-about__intro { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 24px 64px; align-items: start; }
.nx-about__intro .nx-h2 { margin: 0; }
.nx-about__text p:last-child { margin-bottom: 0; }
.nx-about__ranges { margin-top: 56px; }
@media (max-width: 1100px) {
  .nx-about__intro { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .nx-about__ranges { margin-top: 40px; }
}

/* ---------- vehicle pages: "How do you use your X?" as one divided control, 19 Oct ----------
   Kyle rejected four bordered tiles inside the white card. Now: the question across the top, then four cells divided by
   hairlines like tabs. The chosen cell goes ink with a yellow icon and a yellow underline. */
.nx-suggest .nx-suggest__bar { display: block; padding: 0; overflow: hidden; border-radius: var(--r-xl); }
.nx-suggest__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 24px; padding: 20px 28px 18px; border-bottom: 1px solid var(--line); }
.nx-suggest__q { font-size: 22px; line-height: 1.2; }
.nx-suggest__sub { margin: 0; font-size: 15px; color: var(--muted); }
.nx-seg--tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 0; border-radius: 0; overflow: visible; }
.nx-seg--tiles .nx-seg__btn { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 2px; align-items: center; justify-items: start;
  min-height: 0; padding: 20px 24px 22px; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: #fff; text-align: left; transition: background-color .2s, color .2s; }
.nx-seg--tiles .nx-seg__btn:first-child { border-left: 0; }
.nx-seg--tiles .nx-seg__btn svg { grid-row: 1 / span 2; width: 46px; height: 46px; margin: 0; padding: 10px; border-radius: var(--r-lg); background: var(--cyan-wash); stroke: var(--cyan-ink); transition: background-color .2s, stroke .2s, transform .3s cubic-bezier(.2,.7,.2,1); }
.nx-seg--tiles .nx-seg__btn b { align-self: end; font-size: 17px; line-height: 1.2; }
.nx-seg--tiles .nx-seg__btn span { align-self: start; font-size: 13px; font-weight: 500; line-height: 1.35; color: var(--muted); transition: color .2s; }
.nx-seg--tiles .nx-seg__btn::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #ffc513; transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.6,0,.2,1); }
.nx-seg--tiles .nx-seg__btn[aria-pressed="true"] { background: var(--ink); color: #fff; }
.nx-seg--tiles .nx-seg__btn[aria-pressed="true"] svg { background: #ffc513; stroke: var(--ink); }
.nx-seg--tiles .nx-seg__btn[aria-pressed="true"] span { color: var(--on-dark); }
.nx-seg--tiles .nx-seg__btn[aria-pressed="true"]::after { transform: none; }
.nx-seg--tiles .nx-seg__btn:focus-visible { outline-offset: -4px; }
@media (hover: hover) {
  .nx-seg--tiles .nx-seg__btn:hover:not([aria-pressed="true"]) { background: var(--stone); }
  .nx-motion .nx-seg--tiles .nx-seg__btn:hover svg { transform: translateY(-2px) rotate(-4deg); }
}
.nx-motion .nx-suggest__bar.is-in .nx-seg__btn { animation: nx-fade .5s ease both; animation-delay: calc(var(--i, 0) * 70ms + .15s); }
@media (max-width: 1100px) {
  .nx-seg--tiles .nx-seg__btn { grid-template-columns: minmax(0, 1fr); padding: 18px 18px 20px; }
  .nx-seg--tiles .nx-seg__btn svg { grid-row: auto; margin-bottom: 8px; }
}
@media (max-width: 640px) {
  .nx-suggest__head { padding: 16px 16px 14px; }
  .nx-suggest__q { font-size: 20px; }
  .nx-suggest__sub { font-size: 14px; }
  .nx-seg--tiles { grid-template-columns: 1fr 1fr; width: 100%; }
  .nx-seg--tiles .nx-seg__btn { padding: 14px 14px 16px; border-left: 0; }
  .nx-seg--tiles .nx-seg__btn:nth-child(even) { border-left: 1px solid var(--line); }
  .nx-seg--tiles .nx-seg__btn:nth-child(n+3) { border-top: 1px solid var(--line); }
  .nx-seg--tiles .nx-seg__btn svg { width: 38px; height: 38px; padding: 8px; }
  .nx-seg--tiles .nx-seg__btn b { font-size: 15px; }
  .nx-seg--tiles .nx-seg__btn span { font-size: 12px; }
}
@media (max-width: 640px) {
  .nx-seg--tiles .nx-seg__btn { grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 14px 12px; min-height: 64px; }
  .nx-seg--tiles .nx-seg__btn svg { grid-row: auto; width: 34px; height: 34px; padding: 7px; margin: 0; }
  .nx-seg--tiles .nx-seg__btn b { align-self: center; font-size: 14px; line-height: 1.2; }
  .nx-seg--tiles .nx-seg__btn span { display: none; }
}
@media (min-width: 641px) and (max-width: 1100px) {
  .nx-seg--tiles .nx-seg__btn { grid-template-rows: none; align-content: start; align-items: start; }
  .nx-seg--tiles .nx-seg__btn b, .nx-seg--tiles .nx-seg__btn span { align-self: start; }
}

/* ---------- vehicle pages: our pick, simplified 19 Oct (Kyle: "too busy") ----------
   One white card: kit photo, one reason, one line of facts, one button. "Or consider" is a light list in the same card,
   each row a link to that kit (no second set of buttons, no dark panel). */
.nx-suggest .nx-picks { display: block; margin-top: 16px; }
.nx-picks .nx-pick { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1.25fr) minmax(0, 1fr); align-items: stretch; border: 0; border-radius: var(--r-xl); background: #fff; box-shadow: 0 14px 36px rgba(10,2,3,.08); overflow: hidden; }
.nx-picks .nx-pick__img { position: static; display: grid; place-items: center; padding: 24px; background: var(--stone); }
.nx-picks .nx-pick__img img { max-height: 170px; width: auto; mix-blend-mode: multiply; }
.nx-picks .nx-pick__body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 26px 30px; }
.nx-picks .nx-pick__label { position: static; margin: 0; padding: 0; background: none; font-size: 14px; font-weight: 600; color: var(--muted); }
.nx-picks .nx-pick__label b { display: inline-block; margin-right: 4px; padding: 2px 8px; border-radius: var(--r-sm); background: #ffc513; color: var(--ink); font-weight: 800; }
.nx-picks .nx-pick__name { margin: 4px 0 0; font-size: 22px; line-height: 1.25; font-weight: 800; font-stretch: 108%; }
.nx-picks .nx-pick__why { margin: 0; font-size: 15px; color: #33383f; }
.nx-picks .nx-pick__facts { margin: 2px 0 0; font-size: 14px; font-weight: 700; color: var(--ink); }
.nx-picks .nx-pick__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 12px; }
.nx-picks .nx-pick__actions a { font-size: 15px; font-weight: 700; color: var(--cyan-ink); }
.nx-picks .nx-consider { display: block; padding: 22px 24px; border-left: 1px solid var(--line); border-radius: 0; background: none; color: var(--ink); }
.nx-picks .nx-consider__title { margin: 0 0 6px; font-size: 13px; font-weight: 800; font-stretch: 100%; color: var(--muted); }
.nx-picks .nx-consider__row { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: center; margin: 0 -10px; padding: 10px; border: 0; border-radius: var(--r); color: inherit; text-decoration: none; transition: background-color .18s; }
.nx-picks .nx-consider__row + .nx-consider__row { margin-top: 2px; }
.nx-picks .nx-consider__img { display: grid; place-items: center; width: 56px; aspect-ratio: 1; padding: 4px; border-radius: var(--r); background: var(--stone); overflow: hidden; }
.nx-picks .nx-consider__img img { max-height: 100%; width: auto; mix-blend-mode: multiply; }
.nx-picks .nx-consider__text { display: grid; gap: 1px; min-width: 0; }
.nx-picks .nx-consider__what { margin: 0; font-size: 12px; font-weight: 800; color: var(--cyan-ink); }
.nx-picks .nx-consider__name { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.nx-picks .nx-consider__diff { margin: 0; font-size: 13px; color: var(--muted); }
@media (hover: hover) { .nx-picks .nx-consider__row:hover { background: var(--stone); } .nx-picks .nx-consider__row:hover .nx-consider__name { text-decoration: underline; text-underline-offset: 3px; } }
.nx-suggest .nx-note--info { margin-top: 12px; font-size: 13px; }
@media (max-width: 1100px) {
  .nx-picks .nx-pick { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); }
  .nx-picks .nx-consider { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); padding: 18px 24px 20px; }
}
@media (max-width: 640px) {
  .nx-picks .nx-pick { grid-template-columns: minmax(0, 1fr); }
  .nx-picks .nx-pick__img { height: auto; padding: 18px; }
  .nx-picks .nx-pick__img img { max-height: 130px; }
  .nx-picks .nx-pick__body { padding: 18px 18px 20px; }
  .nx-picks .nx-pick__name { font-size: 19px; }
  .nx-picks .nx-pick__actions { width: 100%; }
  .nx-picks .nx-pick__actions .nx-btn { width: 100%; }
  .nx-picks .nx-pick__actions a { margin-inline: auto; }
  .nx-picks .nx-consider { padding: 14px 18px 16px; }
}
.nx-picks .nx-consider__img { grid-row: auto; margin: 0; }

/* pick hierarchy, 19 Oct (Kyle: "lacking visual hierarchy"): the pick leads, the alternatives recede */
.nx-picks .nx-pick { grid-template-columns: minmax(0, 300px) minmax(0, 1.5fr) minmax(0, .85fr); }
.nx-picks .nx-pick__img { padding: 28px; background: radial-gradient(75% 70% at 50% 55%, #fff 0, var(--stone) 75%); }
.nx-picks .nx-pick__img img { max-height: 220px; }
.nx-picks .nx-pick__body { gap: 0; padding: 30px 34px 32px; justify-content: center; }
.nx-picks .nx-pick__label { font-size: 13px; }
.nx-picks .nx-pick__name { margin: 12px 0 0; font-size: clamp(22px, 2.1vw, 28px); line-height: 1.15; }
.nx-picks .nx-pick__why { margin-top: 8px; font-size: 16px; color: var(--muted); }
.nx-picks .nx-pick__facts { display: flex; flex-wrap: wrap; gap: 6px 0; margin: 18px 0 0; padding: 0; list-style: none; font-size: 14px; font-weight: 500; color: var(--muted); }
.nx-picks .nx-pick__facts li { padding: 0 14px; border-left: 1px solid var(--line); }
.nx-picks .nx-pick__facts li:first-child { padding-left: 0; border-left: 0; }
.nx-picks .nx-pick__facts b { font-size: 17px; font-weight: 800; color: var(--ink); }
.nx-picks .nx-pick__actions { margin-top: 24px; }
.nx-picks .nx-consider { padding: 24px 22px; background: #fafaf8; }
.nx-picks .nx-consider__title { margin-bottom: 8px; font-size: 14px; color: var(--ink); }
.nx-picks .nx-consider__row { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 8px 10px; }
.nx-picks .nx-consider__img { width: 44px; background: #fff; }
.nx-picks .nx-consider__what { font-size: 11px; }
.nx-picks .nx-consider__name { font-size: 14px; font-weight: 600; }
.nx-picks .nx-consider__diff { font-size: 12px; }
@media (hover: hover) { .nx-picks .nx-consider__row:hover { background: #fff; } }
@media (max-width: 1100px) {
  .nx-picks .nx-pick { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); }
  .nx-picks .nx-pick__body { padding: 24px 26px; }
}
@media (max-width: 640px) {
  .nx-picks .nx-pick { grid-template-columns: minmax(0, 1fr); }
  .nx-picks .nx-pick__img img { max-height: 150px; }
  .nx-picks .nx-pick__body { padding: 20px 18px 22px; }
  .nx-picks .nx-pick__name { font-size: 21px; }
  .nx-picks .nx-pick__facts li { padding: 0 10px; }
  .nx-picks .nx-pick__facts b { font-size: 15px; }
  .nx-picks .nx-pick__actions { margin-top: 20px; }
}
@media (max-width: 640px) {
  .nx-picks .nx-pick__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; width: 100%; }
  .nx-picks .nx-pick__facts li, .nx-picks .nx-pick__facts li:first-child { padding: 0; border-left: 0; }
}

/* suggestions, final pass 19 Oct: the use bar and the pick read as one card. The chosen tile's yellow underline sits on
   the seam, leading into the pick. One drop shadow on the pair instead of two box shadows. */
.nx-suggest > .nx-wrap { filter: drop-shadow(0 18px 34px rgba(10,2,3,.12)); }
.nx-suggest .nx-suggest__bar, .nx-picks .nx-pick { box-shadow: none; }
.nx-suggest .nx-picks { margin-top: 0; }
.nx-suggest:has(.nx-picks:not([hidden])) .nx-suggest__bar { border-radius: var(--r-xl) var(--r-xl) 0 0; }
.nx-picks .nx-pick { border-radius: 0 0 var(--r-xl) var(--r-xl); border-top: 1px solid var(--line); }
.nx-picks .nx-pick__label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; color: var(--cyan-ink); }
.nx-picks .nx-pick__label b { margin: 0; }
@media (max-width: 640px) {
  .nx-picks .nx-pick__img { padding: 14px; }
  .nx-picks .nx-pick__img img { max-height: 110px; }
}

/* ---------- vehicle pages: all kits section pass, 19 Oct ---------- */
/* side column: filter card, then "Help me choose" as its own card; the pair sticks on desktop */
.nx-all__side { display: grid; gap: 16px; align-content: start; }
@media (min-width: 1101px) { .nx-all__side { position: sticky; top: 20px; } .nx-all__side .nx-filters { position: static; } }
.nx-helpcard { display: grid; gap: 6px; padding: 22px; border-radius: var(--r-xl); color: #fff;
  background: radial-gradient(110% 70% at 100% 0%, rgba(255,197,19,.16), transparent 60%), radial-gradient(90% 60% at 0% 100%, rgba(0,174,239,.16), transparent 60%), var(--ink); }
.nx-helpcard__title { margin: 0; font-size: 18px; font-weight: 800; font-stretch: 110%; }
.nx-helpcard__text { margin: 0 0 10px; font-size: 14px; line-height: 1.45; color: var(--on-dark); }
.nx-helpcard__call { justify-self: center; margin-top: 4px; font-size: 14px; font-weight: 700; color: #ffc513; text-decoration: none; }
.nx-helpcard__call:hover { text-decoration: underline; text-underline-offset: 3px; }
.nx-helpcard :focus-visible { outline-color: #ffc513; }
@media (max-width: 1100px) {
  .nx-all__side { display: contents; }
  .nx-all__list { order: 1; }
  .nx-helpcard { order: 2; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 20px; }
  .nx-helpcard__title, .nx-helpcard__text { grid-column: 1; }
  .nx-helpcard .nx-btn { grid-column: 2; grid-row: 1 / span 2; width: auto; }
  .nx-helpcard__call { grid-column: 2; justify-self: center; }
}
@media (max-width: 640px) {
  .nx-helpcard { grid-template-columns: minmax(0, 1fr); }
  .nx-helpcard .nx-btn, .nx-helpcard__call { grid-column: 1; grid-row: auto; width: 100%; text-align: center; }
}

/* toolbar: count on the left, sort chips on the right (select on phones) */
.nx-toolbar { align-items: center; gap: 12px 16px; margin-bottom: 16px; padding: 10px 10px 10px 18px; border-radius: var(--r-lg); background: #fff; }
.nx-toolbar__count { margin: 0; font-size: 15px; font-weight: 800; color: var(--ink); }
.nx-sortchips { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.nx-sortchips__label { margin-right: 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
.nx-sortchips [data-sort-chips] { display: flex; gap: 4px; padding: 4px; border-radius: var(--r); background: var(--stone); }
.nx-chip { min-height: 36px; padding: 6px 12px; border: 0; border-radius: 6px; background: none; color: var(--muted); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: background-color .18s, color .18s, box-shadow .18s; }
.nx-chip[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(10,2,3,.12); }
@media (hover: hover) { .nx-chip:hover:not([aria-pressed="true"]) { color: var(--ink); } }
.nx-toolbar .nx-toolbar__sort { display: none; }
@media (max-width: 1100px) { .nx-toolbar { padding: 8px; } .nx-toolbar__count { margin-left: 4px; } }
@media (max-width: 640px) {
  .nx-toolbar { padding: 0; background: none; flex-wrap: nowrap; }
  .nx-sortchips { display: none; }
  .nx-toolbar .nx-toolbar__sort { display: flex; flex: 1; margin: 0; }
  .nx-toolbar__sort select { appearance: none; width: 100%; min-height: 44px; padding: 8px 36px 8px 12px; border: 1.5px solid var(--ink); border-radius: var(--r); font-size: 15px; font-weight: 700;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0203' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 10px center / 18px no-repeat; }
  .nx-toolbar__filter { flex: none; }
}

/* kit cards: one warning box, quieter Enquire on the non-pick cards */
.nx-kit__flag { align-items: flex-start; padding: 10px 14px; }
.nx-kit__flag p { margin: 0; }
.nx-kit__flag p + p { margin-top: 4px; }
.nx-kit__cta .nx-btn--outline { border-color: var(--ink); background: #fff; color: var(--ink); }
@media (hover: hover) { .nx-kit__cta .nx-btn--outline:hover { background: var(--ink); color: #fff; } }
.is-pick .nx-kit__cta .nx-btn { border-color: #ffc513; }
@media (min-width: 641px) and (max-width: 1100px) {
  .nx-helpcard .nx-btn { grid-row: 1; align-self: end; }
  .nx-helpcard__call { grid-row: 2; align-self: start; margin-top: 2px; }
  .nx-helpcard__text { margin: 0; }
}
@media (min-width: 641px) and (max-width: 1100px) { .nx-helpcard__title { align-self: end; } .nx-helpcard__text { align-self: start; } }

/* ---------- kit card details panel, 19 Oct (Kyle: "shit when expanded") ---------- */
.nx-kitmore { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0; margin: 8px 0 4px; border-radius: var(--r-lg); background: var(--stone); overflow: hidden; }
.nx-kitmore--one { grid-template-columns: minmax(0, 1fr); }
.nx-kitmore h4 { margin: 0 0 10px; font-size: 13px; font-weight: 800; color: var(--ink); }
.nx-kitmore__box { padding: 16px 18px; background: #fafaf8; border-right: 1px solid var(--line); }
.nx-kitmore__items { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.nx-kitmore__items li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; align-items: baseline; margin: 0; font-size: 14px; line-height: 1.35; color: var(--ink); }
.nx-kitmore__qty { display: inline-block; padding: 1px 0; border-radius: var(--r-sm); background: #fff; border: 1px solid var(--line); text-align: center; font-size: 12px; font-weight: 800; }
.nx-kitmore__code { margin-left: 2px; font-size: 12px; color: var(--muted-2); white-space: nowrap; }
.nx-kitmore__about { padding: 16px 18px; }
.nx-more--kit .nx-kitmore__about p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: #33383f; max-width: none; }
.nx-more--kit .nx-kitmore__about .nx-kitmore__fine { margin: 0; padding-top: 8px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.nx-more--kit .nx-kitmore__about .nx-kitmore__fine + .nx-kitmore__fine { padding-top: 4px; border-top: 0; }
.nx-more--kit .nx-more__cols { display: none; }
@media (max-width: 1100px) { .nx-kitmore { grid-template-columns: minmax(0, 1fr); } .nx-kitmore__box { border-right: 0; border-bottom: 1px solid var(--line); } }
@media (max-width: 640px) { .nx-kitmore__box, .nx-kitmore__about { padding: 14px; } }
.nx-more--kit .nx-kitmore__items { margin: 0; padding: 0; }

/* kit cards, 19 Oct (Kyle: "isn't enquire the most important part?"): Enquire leads, in its own action row under the specs.
   Solid on every card; yellow on the pick, ink on the rest. "What's in the kit" drops to a quiet link below. */
.nx-kit__head { display: block; }
.nx-kit__name { font-size: 21px; line-height: 1.22; }
.nx-kit .nx-kit__cta { display: flex; flex-wrap: wrap; align-items: center; justify-items: initial; gap: 10px 18px; margin-top: 16px; }
.nx-kit .nx-kit__cta .nx-btn { flex: none; min-width: 230px; }
.nx-kit__call { font-size: 15px; font-weight: 700; color: var(--ink); text-decoration: none; }
.nx-kit__call:hover { text-decoration: underline; text-underline-offset: 3px; }
.nx-kit .nx-kit__cta .nx-kit__sku { margin-left: auto; font-size: 13px; color: var(--muted-2); }
.nx-kit:not(.is-pick) .nx-kit__cta .nx-btn { background: var(--ink); border-color: var(--ink); color: #fff; }
@media (hover: hover) { .nx-kit:not(.is-pick) .nx-kit__cta .nx-btn:hover { background: var(--cyan); border-color: var(--cyan); color: var(--ink); } }
.nx-kit .nx-kit__details { margin-top: 10px; }
.nx-more--kit summary { font-size: 14px; color: var(--muted); }
.nx-more--kit summary::after { border-color: var(--muted); }
.nx-more--kit[open] summary { color: var(--cyan-ink); }
@media (max-width: 640px) {
  .nx-kit .nx-kit__cta { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; margin-top: 0; }
  .nx-kit .nx-kit__cta .nx-btn { grid-column: 1 / -1; order: 0; min-width: 0; width: 100%; }
  .nx-kit .nx-kit__cta .nx-kit__call { order: 1; font-size: 14px; }
  .nx-kit .nx-kit__cta .nx-kit__sku { order: 2; margin: 0; justify-self: end; }
  .nx-kit__name { font-size: 17px; }
}

/* kit cards, 19 Oct tidy: fitment line on look-alike kits, call link on the pick only, part codes in their own column */
.nx-kit__suits { margin: 4px 0 0; font-size: 14px; font-weight: 700; color: var(--cyan-ink); }
.nx-kit:not(.is-pick) .nx-kit__call { display: none; }
.nx-kitmore__items li { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; }
.nx-kitmore__code { margin: 0; text-align: right; }
@media (max-width: 640px) {
  .nx-kit:not(.is-pick) .nx-kit .nx-kit__cta .nx-kit__sku, .nx-kit:not(.is-pick) .nx-kit__cta .nx-kit__sku { grid-column: 1 / -1; justify-self: start; }
  .nx-kitmore__items li { grid-template-columns: 30px minmax(0, 1fr); }
  .nx-kitmore__code { grid-column: 2; text-align: left; margin-top: -2px; }
}
@media (max-width: 640px) { .nx-kitmore__code { display: none; } .nx-kitmore__items li { gap: 8px; } }

/* kit card details, stripped back 19 Oct (Kyle: "still too messy"): plain parts list, one muted line */
.nx-more--kit .nx-kitmore { display: block; margin: 6px 0 2px; padding: 0; border-radius: 0; background: none; }
.nx-more--kit .nx-kitmore__items { columns: 2; column-gap: 32px; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--line); list-style: none; }
.nx-more--kit .nx-kitmore__items li { display: block; break-inside: avoid; margin: 0 0 7px; font-size: 14px; line-height: 1.4; color: #33383f; }
.nx-more--kit .nx-kitmore__items b { display: inline-block; min-width: 26px; font-weight: 800; color: var(--ink); }
.nx-more--kit .nx-kitmore__fine { margin: 6px 0 0; padding: 0; border: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); max-width: none; }
@media (max-width: 640px) { .nx-more--kit .nx-kitmore__items { columns: 1; } }
.nx-more--kit .nx-kitmore__items { display: block; } @media (max-width: 640px) { .nx-more--kit .nx-kitmore__items { columns: 1; } }
.nx-more--kit .nx-kitmore__fine { margin-top: 12px; }

/* ---------- kit card as two rows, 19 Oct (Kyle): photo + overview, then a full-width action row; the parts list opens under it ---------- */
.nx-kit { display: block; padding: 0; overflow: hidden; }
.nx-kit__top { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 26px; align-items: start; padding: 22px; }
.nx-kit .nx-kit__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 0; padding: 16px 22px; border-top: 1px solid var(--line); background: #fbfbfa; }
.nx-kit.is-pick .nx-kit__foot { background: #fffbea; border-top-color: #f6e3a1; }
.nx-kit__toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-left: auto; padding: 0 4px; border: 0; background: none; color: var(--cyan-ink); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.nx-kit__toggle::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .25s ease; }
.nx-kit__toggle[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-2px, -2px); }
.nx-kit__toggle:hover { text-decoration: underline; text-underline-offset: 3px; }
.nx-kit__more { padding: 4px 22px 20px; }
.nx-kit.is-pick .nx-kit__more { background: #fffbea; }
.nx-kit__more .nx-kitmore { display: block; margin: 0; }
.nx-kit__more .nx-kitmore__items { columns: 3; column-gap: 32px; margin: 0; padding: 12px 0 0; border: 0; list-style: none; }
.nx-kit__more .nx-kitmore__items li { display: block; break-inside: avoid; margin: 0 0 7px; font-size: 14px; line-height: 1.4; color: #33383f; }
.nx-kit__more .nx-kitmore__items b { display: inline-block; min-width: 26px; font-weight: 800; color: var(--ink); }
.nx-kit__more .nx-kitmore__fine { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.nx-motion .nx-kit__more.is-open { animation: nx-drop .3s ease both; }
@media (max-width: 1100px) {
  .nx-kit__top { grid-template-columns: 180px minmax(0, 1fr); gap: 20px; }
  .nx-kit__more .nx-kitmore__items { columns: 2; }
}
@media (max-width: 640px) {
  .nx-kit__top { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 16px; }
  .nx-kit .nx-kit__foot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 14px 16px; }
  .nx-kit .nx-kit__foot .nx-btn { width: 100%; min-width: 0; }
  .nx-kit__toggle { justify-self: center; margin: 0; }
  .nx-kit__more { padding: 0 16px 16px; }
  .nx-kit__more .nx-kitmore__items { columns: 1; }
}
.nx-kit__more .nx-kitmore { padding: 0; border-radius: 0; background: none; overflow: visible; }
.nx-kit__more .nx-kitmore__items { display: block; }
@media (max-width: 640px) {
  .nx-kit .nx-specs.nx-specs--3 { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1.1fr); row-gap: 0; }
  .nx-kit .nx-specs.nx-specs--3 > div { padding: 0 10px; border-left: 1px solid var(--line); }
  .nx-kit .nx-specs.nx-specs--3 > div:first-child { padding-left: 14px; border-left: 0; }
  .nx-kit .nx-specs.nx-specs--3 dd { font-size: 14px; }
  .nx-kit .nx-specs.nx-specs--3 .nx-specs__lead dd { font-size: 18px; }
}
.nx-rng__panel .nx-rng__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 1100px) { .nx-rng__panel .nx-rng__stats > div:first-child { grid-column: auto; } }

/* pick card, 19 Oct (Kyle: "too much yellow"): the badge and the button carry it; no yellow border or tint */
.nx-kit.is-pick { border-color: var(--ink); }
.nx-kit.is-pick .nx-kit__foot, .nx-kit.is-pick .nx-kit__more { background: #fbfbfa; }
.nx-kit.is-pick .nx-kit__foot { border-top-color: var(--line); }
.nx-kit.is-pick .nx-kit__more { background: #fbfbfa; }

/* ---------- "More about this kit" panel, 19 Oct: photos, key features, good to know, parts as one line ---------- */
.nx-kit__more .nx-kitmore { display: grid; gap: 18px; padding-top: 14px; }
.nx-kitmore__photos { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.nx-kitmore__photos::-webkit-scrollbar { display: none; }
.nx-kitmore__shot { flex: none; width: 150px; aspect-ratio: 4 / 3; padding: 6px; border: 1.5px solid var(--line); border-radius: var(--r); background: #fff; cursor: zoom-in; transition: border-color .18s; }
.nx-kitmore__shot img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
@media (hover: hover) { .nx-kitmore__shot:hover { border-color: var(--ink); } .nx-motion .nx-kitmore__shot:hover img { transform: scale(1.05); } }
.nx-kitmore__shot img { transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.nx-kitmore__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px 36px; }
.nx-kitmore__cols h4 { margin: 0 0 8px; font-size: 13px; font-weight: 800; color: var(--ink); }
.nx-kitmore__feats, .nx-kitmore__know { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.nx-kitmore__feats li, .nx-kitmore__know li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.45; color: #33383f; }
.nx-kitmore__feats li::before { content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--cyan-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006c97' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 11px no-repeat; }
.nx-kitmore__know li::before { content: ""; position: absolute; left: 4px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--field); }
.nx-kitmore__know .nx-kitmore__warranty { font-weight: 700; color: var(--ink); }
.nx-kitmore__know .nx-kitmore__warranty::before { left: 0; top: 2px; width: 16px; height: 16px; border-radius: 4px; background: #ffc513 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0203' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/%3E%3C/svg%3E") center / 11px no-repeat; }
.nx-kitmore__parts { margin: 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.55; color: var(--muted); }
.nx-kitmore__parts b { color: var(--ink); }
.nx-kit__more .nx-kitmore__fine { margin: -10px 0 0; }
.nx-kitview .nx-lightbox__fig img { background: #fff; padding: 24px; }
@media (max-width: 640px) {
  .nx-kitmore__shot { width: 120px; }
  .nx-kitmore__cols { grid-template-columns: minmax(0, 1fr); }
}
.nx-kit__more .nx-kitmore { grid-template-columns: minmax(0, 1fr); align-items: start; } .nx-kitmore__photos { align-items: start; }

/* ---------- vehicle about section, 19 Oct: one intro line + three points; range cards show this vehicle's count and filter the list ---------- */
.nx-about__text > p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink); }
.nx-about__points { display: grid; gap: 16px; margin: 22px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); list-style: none; }
.nx-about__points li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; }
.nx-about__points svg { width: 40px; height: 40px; padding: 9px; border-radius: var(--r); background: var(--cyan-wash); fill: none; stroke: var(--cyan-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nx-about__points b { display: block; font-size: 16px; font-weight: 800; }
.nx-about__points span { display: block; margin-top: 2px; font-size: 15px; line-height: 1.45; color: var(--muted); }
@media (max-width: 640px) {
  .nx-about__text > p { font-size: 16px; }
}

/* about: where we fit, 19 Oct (Kyle: mention the target locations) */
.nx-about__area { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; margin-top: 22px; padding: 18px; border-radius: var(--r-lg); background: var(--stone); }
.nx-about__area svg { width: 40px; height: 40px; padding: 9px; border-radius: var(--r); background: #ffc513; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nx-about__area b { display: block; font-size: 16px; font-weight: 800; }
.nx-about__area > div > span { display: block; margin-top: 2px; font-size: 15px; line-height: 1.45; color: var(--muted); }
.nx-about__area a { color: var(--ink); font-weight: 700; }
.nx-about__towns { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.nx-about__towns li { padding: 4px 10px; border-radius: var(--r-sm); background: #fff; border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink); }

/* about, rebalanced 19 Oct (Kyle: "a bit of a mess"): heading, intro and where-we-fit on the left; the three points as one card on the right */
.nx-about__intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 72px; align-items: start; }
.nx-about__lead .nx-h2 { margin: 0 0 18px; }
.nx-about__lead > p { margin: 0; font-size: 17px; line-height: 1.6; color: #33383f; max-width: 56ch; }
.nx-about__lead .nx-about__area { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; margin: 24px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
.nx-about__lead .nx-about__area svg { width: 22px; height: 22px; padding: 0; margin-top: 2px; background: none; stroke: var(--cyan-ink); stroke-width: 2; }
.nx-about__lead .nx-about__area p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 56ch; }
.nx-about__lead .nx-about__area b { display: inline; margin-right: 4px; font-size: 15px; color: var(--ink); }
.nx-about__lead .nx-about__area a { color: var(--ink); font-weight: 700; }
.nx-about__intro > .nx-about__points { gap: 0; margin: 0; padding: 6px 24px; border: 0; border-radius: var(--r-xl); background: var(--stone); }
.nx-about__intro > .nx-about__points li { padding: 18px 0; border-top: 1px solid var(--line); }
.nx-about__intro > .nx-about__points li:first-child { border-top: 0; }
.nx-about__intro > .nx-about__points svg { background: #fff; }
@media (max-width: 1100px) { .nx-about__intro { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
@media (max-width: 640px) { .nx-about__intro > .nx-about__points { padding: 4px 16px; } .nx-about__lead > p { font-size: 16px; } }

/* ---------- vehicle pages: about / where / which range as three sections, 19 Oct ---------- */
.nx-about { background: #fff; }
.nx-about__lead > p { max-width: 52ch; }
.nx-where { background: var(--stone); }
.nx-where__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.nx-where__photo { margin: 0; }
.nx-where__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-xl); box-shadow: 0 24px 50px rgba(10,2,3,.14); }
.nx-where__text .nx-h2 { margin: 0 0 16px; }
.nx-where__text .nx-lede a { color: var(--ink); font-weight: 700; }
.nx-where__towns { columns: 3; column-gap: 20px; margin: 18px 0 0; padding: 0; list-style: none; }
.nx-where__towns li { position: relative; break-inside: avoid; margin: 0 0 8px; padding-left: 18px; font-size: 15px; font-weight: 600; }
.nx-where__towns li::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); }
.nx-where__facts { display: flex; flex-wrap: wrap; gap: 12px 40px; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); }
.nx-where__facts dt { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.nx-where__facts dd { margin: 4px 0 0; font-size: 15px; font-weight: 700; }
.nx-where__facts a { color: var(--ink); }
.nx-where__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 24px; }
.nx-where__map { font-weight: 700; color: var(--cyan-ink); }
.nx-motion .nx-where__photo img { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
@media (max-width: 1100px) { .nx-where__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } .nx-where__photo img { aspect-ratio: 16 / 9; } }
@media (max-width: 640px) { .nx-where__towns { columns: 2; } .nx-where__actions .nx-btn { width: 100%; } .nx-where__map { margin-inline: auto; } }

/* review fixes 19 Oct: fine print as short lines; warranty as one line when there is no other advice */
.nx-kit__more .nx-kitmore__fine { display: grid; gap: 2px; margin: -10px 0 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--muted); }
.nx-kitmore__warranty-line { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 14px; font-weight: 700; color: var(--ink); }
.nx-kitmore__warranty-line::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 4px; background: #ffc513 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0203' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/%3E%3C/svg%3E") center / 11px no-repeat; }

/* use tiles, 20 Oct (Kyle: "needs to change sooner, it looks broken"): four across only when there's room (1280px+).
   Below that, 2 by 2 with the icon beside the label; phones keep the compact 2 by 2 without descriptions. */
@media (min-width: 641px) and (max-width: 1279px) {
  .nx-seg--tiles { grid-template-columns: 1fr 1fr; }
  .nx-seg--tiles .nx-seg__btn { grid-template-columns: 46px minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; align-items: center; column-gap: 14px; row-gap: 2px; padding: 18px 22px; border-left: 0; }
  .nx-seg--tiles .nx-seg__btn:nth-child(even) { border-left: 1px solid var(--line); }
  .nx-seg--tiles .nx-seg__btn:nth-child(n+3) { border-top: 1px solid var(--line); }
  .nx-seg--tiles .nx-seg__btn svg { grid-row: 1 / span 2; margin: 0; }
  .nx-seg--tiles .nx-seg__btn b { align-self: end; }
  .nx-seg--tiles .nx-seg__btn span { align-self: start; }
}

/* =================== product catalogue pages (Ultra Vision first), 20 Oct =================== */
/* product: photos left, details right, on white because the brand photos are on white */
.nx-prod { background: #fff; border-bottom: 1px solid var(--line); }
.nx-prod__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: start; padding-block: 36px 56px; }
.nx-prod .nx-crumbs ol { color: var(--muted); }
.nx-prod .nx-crumbs li:not(:last-child)::after { color: var(--line); }
.nx-prod .nx-crumbs a { color: var(--muted); }
.nx-prod .nx-crumbs a:hover { color: var(--ink); }
.nx-prod__gallery { position: sticky; top: 20px; display: grid; gap: 12px; }
.nx-prod__main { display: grid; place-items: center; width: 100%; aspect-ratio: 1; padding: 28px; border: 0; border-radius: var(--r-xl); background: var(--stone); cursor: zoom-in; }
.nx-prod__main img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
@media (hover: hover) { .nx-motion .nx-prod__main:hover img { transform: scale(1.04); } }
.nx-prod__main--none { color: var(--muted); cursor: default; }
.nx-prod__thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.nx-prod__thumb { aspect-ratio: 1; padding: 6px; border: 1.5px solid var(--line); border-radius: var(--r); background: #fff; cursor: zoom-in; transition: border-color .18s; }
.nx-prod__thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
@media (hover: hover) { .nx-prod__thumb:hover { border-color: var(--ink); } }
.nx-prod__eyebrow { margin: 0 0 8px; font-size: 13px; font-weight: 800; color: var(--cyan-ink); }
.nx-prod__h1 { margin: 0; font-size: clamp(28px, 2.6vw, 38px); font-weight: 800; font-stretch: 110%; line-height: 1.12; }
.nx-prod__lede { margin: 14px 0 0; font-size: 16px; line-height: 1.55; color: #33383f; max-width: 56ch; }
.nx-prod__strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); margin: 22px 0 0; padding: 14px 0; border-radius: var(--r); background: var(--stone); }
.nx-prod__strip > div { padding: 0 16px; border-left: 1px solid var(--line); }
.nx-prod__strip > div:first-child { border-left: 0; }
.nx-prod__strip dt { font-size: 12px; color: var(--muted); }
.nx-prod__strip dd { margin: 3px 0 0; font-size: 17px; font-weight: 800; }
.nx-prod__opts { display: grid; gap: 14px; margin-top: 22px; }
.nx-opt { margin: 0; padding: 0; border: 0; }
.nx-opt legend { padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 800; }
.nx-opt__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.nx-opt__chip { position: relative; cursor: pointer; }
.nx-opt__chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.nx-opt__chip span { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border: 1.5px solid var(--line); border-radius: var(--r); background: #fff; font-size: 14px; font-weight: 600; transition: border-color .18s, background-color .18s, color .18s; }
.nx-opt__chip input:checked + span { border-color: var(--ink); background: var(--ink); color: #fff; }
.nx-opt__chip input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) { .nx-opt__chip:hover input:not(:checked) + span { border-color: var(--ink); } }
.nx-prod__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 26px; }
.nx-prod__call { font-size: 15px; font-weight: 700; color: var(--ink); text-decoration: none; }
.nx-prod__call:hover { text-decoration: underline; text-underline-offset: 3px; }
.nx-prod__assure { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); list-style: none; font-size: 14px; font-weight: 600; }
.nx-prod__assure li { position: relative; padding-left: 24px; }
.nx-prod__assure li::before { content: ""; position: absolute; left: 0; top: 1px; width: 16px; height: 16px; border-radius: 50%;
  background: #ffc513 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0203' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 11px no-repeat; }
/* detail: features and kit contents left, specifications right */
.nx-prod-detail__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px; align-items: start; }
.nx-prod__block + .nx-prod__block { margin-top: 32px; }
.nx-prod__block .nx-h3 { margin: 0 0 14px; font-size: 20px; font-weight: 800; font-stretch: 110%; }
.nx-prod__feats, .nx-prod__box { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.nx-prod__feats li, .nx-prod__box li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.5; color: #33383f; }
.nx-prod__feats li::before { content: ""; position: absolute; left: 0; top: 3px; width: 17px; height: 17px; border-radius: 50%;
  background: var(--cyan-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006c97' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 11px no-repeat; }
.nx-prod__box li::before { content: ""; position: absolute; left: 5px; top: 8px; width: 7px; height: 7px; border-radius: 2px; background: var(--ink); }
.nx-prod__specs { margin: 0; border-top: 1px solid var(--line); }
.nx-prod__specs > div, .nx-prod__parts dl > div { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.nx-prod__specs dt, .nx-prod__parts dt { color: var(--muted); }
.nx-prod__specs dd, .nx-prod__parts dd { margin: 0; font-weight: 700; }
.nx-prod__parts { margin-top: 16px; }
.nx-prod__parts summary { cursor: pointer; font-size: 14px; font-weight: 700; color: var(--cyan-ink); }
.nx-prod__parts dl { margin: 10px 0 0; }
/* product cards */
.nx-pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.nx-pcard { display: flex; flex-direction: column; border-radius: var(--r-xl); background: #fff; color: var(--ink); text-decoration: none; overflow: hidden; transition: box-shadow .3s, transform .3s cubic-bezier(.2,.7,.2,1); }
.nx-pcard__img { display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 18px; background: radial-gradient(80% 70% at 50% 55%, #fff 0, var(--stone) 78%); }
.nx-pcard__img img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.nx-pcard__noimg { font-size: 13px; color: var(--muted); }
.nx-pcard__body { display: flex; flex-direction: column; gap: 4px; flex: 1; padding: 16px 18px 18px; }
.nx-pcard__eyebrow { font-size: 12px; font-weight: 800; color: var(--cyan-ink); }
.nx-pcard__name { font-size: 16px; font-weight: 800; line-height: 1.3; }
.nx-pcard__facts { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.nx-pcard__go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; font-size: 14px; font-weight: 800; color: var(--ink); }
.nx-pcard__go::after { content: "→"; transition: transform .2s; }
@media (hover: hover) { .nx-motion .nx-pcard:hover { box-shadow: 0 16px 34px rgba(10,2,3,.09); transform: translateY(-2px); } .nx-pcard:hover .nx-pcard__img img { transform: scale(1.05); } .nx-pcard:hover .nx-pcard__go::after { transform: translateX(4px); } }
.nx-related { background: var(--stone); }
.nx-related .nx-sechead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.nx-related__all { font-weight: 800; color: var(--cyan-ink); }
/* category hero and listings */
.nx-cathero { background: var(--ink); color: #fff; padding-block: 40px 48px; }
.nx-cathero__h1 { margin: 0; font-size: clamp(32px, 4vw, 52px); }
.nx-cathero__lede { margin: 14px 0 0; max-width: 60ch; font-size: 17px; color: var(--on-dark); }
.nx-cathero__count { margin: 16px 0 0; font-size: 14px; font-weight: 800; color: #ffc513; }
.nx-cathero .nx-prod__eyebrow { color: var(--cyan); }
.nx-series + .nx-series { margin-top: 48px; }
.nx-series__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-bottom: 16px; }
.nx-series__head .nx-h3 { margin: 0; font-size: 22px; font-weight: 800; font-stretch: 110%; }
.nx-series__head p { margin: 0; font-size: 15px; color: var(--muted); }
.nx-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.nx-jump__item { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 14px; border-radius: var(--r-lg); background: #fff; color: var(--ink); font-weight: 700; text-decoration: none; transition: box-shadow .2s; }
.nx-jump__item .nx-makelogo { width: 44px; height: 28px; object-fit: contain; }
.nx-jump__item b { padding: 1px 7px; border-radius: var(--r-sm); background: var(--stone); font-size: 12px; }
@media (hover: hover) { .nx-jump__item:hover { box-shadow: 0 0 0 1.5px var(--ink); } }
.nx-acclist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.nx-acc { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 14px 10px 10px; border-radius: var(--r-lg); background: #fff; }
.nx-acc__img { display: grid; place-items: center; width: 64px; aspect-ratio: 1; padding: 4px; border-radius: var(--r); background: var(--stone); }
.nx-acc__img img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.nx-acc__name { font-size: 14px; font-weight: 700; line-height: 1.35; }
.nx-acc__name small { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--muted); }
.nx-acc .nx-btn { min-height: 40px; padding: 7px 14px; font-size: 14px; }
.nx-catnav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); }
.nx-catnav span { margin-right: 6px; font-size: 13px; font-weight: 800; color: var(--muted); }
.nx-catnav a { padding: 8px 14px; border-radius: var(--r); background: #fff; color: var(--ink); font-size: 14px; font-weight: 700; text-decoration: none; }
.nx-catnav a:hover { background: var(--ink); color: #fff; }
/* lighting hub */
.nx-lhero { background: radial-gradient(70% 90% at 80% 40%, rgba(0,174,239,.16), transparent 60%), var(--ink); color: #fff; }
.nx-lhero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; padding-block: 40px 56px; }
.nx-lhero__h1 { margin: 0; font-size: clamp(34px, 4.4vw, 60px); line-height: 1.02; }
.nx-lhero__h1 em { display: block; font-style: normal; color: #ffc513; }
.nx-lhero__lede { margin: 18px 0 0; max-width: 46ch; font-size: 18px; line-height: 1.5; color: var(--on-dark); }
.nx-lhero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.nx-lhero__img { margin: 0; display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 18px; background: radial-gradient(65% 65% at 50% 50%, #fff 0, #e9ecee 70%); box-shadow: 0 30px 60px rgba(0,0,0,.45); overflow: hidden; }
.nx-lhero__img img { max-width: 92%; max-height: 92%; object-fit: contain; mix-blend-mode: multiply; }
.nx-motion .nx-lhero__img { animation: nx-slide-in .9s cubic-bezier(.2,.7,.2,1) both .15s; }
.nx-cattiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.nx-cattile { display: grid; grid-template-columns: 120px minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: 18px; row-gap: 4px; padding: 16px; border-radius: var(--r-xl); background: #fff; color: var(--ink); text-decoration: none; transition: box-shadow .3s; }
.nx-cattile__img { grid-row: 1 / span 3; display: grid; place-items: center; aspect-ratio: 1; padding: 8px; border-radius: var(--r-lg); background: var(--stone); }
.nx-cattile__img img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.nx-cattile__name { font-size: 18px; font-weight: 800; font-stretch: 108%; }
.nx-cattile__lede { font-size: 14px; line-height: 1.45; color: var(--muted); }
.nx-cattile__count { font-size: 13px; font-weight: 800; color: var(--cyan-ink); }
@media (hover: hover) { .nx-cattile:hover { box-shadow: 0 0 0 1.5px var(--ink); } .nx-cattile:hover .nx-cattile__img img { transform: scale(1.06); } }
.nx-lkits { background: #fff; }
.nx-jump--hub { margin-bottom: 0; }
.nx-jump--hub .nx-jump__item { background: var(--stone); }
.nx-lwhy { padding-block: 0 8px; }
.nx-lwhy__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; padding: 26px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); list-style: none; }
.nx-lwhy__list li { padding: 0 28px; border-left: 1px solid var(--line); }
.nx-lwhy__list li:first-child { padding-left: 0; border-left: 0; }
.nx-lwhy__list b { display: block; font-size: 17px; font-weight: 800; }
.nx-lwhy__list span { display: block; margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--muted); }
@media (max-width: 1100px) {
  .nx-prod__grid, .nx-lhero__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .nx-prod__gallery { position: static; max-width: 640px; }
  .nx-prod-detail__grid { grid-template-columns: minmax(0, 1fr); }
  .nx-pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nx-cattiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-acclist { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .nx-prod__grid { padding-block: 20px 36px; }
  .nx-prod__main { padding: 18px; }
  .nx-prod__thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nx-prod__strip { grid-template-columns: 1fr 1fr; row-gap: 12px; }
  .nx-prod__strip > div:nth-child(odd) { border-left: 0; }
  .nx-prod__actions .nx-btn { width: 100%; }
  .nx-prod__call { margin-inline: auto; }
  .nx-pgrid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .nx-pcard__body { padding: 12px; }
  .nx-pcard__name { font-size: 14px; }
  .nx-cattiles { grid-template-columns: minmax(0, 1fr); }
  .nx-cattile { grid-template-columns: 88px minmax(0, 1fr); }
  .nx-lwhy__list { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .nx-lwhy__list li { padding: 0; border-left: 0; }
  .nx-acc { grid-template-columns: 52px minmax(0, 1fr); }
  .nx-acc__img { width: 52px; }
  .nx-acc .nx-btn { grid-column: 1 / -1; }
  .nx-related .nx-sechead { flex-direction: column; }
}
.nx-lhero__img img { width: auto; height: 92%; max-height: none; }
.nx-lhero__img img { width: 100%; height: 100%; max-width: none; object-fit: contain; }

/* header dropdowns, 20 Oct: Services and Parts & Accessories, like the rest of the site */
.nx-header__nav { align-items: center; gap: 6px 24px; }
.nx-nav__item { position: relative; display: flex; align-items: center; gap: 2px; }
.nx-nav__caret { width: 24px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--on-dark); }
.nx-nav__caret::before { content: ""; display: block; width: 7px; height: 7px; margin: 0 auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.nx-nav__drop { position: absolute; left: -14px; top: 100%; z-index: 60; display: grid; min-width: 240px; padding: 8px; border: 1px solid var(--ink-3); border-radius: var(--r-lg); background: var(--ink-2); box-shadow: 0 20px 40px rgba(0,0,0,.4);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s, transform .18s, visibility .18s; }
.nx-nav__drop::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.nx-header__nav .nx-nav__drop a { padding: 10px 12px; border: 0; border-radius: var(--r); font-size: 15px; color: #fff; white-space: nowrap; }
.nx-header__nav .nx-nav__drop a::after { display: none; }
.nx-header__nav .nx-nav__drop a:hover, .nx-header__nav .nx-nav__drop a:focus-visible { background: var(--ink-3); color: #fff; }
.nx-header__nav .nx-nav__drop a[aria-current] { color: var(--cyan); }
.nx-header__nav .nx-nav__drop a:last-child { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--ink-3); border-radius: 0 0 var(--r) var(--r); color: var(--on-dark); }
.nx-nav__item--drop:hover .nx-nav__drop, .nx-nav__item--drop:focus-within .nx-nav__drop, .nx-nav__item--drop.is-open .nx-nav__drop { opacity: 1; visibility: visible; transform: none; }
.nx-nav__item--drop:hover .nx-nav__caret::before, .nx-nav__item--drop.is-open .nx-nav__caret::before { transform: translateY(1px) rotate(-135deg); }
.nx-menu__group { margin: 10px 12px 2px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark-2); }
.nx-menu__panel a.nx-menu__sub { padding: 10px 12px 10px 20px; }
/* lighting hub hero photo: AI image of a 4x4 with its lights on at dusk (ai-vehicles/gen_lighting_hero.py, option 2) */
.nx-lhero__photo { margin: 0; }
.nx-lhero__photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 18px; box-shadow: 0 30px 60px rgba(0,0,0,.45); }
.nx-motion .nx-lhero__photo { animation: nx-slide-in .9s cubic-bezier(.2,.7,.2,1) both .15s; }

/* =================== wheels and tyres + parts hub, 20 Oct =================== */
.nx-lhero__photo img { aspect-ratio: 4 / 3; }
.nx-lhero:not(.nx-whero) .nx-lhero__photo img { aspect-ratio: 16 / 9; }
.nx-wserv { background: #fff; padding-block: 40px; }
.nx-wserv__list { grid-template-columns: repeat(4, minmax(0, 1fr)); border: 0; padding: 0; }
.nx-wserv__list a { display: inline-block; margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--cyan-ink); }
.nx-wheels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.nx-wheel { display: flex; flex-direction: column; border-radius: var(--r-xl); background: #fff; overflow: hidden; }
.nx-wheel__img { display: grid; place-items: center; aspect-ratio: 1; padding: 22px; border: 0; background: radial-gradient(70% 70% at 50% 50%, #fff 0, var(--stone) 78%); cursor: zoom-in; }
.nx-wheel__img img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.nx-motion .nx-wheel__img img.is-swap { animation: nx-fade .35s ease both; }
@media (hover: hover) { .nx-motion .nx-wheel__img:hover img { transform: scale(1.04) rotate(-3deg); } }
.nx-wheel__body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 18px 20px 20px; }
.nx-wheel__eyebrow { margin: 0; font-size: 12px; font-weight: 800; color: var(--cyan-ink); }
.nx-wheel__eyebrow b { padding: 1px 6px; border-radius: var(--r-sm); background: #ffc513; color: var(--ink); }
.nx-wheel__name { margin: 0; font-size: 22px; font-weight: 800; font-stretch: 110%; }
.nx-wheel__facts { margin: 0 0 6px; font-size: 14px; color: var(--muted); }
.nx-wheel .nx-opt legend { font-size: 12px; color: var(--muted); }
.nx-wheel .nx-opt__chip span { min-height: 34px; padding: 5px 10px; font-size: 13px; }
.nx-wheel__sizes { margin-top: 8px; border-top: 1px solid var(--line); }
.nx-wheel__sizes summary { cursor: pointer; padding: 10px 0; font-size: 14px; font-weight: 700; color: var(--cyan-ink); }
.nx-sizes { width: 100%; border-collapse: collapse; font-size: 13px; }
.nx-sizes th { padding: 6px 4px; border-bottom: 1px solid var(--line); text-align: left; font-size: 12px; font-weight: 700; color: var(--muted); }
.nx-sizes td { padding: 7px 4px; border-bottom: 1px solid var(--line); font-weight: 600; }
.nx-wheel__cta { margin-top: auto; align-self: flex-start; }
.nx-wheel .nx-wheel__cta { margin-top: 14px; }
.nx-wfit { display: grid; gap: 10px; margin-top: 28px; padding: 20px 22px; border-radius: var(--r-lg); background: #fff; font-size: 15px; }
.nx-wfit ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.nx-wfit li { padding: 5px 10px; border-radius: var(--r-sm); background: var(--stone); font-size: 13px; font-weight: 600; }
.nx-wfit span { color: var(--muted); }
.nx-wother { background: #fff; }
.nx-wother__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 64px; align-items: start; }
.nx-wother .nx-h2 { margin: 0 0 10px; }
.nx-brandrows, .nx-tyres { display: grid; gap: 0; margin: 20px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.nx-brandrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.nx-brandrow b, .nx-tyre b { display: block; font-size: 16px; font-weight: 800; }
.nx-brandrow span, .nx-tyre span { display: block; margin-top: 3px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.nx-brandrow .nx-btn { flex: none; min-height: 40px; padding: 7px 14px; font-size: 14px; }
.nx-tyre { padding: 16px 0; border-bottom: 1px solid var(--line); }
.nx-tyre__cta { margin-top: 8px; padding: 0; border: 0; background: none; color: var(--cyan-ink); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.nx-tyre__cta::after { content: " →"; }
.nx-tyre__cta:hover { text-decoration: underline; text-underline-offset: 3px; }
.nx-faqs__grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 32px 64px; align-items: start; }
.nx-faqs .nx-h2 { margin: 0; }
.nx-faq { border-bottom: 1px solid var(--line); }
.nx-faq:first-child { border-top: 1px solid var(--line); }
.nx-faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; cursor: pointer; list-style: none; font-size: 16px; font-weight: 700; }
.nx-faq summary::-webkit-details-marker { display: none; }
.nx-faq summary::after { content: "+"; flex: none; font-size: 22px; line-height: 1; color: var(--cyan-ink); transition: transform .2s; }
.nx-faq[open] summary::after { transform: rotate(45deg); }
.nx-faq p { margin: 0 0 18px; max-width: 62ch; font-size: 15px; line-height: 1.6; color: #33383f; }
/* parts hub */
.nx-phero .nx-cathero__h1 em { display: block; font-style: normal; color: #ffc513; }
.nx-phero .nx-lhero__actions { margin-top: 24px; }
.nx-ranges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.nx-range { display: flex; flex-direction: column; border-radius: var(--r-xl); background: #fff; color: var(--ink); text-decoration: none; overflow: hidden; transition: box-shadow .3s, transform .3s cubic-bezier(.2,.7,.2,1); }
.nx-range__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink); }
.nx-range__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.nx-range__body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 20px 22px 22px; }
.nx-range__name { font-size: 22px; font-weight: 800; font-stretch: 110%; }
.nx-range__line { font-size: 15px; line-height: 1.5; color: var(--muted); }
.nx-range__go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 14px; font-size: 15px; font-weight: 800; }
.nx-range__go::after { content: "→"; transition: transform .2s; }
@media (hover: hover) { .nx-motion .nx-range:hover { box-shadow: 0 18px 38px rgba(10,2,3,.1); transform: translateY(-3px); } .nx-range:hover .nx-range__img img { transform: scale(1.05); } .nx-range:hover .nx-range__go::after { transform: translateX(4px); } }
.nx-pother { background: #fff; }
.nx-pother .nx-acc { background: var(--stone); }
.nx-pother .nx-acc__img { background: #fff; }
.nx-acclist--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) {
  .nx-wserv__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
  .nx-wserv__list li:nth-child(3) { padding-left: 0; border-left: 0; }
  .nx-wheels, .nx-ranges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-wother__grid, .nx-faqs__grid { grid-template-columns: minmax(0, 1fr); }
  .nx-acclist--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .nx-wserv__list { grid-template-columns: minmax(0, 1fr); }
  .nx-wserv__list li { padding: 0; border-left: 0; }
  .nx-wheels, .nx-ranges, .nx-acclist--3 { grid-template-columns: minmax(0, 1fr); }
  .nx-wheel__img { aspect-ratio: 4 / 3; }
  .nx-brandrow { align-items: flex-start; flex-direction: column; }
}
@media (min-width: 1280px) { .nx-wheels { grid-template-columns: repeat(4, minmax(0, 1fr)); } .nx-wheel__body { padding: 16px 16px 18px; } .nx-wheel__name { font-size: 20px; } }

/* lighting journey, 20 Oct: finder with two selects, results pages like the lift kit vehicle pages */
.nx-finder--wide .nx-finder__row--two { grid-template-columns: repeat(2, minmax(0, 1fr)) auto; }
.nx-seg--tiles a.nx-seg__btn { color: var(--ink); text-decoration: none; }
.nx-seg--tiles a.nx-seg__btn[aria-current="page"] { background: var(--ink); color: #fff; }
.nx-seg--tiles a.nx-seg__btn[aria-current="page"] svg { background: #ffc513; stroke: var(--ink); }
.nx-seg--tiles a.nx-seg__btn[aria-current="page"] span { color: var(--on-dark); }
.nx-seg--tiles a.nx-seg__btn[aria-current="page"]::after { transform: none; }
.nx-lall { padding-top: 48px; }
.nx-lall > .nx-wrap > .nx-h2 { margin: 0 0 18px; }
.nx-lights { display: grid; gap: 14px; }
.nx-light .nx-kit__name a { color: inherit; text-decoration: none; }
.nx-light .nx-kit__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.nx-light.is-fit { border-color: #ffc513; }
.nx-light.is-fit .nx-kit__badge { background: #ffc513; border-color: #ffc513; }
.nx-kitmore__link { margin: 0; font-size: 14px; font-weight: 800; }
.nx-kitmore__link a { color: var(--cyan-ink); }
.nx-lnomatch { margin: 0 0 18px; padding: 16px 18px; border-radius: var(--r-lg); background: var(--warn-bg); color: var(--warn); font-size: 15px; }
.nx-lall .nx-series { margin-top: 40px; }
.nx-ltoolbar { flex-wrap: wrap; }
.nx-ltoolbar .nx-lchips { margin-left: 0; }
.nx-ltoolbar .nx-lchips + .nx-sortchips { margin-left: auto; }
.nx-helpcard--wide { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 24px; margin-top: 24px; }
.nx-helpcard--wide .nx-helpcard__title, .nx-helpcard--wide .nx-helpcard__text { grid-column: 1; }
.nx-helpcard--wide .nx-btn { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 1100px) { .nx-ltoolbar .nx-lchips { display: flex; order: 3; width: 100%; } .nx-ltoolbar .nx-lchips [aria-label] { flex-wrap: wrap; } }
@media (max-width: 640px) {
  .nx-finder--wide .nx-finder__row--two { grid-template-columns: 1fr; }
  .nx-ltoolbar .nx-lchips, .nx-ltoolbar .nx-sortchips { display: flex; flex-wrap: wrap; margin: 0; }
  .nx-ltoolbar { background: #fff; padding: 10px; }
  .nx-helpcard--wide { grid-template-columns: minmax(0, 1fr); }
  .nx-helpcard--wide .nx-btn { grid-column: 1; grid-row: auto; width: 100%; }
}
@media (hover: hover) { .nx-seg--tiles a.nx-seg__btn[aria-current="page"]:hover { background: var(--ink); } }
.nx-light .nx-specs__lead dd { font-size: 18px; }
[data-lfinder] { scroll-margin-top: 20px; }
.nx-catlist .nx-series .nx-lights { margin-top: 4px; }
.nx-catlist .nx-series + .nx-series { margin-top: 44px; }
@media (min-width: 641px) and (max-width: 1100px) { .nx-related .nx-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* related products on lighting product pages, 20 Oct: same treatment as the kit cards (photo in a grey box inside one white card) */
.nx-pcard { padding: 14px; box-shadow: none; border: 1.5px solid transparent; }
.nx-pcard__img { aspect-ratio: 4 / 3; padding: 12px; border-radius: var(--r); background: radial-gradient(80% 70% at 50% 55%, #fff 0, var(--stone) 72%); }
.nx-pcard__body { padding: 14px 4px 4px; }
.nx-pcard__go { color: var(--cyan-ink); }
@media (hover: hover) { .nx-motion .nx-pcard:hover { transform: none; box-shadow: none; border-color: var(--ink); } }
.nx-lshowall { margin-top: 16px; }
.nx-lnomatch { margin: 0 0 4px; }

/* lighting make pages, 20 Oct: one section per light type */
.nx-suggest .nx-seg--tiles a.nx-seg__btn { color: var(--ink); text-decoration: none; }
.nx-mksec + .nx-mksec { padding-top: 0; }
.nx-mksec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.nx-mksec__icon { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-bottom: 10px; border-radius: var(--r); background: var(--cyan-wash); }
.nx-mksec__icon svg { width: 24px; height: 24px; fill: none; stroke: var(--cyan-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nx-mksec { scroll-margin-top: 16px; }
@media (max-width: 640px) { .nx-mksec__head { flex-direction: column; align-items: flex-start; } }

/* lighting make page: behind-grille prompt until a model is picked */
.nx-mkprompt-sec { padding-bottom: 0; }
.nx-mkprompt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px 20px; padding: 20px 22px; border-radius: var(--r-xl); background: #fff; border: 1.5px dashed var(--field); }
.nx-mkprompt .nx-mksec__icon { margin: 0; }
.nx-mkprompt b { display: block; font-size: 17px; font-weight: 800; }
.nx-mkprompt span:not(.nx-mksec__icon) { display: block; margin-top: 3px; font-size: 15px; color: var(--muted); }
.nx-mkgrille { padding-bottom: 0; }
.nx-mkgrille .nx-pcard.is-fit { border-color: #ffc513; }
@media (max-width: 640px) { .nx-mkprompt { grid-template-columns: minmax(0, 1fr); } .nx-mkprompt .nx-btn { width: 100%; } }

/* =================== lighting store, 20 Oct: filter sidebar and two-row light cards, like the lift kit pages =================== */
.nx-lstore { padding-top: 48px; }
.nx-shead { margin: 0 0 18px; }
.nx-svehicle .nx-sfield { display: block; margin-top: 8px; }
.nx-svehicle select { appearance: none; width: 100%; min-height: 42px; padding: 8px 34px 8px 12px; border: 1.5px solid var(--line); border-radius: var(--r); font: inherit; font-size: 15px; color: var(--ink);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0203' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 10px center / 16px no-repeat; }
.nx-svehicle select:disabled { opacity: .55; }
.nx-svehicle select:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.nx-svehicle__note { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.nx-svehicle .nx-link-btn { margin-top: 6px; font-size: 13px; }
.nx-schips { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 14px; }
.nx-schips:empty { display: none; }
.nx-schip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 5px 12px; border: 0; border-radius: var(--r); background: var(--ink); color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.nx-schip:hover { background: var(--ink-3); }
.nx-sgrille { margin: 0 0 14px; padding: 14px 18px; border-radius: var(--r-lg); background: #fff; border: 1.5px dashed var(--field); font-size: 15px; }
.nx-sgrille .nx-link-btn { font-size: 15px; }
.nx-sgrid { display: grid; gap: 14px; }
.nx-sacc { grid-template-columns: 64px minmax(0, 1fr) auto; }
.nx-lstore .nx-light.is-fit { border-color: #ffc513; }
.nx-lstore .nx-light.is-fit .nx-kit__badge { background: #ffc513; border-color: #ffc513; }
.nx-shero__badge { display: inline-flex; margin: 0 0 14px; }
@media (max-width: 640px) { .nx-sacc { grid-template-columns: 52px minmax(0, 1fr); } .nx-sacc .nx-btn { grid-column: 1 / -1; } }
.nx-svehicle__veh { margin: 4px 0 0; font-size: 15px; font-weight: 600; color: var(--muted); }
.nx-svehicle__veh.is-set { font-weight: 800; color: var(--ink); }
.nx-svehicle__acts { display: flex; gap: 16px; margin-top: 6px; }
.nx-svehicle__acts .nx-link-btn { font-size: 14px; }
.nx-lstore { scroll-margin-top: 12px; }

/* lighting store filters as accordions, 20 Oct (Kyle: "too long, runs off the page") */
.nx-sfacet { padding: 0; border-top: 1px solid var(--line); }
.nx-sfacet:first-of-type { border-top: 0; }
.nx-svehicle + .nx-sfacet { border-top: 1px solid var(--line); }
.nx-sfacet > summary { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 4px 0; list-style: none; cursor: pointer; font-size: 15px; font-weight: 800; color: var(--ink); }
.nx-sfacet > summary::-webkit-details-marker { display: none; }
.nx-sfacet > summary::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s; }
.nx-sfacet[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.nx-sfacet__n { min-width: 20px; padding: 1px 6px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 12px; text-align: center; }
.nx-sfacet > fieldset { margin: 0 0 10px; padding: 0; border: 0; }
.nx-motion .nx-sfacet[open] > fieldset { animation: nx-drop .25s ease both; }
/* shop sidebar sticky again (Kyle, 21 Oct: "make the filter sidebar sticky"); the filters are accordions now, and if the
   sidebar is still taller than the window it scrolls inside itself rather than being cut off */
@media (min-width: 1101px) {
  .nx-lstore .nx-all__side { position: sticky; top: 20px; align-self: start; max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .nx-lstore .nx-all__side .nx-filters { position: static; }
}
.nx-svehicle__acts .nx-link-btn { white-space: nowrap; }
/* grille kit cards: the AI photo of the kit fitted and lit fills the image box */
.nx-kit__img:has(img.is-photo), .nx-pcard__img:has(img.is-photo) { padding: 0; overflow: hidden; }
.nx-kit__img img.is-photo, .nx-pcard__img img.is-photo { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; mix-blend-mode: normal; }
/* wheels and tyres split (20 Oct): hub ranges, /wheels/ quiz and vehicle pages, /tyres/ size picker */
.nx-ranges--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nx-ranges--2 .nx-range__img { aspect-ratio: 16 / 8; }
.nx-wfit li { padding: 0; background: none; }
.nx-wfit a { display: inline-block; padding: 6px 11px; border-radius: var(--r-sm); background: var(--stone); color: var(--ink); font-size: 13px; font-weight: 700; text-decoration: none; }
.nx-wfit a:hover { background: var(--ink); color: #fff; }
.nx-brandrows--3, .nx-tyres--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; }
.nx-tyres--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nx-brandrows--3 .nx-brandrow { align-items: flex-start; flex-direction: column; }
.nx-tyres--4 .nx-tyre { display: flex; flex-direction: column; }
.nx-tyres--4 .nx-tyre__cta { margin-top: auto; padding-top: 10px; align-self: flex-start; }
.nx-wheels--few { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 1280px) { .nx-wheels--few { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nx-wnext { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 28px; padding: 20px 22px; border-radius: var(--r-lg); background: #fff; }
.nx-wnext b { display: block; font-size: 17px; font-weight: 800; }
.nx-wnext span { display: block; margin-top: 2px; font-size: 15px; color: var(--muted); }
.nx-wnext .nx-btn { flex: none; }
.nx-finder__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin: 18px 0 8px; }
.nx-tpick__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 18px; }
.nx-tpick__head .nx-finder__title { margin: 0; }
.nx-tpick__unit .nx-seg__btn { min-height: 40px; padding: 6px 14px; font-size: 14px; font-variant-numeric: tabular-nums; }
.nx-tpick__unit .nx-seg__btn:first-child { border-left: 0; }
.nx-tpick__unit .nx-seg__btn[aria-pressed="true"] { background: var(--ink); color: #fff; }
.nx-tpick .nx-finder__foot { align-items: flex-start; justify-content: space-between; }
.nx-tside { max-width: 560px; }
.nx-tside summary { cursor: pointer; font-size: 15px; font-weight: 700; color: var(--cyan-ink); }
.nx-tside__body { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 12px; }
.nx-tside__svg { width: 100%; height: auto; }
.nx-tside__body p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.nx-tside__body b { color: var(--ink); }
.nx-tpick__qty { margin: 4px 0 16px; }
.nx-tpick__qty legend { margin-bottom: 8px; font-size: 14px; font-weight: 700; }
@media (max-width: 1100px) {
  .nx-brandrows--3 { grid-template-columns: minmax(0, 1fr); }
  .nx-tyres--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-wheels--few { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .nx-ranges--2, .nx-tyres--4, .nx-wheels--few { grid-template-columns: minmax(0, 1fr); }
  .nx-wnext { align-items: flex-start; flex-direction: column; }
  .nx-tpick .nx-finder__foot { flex-direction: column; gap: 14px; }
  .nx-tside__body { grid-template-columns: minmax(0, 1fr); }
  .nx-tside__svg { max-width: 220px; }
  .nx-tpick__unit { width: 100%; }
}
.nx-finder--wide[data-dest="wheels"] .nx-uses { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nx-tpick__head { flex-direction: column; justify-content: center; }
.nx-tpick__qty { text-align: center; }
.nx-tpick__qty .nx-opt__chips { justify-content: center; }
@media (max-width: 760px) { .nx-finder--wide[data-dest="wheels"] .nx-uses { grid-template-columns: minmax(0, 1fr); } }
/* wheel and tyre shop cards (20 Oct): 3 per row (2 on a phone), all one size, tight. Kyle: "a bit tighter. nest more
   stuff that is less important behind the popup". Card = photo, brand, design, finish, Enquire + Details. */
.nx-wheels--shop { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 14px; }
.nx-wheel--card { position: relative; height: 100%; border-radius: var(--r-lg); background: #fff; }
.nx-wheel--card .nx-wheel__img { flex: none; aspect-ratio: 5 / 4; padding: 10px 10px 0; background: #fff; }
.nx-wheel--card .nx-wheel__img img { width: 100%; height: 100%; object-fit: contain; }
.nx-wheel--card .nx-wheel__body { display: flex; flex-direction: column; flex: 1; gap: 2px; min-height: 0; padding: 8px 14px 14px; }
.nx-wheel--card .nx-wheel__eyebrow { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; }
.nx-wheel--card .nx-wheel__eyebrow span { color: var(--muted); font-weight: 600; }
.nx-wheel--card .nx-wheel__name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 17px; }
.nx-wheel__finish { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--cyan-ink); }
.nx-wheel__foot { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 10px; }
.nx-wheel--card .nx-wheel__cta { flex: 1; justify-content: center; min-height: 40px; margin: 0; padding: 8px 12px; font-size: 15px; }
.nx-wheel__more { flex: none; padding: 0; border: 0; background: none; color: var(--cyan-ink); font: inherit; font-size: 14px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.nx-wheel__more:hover { color: var(--ink); }
.nx-wheel.is-fit { box-shadow: 0 0 0 2px var(--cyan); }
.nx-wheel__fitbadge { position: absolute; top: 10px; left: 10px; padding: 3px 8px; border-radius: var(--r-sm); background: var(--cyan); color: var(--ink); font-size: 12px; font-weight: 800; }
.nx-snote { margin: 0 0 14px; padding: 12px 16px; border-radius: var(--r); background: #fff; font-size: 15px; }
.nx-wloaded--next { padding-top: 0; }
/* Details pop-up */
.nx-details { width: min(520px, calc(100vw - 32px)); padding: 24px 24px 22px; }
.nx-details .nx-form__title { margin: 0 0 12px; padding-right: 36px; font-size: 20px; }
.nx-details__facts { display: grid; gap: 6px; margin: 0 0 14px; padding: 0 0 0 18px; font-size: 15px; line-height: 1.45; }
.nx-details__h { margin: 4px 0 6px; font-size: 15px; font-weight: 800; }
.nx-details .nx-sizes { width: 100%; font-size: 14px; }
.nx-details__note { margin: 12px 0 16px; font-size: 14px; color: var(--muted); }
@media (max-width: 640px) {
  .nx-wheels--shop { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .nx-wheel--card .nx-wheel__body { padding: 6px 10px 10px; }
  .nx-wheel--card .nx-wheel__name { font-size: 15px; }
  .nx-wheel__finish { font-size: 13px; }
  .nx-wheel__foot { gap: 8px; }
  .nx-wheel--card .nx-wheel__cta { min-height: 38px; padding: 6px 8px; font-size: 14px; }
  .nx-wheel__more { font-size: 13px; }
  .nx-details { padding: 20px 16px 18px; }
}
/* close buttons (Kyle, 20 Oct: "close button is off align"): the × glyph sat off-centre in the circle, so draw the cross with two bars */
.nx-lightbox__close, .nx-form__close { display: grid; place-items: center; padding: 0; font-size: 0; line-height: 0; }
.nx-lightbox__close::before, .nx-lightbox__close::after, .nx-form__close::before, .nx-form__close::after { content: ""; grid-area: 1 / 1; width: 20px; height: 2.5px; border-radius: 2px; background: currentColor; transform: rotate(45deg); }
.nx-lightbox__close::after, .nx-form__close::after { transform: rotate(-45deg); }
.nx-form__close::before, .nx-form__close::after { width: 18px; }
/* brand logo on shop cards (20 Oct); brands without a logo show the name in the same slot */
.nx-wheel__brand { display: flex; align-items: center; gap: 8px; height: 30px; margin: 0 0 4px; overflow: hidden; }
.nx-wheel__logo { display: block; width: auto; height: auto; max-height: 26px; max-width: 104px; }
.nx-wheel__logo--loaded, .nx-wheel__logo--gecko, .nx-wheel__logo--venom { max-height: 30px; }
.nx-wheel__logo--maxtrek { max-width: 92px; }
.nx-wheel__brandname { font-size: 13px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.nx-wheel__new { padding: 2px 7px; border-radius: var(--r-sm); background: #ffc513; font-size: 11px; font-weight: 800; }
.nx-wheel__cat { overflow: hidden; margin-left: auto; font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
@media (max-width: 640px) { .nx-wheel__brand { height: 26px; } .nx-wheel__logo { max-height: 22px; max-width: 80px; } .nx-wheel__logo--loaded, .nx-wheel__logo--gecko, .nx-wheel__logo--venom { max-height: 26px; } .nx-wheel__cat { font-size: 11px; } }
.nx-lightbox__close, .nx-form__close { place-content: center; }
.nx-wheel__logo--ssw, .nx-wheel__logo--new-power, .nx-wheel__logo--rydanz { max-width: 96px; }
.nx-tpick__done { justify-content: center; }
@media (max-width: 640px) { .nx-tpick__done { gap: 14px 28px; } .nx-tpick__done .nx-btn { width: 100%; justify-content: center; } }
/* brand, terrain and Loaded design pages (21 Oct) */
.nx-linkset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.nx-linkset .nx-wfit { margin-top: 0; align-content: start; }
.nx-wfit a[aria-current] { background: var(--ink); color: #fff; }
.nx-wfit--plain { padding: 0; background: none; margin-top: 6px; }
.nx-dhero__photo { display: grid; place-items: center; border-radius: var(--r-xl); background: #fff; }
.nx-dhero__photo img { width: min(100%, 460px); height: auto; aspect-ratio: 1; object-fit: contain; padding: 24px; }
.nx-dspec { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px 56px; align-items: start; }
.nx-dspec .nx-sizes { width: 100%; margin-top: 12px; }
.nx-dspec .nx-h2 { margin: 0 0 10px; }
@media (max-width: 900px) { .nx-linkset, .nx-dspec { grid-template-columns: minmax(0, 1fr); } }
.nx-wheel__name a { color: inherit; text-decoration: none; }
.nx-wheel__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.nx-dhero__photo { box-shadow: none; padding: 0; }
.nx-dhero__photo img { box-shadow: none; border-radius: 0; background: none; }
/* tyre Details: sizes grouped by rim (21 Oct) */
.nx-details__desc { margin: 0 0 12px; font-size: 15px; line-height: 1.55; color: #33383f; }
.nx-tsizes { display: grid; gap: 8px; margin: 6px 0 4px; }
.nx-tsizes__row { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; align-items: start; }
.nx-tsizes__row b { padding-top: 3px; font-size: 14px; }
.nx-tsizes__row span { display: flex; flex-wrap: wrap; gap: 5px; }
.nx-tsizes__row i { padding: 3px 7px; border-radius: var(--r-sm); background: var(--stone); font-size: 13px; font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; }
.nx-details { max-height: calc(100dvh - 32px); overflow: auto; }
/* tyre page size picker (21 Oct) */
.nx-tpage__pick { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-top: 22px; }
.nx-tpage__pick .nx-field { display: grid; gap: 6px; margin: 0; min-width: 220px; color: #fff; font-size: 14px; font-weight: 700; }
.nx-tpage__pick select { min-height: 52px; padding: 0 14px; border-radius: var(--r); border: 0; font: inherit; font-size: 16px; font-weight: 600; color: var(--ink); background: #fff; }
@media (max-width: 640px) { .nx-tpage__pick { display: grid; } .nx-tpage__pick .nx-field { min-width: 0; } }
/* winch and UHF ranges (21 Oct) */
.nx-finder--wide.nx-rquiz .nx-uses { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .nx-finder--wide.nx-rquiz .nx-uses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nx-dpick { display: grid; gap: 14px; margin-top: 18px; }
.nx-opt--dark legend { color: #fff; margin-bottom: 6px; font-size: 14px; font-weight: 700; }
.nx-opt--dark .nx-opt__chip span { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.25); }
.nx-opt--dark .nx-opt__chip input:checked + span { background: #fff; color: var(--ink); border-color: #fff; }
.nx-dgallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-top: 18px; }
.nx-dgallery__shot { padding: 6px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; cursor: zoom-in; }
.nx-dgallery__shot img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.nx-dtext p { margin: 12px 0 0; max-width: 62ch; font-size: 15px; line-height: 1.6; color: #33383f; }
.nx-wheels--range .nx-wheel__finish { color: var(--ink); font-weight: 600; }

/* images can't be dragged out of the page (Kyle, 21 Oct) */
img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
/* winches: supplied and fitted (21 Oct) */
.nx-finder[data-dest="winches"] .nx-uses { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nx-finder[data-dest="winches"] [data-panel="weight"] .nx-uses { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .nx-finder[data-dest="winches"] .nx-uses, .nx-finder[data-dest="winches"] [data-panel="weight"] .nx-uses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nx-wfinder__other { margin: 14px 0 0; text-align: center; }
.nx-wfinder__other a { color: var(--cyan-ink); font-weight: 700; }
.nx-winc { background: #fff; }
.nx-winc__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 56px; align-items: center; }
.nx-winc__list { display: grid; gap: 12px; margin: 18px 0 24px; padding: 0; list-style: none; }
.nx-winc__list li { display: grid; gap: 2px; padding-left: 26px; position: relative; }
.nx-winc__list li::before { content: ""; position: absolute; left: 0; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--cyan); }
.nx-winc__list b { font-size: 16px; }
.nx-winc__list span { font-size: 15px; color: var(--muted); }
.nx-winc__photo { margin: 0; }
.nx-winc__photo img { width: 100%; height: auto; border-radius: var(--r-xl); }
.nx-winc__photo figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); }
@media (max-width: 900px) { .nx-winc__grid { grid-template-columns: minmax(0, 1fr); } }
.nx-finder[data-dest="winches"] .nx-steps { grid-template-columns: repeat(4, 1fr); max-width: 720px; }
/* UHF fitted package (21 Oct) */
.nx-finder[data-dest="uhf"] .nx-uses { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nx-finder[data-dest="uhf"] .nx-steps { grid-template-columns: repeat(4, 1fr); max-width: 720px; }
@media (max-width: 760px) { .nx-finder[data-dest="uhf"] .nx-uses { grid-template-columns: minmax(0, 1fr); } }
.nx-upack { display: grid; gap: 10px; max-width: 620px; margin: 6px auto 18px; padding: 0; list-style: none; text-align: left; }
.nx-upack li { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 12px; padding: 12px 14px; border-radius: var(--r); background: var(--stone); font-size: 15px; }
.nx-upack b { font-weight: 800; }
.nx-upack a { color: var(--cyan-ink); font-weight: 700; }
@media (max-width: 640px) { .nx-upack li { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
/* parts hub: 5 ranges as 3 + 2, the bottom two wider so nothing sits alone (21 Oct) */
@media (min-width: 1101px) {
  .nx-ranges--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .nx-ranges--5 .nx-range { grid-column: span 2; }
  .nx-ranges--5 .nx-range:nth-child(n+4) { grid-column: span 3; }
  .nx-ranges--5 .nx-range:nth-child(n+4) .nx-range__img { aspect-ratio: 16 / 7.4; }
}