/* ==========================================================================
   Nelix design system — global primitives.

   Built entirely on nx-tokens.css. Loaded after nx-legacy.css so it wins
   wherever the two overlap.

   Contents
     01  Page shell atmosphere + global reset
     02  Typography
     03  Layout: container, section shell, grids, splits
     04  Decorative layers: grid field, local glow, rules
     05  Eyebrow, section head, prose
     06  Buttons + links
     07  Panels, feature rows, stats, spec tables, pills
     08  Accordion
     09  Diagram primitives + figures
     10  Header, mega menu, mobile drawer
     11  Footer
     12  Reveal / motion utilities
     13  Utilities
   ========================================================================== */

/* ------------------------------------------------ 01 page shell atmosphere */

/* The whole document sits on one continuous vertical atmosphere: almost-black
   at the top, deep navy through the middle, soft blue illumination toward the
   bottom. Sections never paint a competing flat colour on top of it. */
html {
  background: var(--nx-void);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body.nx-shell {
  background:
    radial-gradient(120% 80% at 50% 120%, var(--nx-glow-a18) 0%, transparent 62%),
    radial-gradient(80% 50% at 15% 0%, var(--nx-glow-a06) 0%, transparent 55%),
    linear-gradient(
      180deg,
      var(--nx-void) 0%,
      var(--nx-abyss) 38%,
      var(--nx-navy-deep) 100%
    );
  background-attachment: scroll;
  color: var(--nx-text-body);
  font-family: var(--nx-font);
  font-size: var(--nx-fs-body);
  line-height: var(--nx-lh-body);
  overflow-x: hidden;
}

.nx-scope {
  background: transparent;
  color: var(--nx-text-body);
  font-family: var(--nx-font);
  font-size: var(--nx-fs-body);
  line-height: var(--nx-lh-body);
  font-optical-sizing: auto;
  font-feature-settings: "cv05" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.nx-scope *,
.nx-scope *::before,
.nx-scope *::after {
  box-sizing: border-box;
}

/* :where() so this is a true default at zero specificity. As a plain
   descendant selector it scored 0,1,1 and quietly beat every single-class
   component rule, so a cover image asking for height:100% got height:auto
   and fell back to its intrinsic ratio. Components should not have to
   out-specify the reset to size their own media. */
:where(.nx-scope) :where(img, svg, video) {
  max-width: 100%;
  height: auto;
}

/* ---- element normalisation (replaces Bootstrap's Reboot layer) -------------

   nx-legacy.css already zeroes margin/padding and sets border-box on `*`, but
   the universal selector loses to an element selector, so Bootstrap's Reboot
   was quietly supplying a handful of element defaults underneath the whole
   site. These are the ones the pages actually depended on; anything Reboot set
   that nothing here relies on is deliberately not reproduced. See P1-6. */

/* Form controls inherit the UA font, not Inter, unless told otherwise — the
   single most visible thing Reboot was doing for us. */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

button:not(:disabled),
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled),
[role="button"] {
  cursor: pointer;
}

textarea {
  resize: vertical;
}

fieldset {
  min-width: 0;
}

label {
  display: inline-block;
}

summary {
  display: list-item;
  cursor: pointer;
}

img,
svg {
  vertical-align: middle;
}

table {
  border-collapse: collapse;
  caption-side: bottom;
}

th {
  text-align: inherit;
}

/* Cell borders inherit the table's colour rather than falling back to the
   cell's own text colour, which is what Reboot did and what the spec tables
   on the product pages assume. */
thead,
tbody,
tfoot,
tr,
td,
th {
  border-color: inherit;
  border-style: solid;
  border-width: 0;
}

/* Block rhythm. nx-legacy.css zeroes every margin through `*`, which an element
   selector outranks, so Reboot was the thing actually spacing any list,
   paragraph or heading that no component rule had claimed — the footer address
   and the diagram legends among them. Reboot's font-size scale is deliberately
   not reproduced: that part is Bootstrap's look, and every heading on the site
   is sized by a component rule. */
ol,
ul {
  padding-left: 2rem;
}

ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}

dd {
  margin-bottom: 0.5rem;
  margin-left: 0;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}

figure,
blockquote,
pre {
  margin: 0 0 1rem;
}

[hidden] {
  display: none !important;
}

/* P2-11: the UA default for <b>/<strong> is 700, and Bootstrap's `bolder`
   resolved to the same. The contract caps weight at 600. */
b,
strong {
  font-weight: 500;
}

/* ---- inline SVG icons -----------------------------------------------------

   Drawn on a 24x24 grid in `currentColor`, so an icon takes the colour and the
   size of whatever text it sits beside. The baseline nudge matches what the
   Font Awesome glyphs did, so swapping them in shifts nothing. The svg carries
   its own width/height attributes so callers can ask for a pixel size; nothing
   here overrides them. */
.nx-i {
  display: inline-block;
  flex: none;
  vertical-align: -0.125em;
  overflow: visible;
}

.nx-i--spin {
  animation: nx-i-spin 0.9s linear infinite;
  transform-origin: 50% 50%;
}

@keyframes nx-i-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nx-i--spin {
    animation: none;
  }
}

/* Focus is always visible and always azure. */
.nx-scope :focus-visible,
.nx-header :focus-visible,
.nx-drawer :focus-visible,
.nx-footer2 :focus-visible {
  outline: 2px solid var(--nx-azure);
  outline-offset: 3px;
  border-radius: var(--nx-radius-xs);
}

.nx-skip-link {
  position: absolute;
  left: var(--nx-gutter);
  top: var(--nx-space-4);
  z-index: calc(var(--nx-z-header) + 10);
  padding: var(--nx-space-3) var(--nx-space-5);
  background: var(--nx-azure);
  color: var(--nx-azure-ink);
  font-weight: 500;
  font-size: var(--nx-fs-caption);
  border-radius: var(--nx-radius-xs);
  transform: translateY(-220%);
  transition: transform var(--nx-dur-fast) var(--nx-ease-out);
}

.nx-skip-link:focus {
  transform: translateY(0);
}

.nx-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .nx-scope *,
  .nx-header *,
  .nx-drawer *,
  .nx-footer2 * {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }

  .nx-reveal,
  [data-nx-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------------------------------------------------------- 02 typography */

/* The in-scope heading default. :where() keeps it at zero specificity for the
   same reason the bare-element rules in nx-legacy.css are wrapped: it is a
   default, and a component class must be able to state its own weight and
   colour without escalating. It still beats the legacy default because this
   sheet loads after that one, so bare headings inside `main` are unchanged. */
:where(.nx-scope) :where(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  font-family: var(--nx-font);
  font-weight: 500;
  color: var(--nx-text);
  text-wrap: balance;
}

:where(.nx-scope) :where(p) {
  margin: 0;
}

.nx-display {
  font-size: var(--nx-fs-display);
  font-weight: 500;
  line-height: var(--nx-lh-display);
  letter-spacing: var(--nx-tracking-display);
  color: var(--nx-text);
}

.nx-h1 {
  font-size: var(--nx-fs-h1);
  font-weight: 500;
  line-height: var(--nx-lh-heading);
  letter-spacing: var(--nx-tracking-display);
}

/* Measured weights: h2 400, h3 300, h4 500. Nothing on arm.com's content
   type exceeds 500. */
.nx-h2 {
  font-size: var(--nx-fs-h2);
  font-weight: var(--nx-fw-regular);
  line-height: var(--nx-lh-heading);
  letter-spacing: var(--nx-tracking-heading);
}

.nx-h3 {
  font-size: var(--nx-fs-h3);
  font-weight: var(--nx-fw-light);
  line-height: var(--nx-lh-h3);
  letter-spacing: var(--nx-tracking-heading);
}

.nx-h4 {
  font-size: var(--nx-fs-h4);
  font-weight: var(--nx-fw-medium);
  line-height: var(--nx-lh-heading);
  letter-spacing: var(--nx-tracking-heading);
}

.nx-h5 {
  font-size: var(--nx-fs-body);
  font-weight: 500;
  line-height: var(--nx-lh-heading);
}

.nx-lede {
  font-size: var(--nx-fs-lead);
  font-weight: 400;
  line-height: var(--nx-lh-body);
  color: var(--nx-text-muted);
  max-width: 54ch;
  text-wrap: pretty;
}

.nx-body {
  font-size: var(--nx-fs-body);
  line-height: var(--nx-lh-body);
  color: var(--nx-text-body);
  max-width: 62ch;
  text-wrap: pretty;
}

.nx-small,
.nx-caption {
  font-size: var(--nx-fs-caption);
  line-height: 1.55;
  color: var(--nx-text-muted);
}

/* One family site-wide; the "mono" role survives only as tabular figures. */
.nx-mono {
  font-family: var(--nx-font);
  font-size: var(--nx-fs-caption);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--nx-text-faint);
}

/* --------------------------------------------------------------- 03 layout */

.nx-container {
  width: 100%;
  max-width: calc(var(--nx-container) + var(--nx-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--nx-gutter);
}

.nx-container--wide {
  max-width: calc(var(--nx-container-wide) + var(--nx-gutter) * 2);
}

.nx-container--text,
.nx-container--tight {
  max-width: calc(var(--nx-container-tight) + var(--nx-gutter) * 2);
}

/* Sections are transparent by default so the page atmosphere reads as one
   continuous gradient. Tone modifiers add a translucent lift, never an
   opaque fill. */
.nx-section {
  position: relative;
  background: transparent;
  color: var(--nx-text-body);
  padding-block: var(--nx-space-section);
  padding-inline: 0;
  border: 0;
  isolation: isolate;
}

.nx-section--sm {
  padding-block: var(--nx-section-y-sm);
}

.nx-section--lg {
  padding-block: var(--nx-section-y-lg);
}

.nx-section--flush-top {
  padding-block-start: 0;
}

.nx-section--flush-bottom {
  padding-block-end: 0;
}

.nx-section--raised::before,
.nx-section--sunken::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

/* Arm bands are flat fills with a hard edge, not faded gradients, so both
   tones resolve to a single step off the ink rather than a soft wash. The
   rgba() navies that used to be written here were the retired surface ramp
   and were the last two literals in this sheet holding the old palette. */
.nx-section--raised::before {
  background: var(--nx-navy-lift);
}

.nx-section--sunken::before {
  background: var(--nx-void);
}

/* Hairline between consecutive bands, faded at both ends. */
.nx-section--ruled::after {
  content: "";
  position: absolute;
  inset-inline: var(--nx-gutter);
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--nx-line-strong) 20%,
    var(--nx-line-strong) 80%,
    transparent
  );
  pointer-events: none;
}

.nx-grid {
  display: grid;
  gap: clamp(var(--nx-space-5), 2.4vw, var(--nx-space-10));
}

/* The pre-redesign stylesheet paints a die-grid backdrop through .nx-grid::after
   and an arrow glyph through .nx-btn::after. Both are still loaded for the inner
   pages, so the new primitives opt out explicitly. */
.nx-grid::after {
  content: none;
}

.nx-grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

/* Never more than three across on desktop. */
.nx-grid--3,
.nx-grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

@media (min-width: 64rem) {
  .nx-grid--3,
  .nx-grid--4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Asymmetric splits — 5/7 and 7/5, never 50/50. */
.nx-split {
  display: grid;
  gap: clamp(var(--nx-space-8), 5vw, var(--nx-space-24));
  align-items: start;
}

@media (min-width: 60rem) {
  .nx-split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .nx-split--narrow-right {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .nx-split--centred {
    align-items: center;
  }
}

.nx-stack {
  display: flex;
  flex-direction: column;
  gap: var(--nx-space-4);
}

.nx-stack--sm { gap: var(--nx-space-2); }
.nx-stack--lg { gap: var(--nx-space-6); }
.nx-stack--xl { gap: var(--nx-space-10); }

.nx-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nx-space-4);
}

/* --------------------------------------------------- 04 decorative layers */

/* Barely-there technical grid. It reads as texture, not as a pattern. */
.nx-bg-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(var(--nx-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--nx-grid-line) 1px, transparent 1px);
  background-size: 96px 96px;
  -webkit-mask-image: radial-gradient(ellipse 80% 65% at 50% 45%, #000 10%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 65% at 50% 45%, #000 10%, transparent 100%);
  pointer-events: none;
}

.nx-bg-grid--fine::before {
  background-size: 44px 44px;
}

/* Local atmospheric bloom. Adds to the page shell rather than replacing it. */
.nx-bg-glow::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline: 0;
  top: -20%;
  height: 140%;
  background: radial-gradient(
    ellipse 60% 50% at 50% 45%,
    var(--nx-glow-a10) 0%,
    transparent 68%
  );
  pointer-events: none;
}

.nx-rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--nx-line-strong) 18%,
    var(--nx-line-strong) 82%,
    transparent
  );
}

/* ------------------------------------------------ 05 eyebrow, head, prose */

.nx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--nx-space-3);
  font-family: var(--nx-font);
  font-size: var(--nx-fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--nx-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--nx-azure-soft);
}

.nx-eyebrow::before {
  content: "";
  width: 2rem;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
  flex: none;
}

.nx-eyebrow--plain::before {
  display: none;
}

.nx-sechead {
  display: flex;
  flex-direction: column;
  gap: var(--nx-space-5);
  max-width: 44rem;
  margin-block-end: clamp(var(--nx-space-10), 5vw, var(--nx-space-20));
}

.nx-sechead--centred {
  align-items: center;
  text-align: center;
  margin-inline: auto;
}

.nx-sechead--centred .nx-lede {
  margin-inline: auto;
}

.nx-sechead--wide {
  max-width: 52rem;
}

.nx-prose {
  color: var(--nx-text-body);
  font-size: var(--nx-fs-body);
  line-height: var(--nx-lh-body);
  max-width: 62ch;
}

.nx-prose > * + * {
  margin-block-start: var(--nx-space-5);
}

.nx-prose h2 {
  font-size: var(--nx-fs-h2);
  color: var(--nx-text);
  margin-block-start: var(--nx-space-12);
}

.nx-prose h3 {
  font-size: var(--nx-fs-h3);
  color: var(--nx-text);
  margin-block-start: var(--nx-space-10);
}

.nx-prose ul,
.nx-prose ol {
  padding-inline-start: var(--nx-space-6);
}

.nx-prose li + li {
  margin-block-start: var(--nx-space-2);
}

.nx-prose a {
  color: var(--nx-azure-soft);
  text-underline-offset: 0.2em;
}

.nx-prose strong {
  color: var(--nx-text);
  font-weight: 500;
}

/* -------------------------------------------------------------- 06 buttons */

.nx-btn {
  --_bg: transparent;
  --_fg: var(--nx-text);
  --_bd: var(--nx-line-strong);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nx-space-3);
  /* Measured on arm.com: 48px tall, 0 20px padding, 40px pill radius,
     16px/400 label with 0.36px tracking. Weight 550 and the -0.005em
     tracking belonged to the retired scale. */
  padding: 0 var(--nx-sp-20);
  min-height: 48px;
  border: 1px solid var(--_bd);
  border-radius: var(--nx-radius-btn);
  background: var(--_bg);
  color: var(--_fg);
  font-family: var(--nx-font);
  font-size: var(--nx-fs-btn);
  font-weight: var(--nx-fw-regular);
  letter-spacing: var(--nx-tracking-cta);
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--nx-dur-fast) var(--nx-ease),
    border-color var(--nx-dur-fast) var(--nx-ease),
    color var(--nx-dur-fast) var(--nx-ease),
    box-shadow var(--nx-dur) var(--nx-ease),
    transform var(--nx-dur-fast) var(--nx-ease);
}

.nx-btn::after {
  content: none;
}

/* Arm's buttons do not lift, scale or shadow on hover; they change fill and
   nothing else. The translate is gone rather than shortened. */
.nx-btn:hover {
  transform: none;
}

.nx-btn__arrow {
  transition: transform var(--nx-dur) var(--nx-ease-out);
  flex: none;
}

.nx-btn:hover .nx-btn__arrow {
  transform: translateX(4px);
}

/* Violet fill, white label: 5.94:1. */
.nx-btn--primary {
  --_bg: var(--nx-azure-deep);
  --_fg: #ffffff;
  --_bd: var(--nx-azure-deep);
  font-weight: var(--nx-fw-regular);
}

.nx-btn--primary:hover {
  --_bg: color-mix(in srgb, var(--nx-azure-deep) 84%, #ffffff);
  --_bd: color-mix(in srgb, var(--nx-azure-deep) 84%, #ffffff);
}

.nx-btn--secondary {
  --_bg: transparent;
  --_fg: var(--nx-text);
  --_bd: var(--nx-line-strong);
}

.nx-btn--secondary:hover {
  --_bg: var(--nx-glow-a06);
  --_bd: var(--nx-line-accent);
  --_fg: var(--nx-azure-soft);
}

.nx-btn--ghost {
  --_bd: transparent;
  --_fg: var(--nx-text-muted);
  padding-inline: var(--nx-space-3);
}

.nx-btn--ghost:hover {
  --_fg: var(--nx-text);
  --_bg: rgba(255, 255, 255, 0.04);
}

/* Arm renders one button height. The size modifiers survive because a lot
   of templates name them, but they resolve to the measured geometry rather
   than inventing a second and third scale. */
.nx-btn--sm {
  min-height: 39px;
  padding: 0 var(--nx-gap-16);
  font-size: var(--nx-fs-eyebrow);
}

.nx-btn--lg {
  min-height: 48px;
  padding: 0 var(--nx-sp-20);
  font-size: var(--nx-fs-btn);
}

.nx-btn--block {
  width: 100%;
}

.nx-link {
  display: inline-flex;
  align-items: center;
  gap: var(--nx-space-2);
  color: var(--nx-azure-soft);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  position: relative;
}

.nx-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--nx-dur) var(--nx-ease-out);
}

.nx-link:hover::after {
  transform: scaleX(1);
}

.nx-link svg {
  transition: transform var(--nx-dur) var(--nx-ease-out);
}

.nx-link:hover svg {
  transform: translateX(4px);
}

/* -------------------------------- 07 panels, rows, stats, tables, pills */

.nx-panel {
  position: relative;
  background: linear-gradient(
    160deg,
    rgba(33, 27, 59, 0.5) 0%,
    rgba(13, 7, 48, 0.44) 100%
  );
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius);
  padding: clamp(var(--nx-space-6), 2.4vw, var(--nx-space-10));
  transition: border-color var(--nx-dur) var(--nx-ease),
    background var(--nx-dur) var(--nx-ease),
    transform var(--nx-dur) var(--nx-ease);
}

.nx-panel--ticked::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 14px;
  height: 14px;
  border: 1px solid var(--nx-line-accent);
  border-width: 1px 0 0 1px;
  border-radius: var(--nx-radius) 0 0 0;
  transition: border-color var(--nx-dur) var(--nx-ease);
  pointer-events: none;
}

.nx-panel--interactive {
  cursor: pointer;
}

.nx-panel--interactive:hover,
a.nx-panel:hover {
  border-color: var(--nx-line-accent);
  transform: translateY(-3px);
}

.nx-panel--interactive:hover::before,
a.nx-panel:hover::before {
  border-color: var(--nx-azure);
}

a.nx-panel {
  display: block;
  text-decoration: none;
  color: inherit;
}

.nx-panel--note {
  background: transparent;
  border-color: transparent;
  border-inline-start: 1px solid var(--nx-line-accent);
  border-radius: 0;
  padding-block: var(--nx-space-1);
  padding-inline: var(--nx-space-6) 0;
  max-width: 62ch;
}

.nx-panel--glass {
  background: rgba(13, 7, 48, 0.6);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.nx-panel__index {
  font-size: var(--nx-fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--nx-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--nx-text-faint);
  font-variant-numeric: tabular-nums;
}

.nx-panel__title {
  font-size: var(--nx-fs-h3);
  font-weight: 500;
  line-height: var(--nx-lh-heading);
  letter-spacing: var(--nx-tracking-heading);
  color: var(--nx-text);
}

.nx-panel__body {
  font-size: 0.9375rem;
  line-height: var(--nx-lh-body);
  color: var(--nx-text-muted);
}

.nx-featurerow {
  display: grid;
  gap: var(--nx-space-4) var(--nx-space-10);
  padding-block: var(--nx-space-10);
  border-block-start: 1px solid var(--nx-line);
}

.nx-featurerow:last-child {
  border-block-end: 1px solid var(--nx-line);
}

@media (min-width: 48rem) {
  .nx-featurerow {
    grid-template-columns: 4rem minmax(0, 18rem) minmax(0, 1fr);
    align-items: start;
  }
}

.nx-featurerow__num {
  font-size: var(--nx-fs-eyebrow);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--nx-tracking-eyebrow);
  color: var(--nx-azure);
  padding-block-start: 0.55em;
}

.nx-featurerow__title {
  font-size: var(--nx-fs-h3);
  font-weight: 500;
  letter-spacing: var(--nx-tracking-heading);
  color: var(--nx-text);
}

.nx-featurerow__body {
  font-size: var(--nx-fs-body);
  line-height: var(--nx-lh-body);
  color: var(--nx-text-muted);
  max-width: 62ch;
}

.nx-stats {
  display: grid;
  gap: 1px;
  background: var(--nx-line);
  border-block: 1px solid var(--nx-line);
  border-inline: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

.nx-stat {
  background: rgba(8, 2, 37, 0.55);
  border: 0;
  padding: var(--nx-space-8) var(--nx-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--nx-space-3);
}

.nx-stat__value {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--nx-tracking-display);
  color: var(--nx-text);
  font-variant-numeric: tabular-nums;
}

.nx-stat__value em {
  font-style: normal;
  color: var(--nx-azure);
}

.nx-stat__label {
  font-size: var(--nx-fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--nx-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--nx-text-faint);
}

.nx-stat__note {
  font-size: var(--nx-fs-caption);
  color: var(--nx-text-muted);
}

.nx-spec {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  text-align: left;
}

.nx-spec caption {
  text-align: left;
  font-size: var(--nx-fs-eyebrow);
  letter-spacing: var(--nx-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--nx-text-faint);
  padding-block-end: var(--nx-space-4);
}

.nx-spec th,
.nx-spec td {
  padding: var(--nx-space-4);
  border-block-start: 1px solid var(--nx-line);
  vertical-align: top;
}

.nx-spec th {
  font-weight: 500;
  color: var(--nx-text-muted);
  width: 40%;
}

.nx-spec td {
  color: var(--nx-text);
  font-size: var(--nx-fs-caption);
  font-variant-numeric: tabular-nums;
  line-height: var(--nx-lh-body);
}

.nx-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--nx-space-2);
  padding: 0.3rem var(--nx-space-3);
  border: 1px solid var(--nx-line-strong);
  border-radius: var(--nx-radius-pill);
  font-size: var(--nx-fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nx-text-muted);
  white-space: nowrap;
}

.nx-pill::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.nx-pill--active {
  color: var(--nx-status-active);
  border-color: var(--nx-line-accent);
}

.nx-pill--progress {
  color: var(--nx-status-hold);
  border-color: color-mix(in srgb, var(--nx-status-hold) 28%, transparent);
}

.nx-pill--planned {
  color: var(--nx-text-faint);
}

.nx-pill--done {
  color: var(--nx-status-done);
  border-color: color-mix(in srgb, var(--nx-status-done) 28%, transparent);
}

.nx-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--nx-space-3);
}

.nx-checklist li {
  display: grid;
  grid-template-columns: 1rem 1fr;
  gap: var(--nx-space-3);
  font-size: 0.9375rem;
  line-height: var(--nx-lh-body);
  color: var(--nx-text-muted);
}

.nx-checklist li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 0.6em;
  border: 1px solid var(--nx-azure);
  transform: rotate(45deg);
}

/* ------------------------------------------------------------ 08 accordion */

.nx-accordion {
  border-block-start: 1px solid var(--nx-line);
}

.nx-accordion__item {
  border-block-end: 1px solid var(--nx-line);
}

.nx-accordion__trigger {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nx-space-5);
  width: 100%;
  min-height: 44px;
  padding-block: var(--nx-space-5);
  cursor: pointer;
  font-family: var(--nx-font);
  font-size: var(--nx-fs-h3);
  font-weight: 500;
  letter-spacing: var(--nx-tracking-heading);
  color: var(--nx-text);
  transition: color var(--nx-dur-fast) var(--nx-ease);
}

.nx-accordion__trigger:hover {
  color: var(--nx-azure-soft);
}

.nx-accordion__icon {
  position: relative;
  width: 14px;
  height: 14px;
  flex: none;
}

.nx-accordion__icon::before,
.nx-accordion__icon::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: currentColor;
  transition: transform var(--nx-dur) var(--nx-ease);
}

.nx-accordion__icon::after {
  transform: rotate(90deg);
}

.nx-accordion__trigger[aria-expanded="true"] .nx-accordion__icon::after,
.nx-drawer__trigger[aria-expanded="true"] .nx-accordion__icon::after {
  transform: rotate(0deg);
}

/* The 0fr -> 1fr grid trick is the usual way to ease to an auto height, but it
   forces layout on every frame, which contract §5 rules out along with height.
   The row change is instant and the eased part is opacity + transform on the
   content, which composites. */
.nx-accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
}

.nx-accordion__panel[data-open="true"] {
  grid-template-rows: 1fr;
}

.nx-accordion__panel > div {
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity var(--nx-dur) var(--nx-ease),
    transform var(--nx-dur) var(--nx-ease);
}

.nx-accordion__panel[data-open="true"] > div {
  opacity: 1;
  transform: translateY(0);
}

.nx-accordion__body {
  padding-block-end: var(--nx-space-6);
  max-width: 62ch;
  font-size: var(--nx-fs-body);
  line-height: var(--nx-lh-body);
  color: var(--nx-text-muted);
}

/* ----------------------------------------------------------- 09 diagrams */

.nx-stack-diagram {
  display: grid;
  gap: var(--nx-space-2);
}

.nx-layer {
  position: relative;
  display: grid;
  gap: var(--nx-space-1) var(--nx-space-5);
  padding: var(--nx-space-5) var(--nx-space-6);
  border: 1px solid var(--nx-line);
  border-left: 1px solid var(--nx-line-accent);
  border-radius: var(--nx-radius-sm);
  background: rgba(33, 27, 59, 0.4);
  transition: border-color var(--nx-dur) var(--nx-ease),
    background var(--nx-dur) var(--nx-ease),
    transform var(--nx-dur) var(--nx-ease);
}

@media (min-width: 40rem) {
  .nx-layer {
    grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) auto;
    align-items: center;
  }
}

.nx-layer:hover {
  border-left-color: var(--nx-azure);
  background: rgba(33, 27, 59, 0.55);
  transform: translateX(3px);
}

.nx-layer__name {
  font-size: var(--nx-fs-body);
  font-weight: 500;
  color: var(--nx-text);
}

.nx-layer__desc {
  font-size: var(--nx-fs-caption);
  color: var(--nx-text-muted);
}

.nx-layer__tag {
  font-size: var(--nx-fs-eyebrow);
  letter-spacing: var(--nx-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--nx-text-faint);
}

.nx-flow {
  display: grid;
  gap: var(--nx-space-4);
  align-items: stretch;
}

@media (min-width: 56rem) {
  .nx-flow {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }
}

.nx-flow__node {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--nx-space-2);
  padding: var(--nx-space-5);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius-sm);
  background: rgba(33, 27, 59, 0.4);
  transition: border-color var(--nx-dur) var(--nx-ease);
}

.nx-flow__node:hover {
  border-color: var(--nx-line-accent);
}

.nx-flow__node + .nx-flow__node::before {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border-top: 1px solid var(--nx-line-accent);
  border-right: 1px solid var(--nx-line-accent);
  top: -15px;
  left: 50%;
  transform: translateX(-50%) rotate(135deg);
}

@media (min-width: 56rem) {
  .nx-flow__node + .nx-flow__node::before {
    top: 50%;
    left: -15px;
    transform: translateY(-50%) rotate(45deg);
  }
}

.nx-flow__name {
  font-size: var(--nx-fs-body);
  font-weight: 500;
  color: var(--nx-text);
}

.nx-flow__desc {
  font-size: var(--nx-fs-caption);
  color: var(--nx-text-muted);
}

.nx-figure {
  margin: 0;
  display: grid;
  gap: var(--nx-space-4);
}

.nx-figure svg {
  display: block;
  width: 100%;
  height: auto;
}

.nx-figure figcaption,
.nx-viz__cap {
  font-size: var(--nx-fs-caption);
  color: var(--nx-text-faint);
  letter-spacing: 0.01em;
}

@keyframes nx-trace {
  to {
    stroke-dashoffset: -240;
  }
}

.nx-trace {
  fill: none;
  stroke: var(--nx-line-accent);
  stroke-width: 1;
  stroke-dasharray: 5 9;
  animation: nx-trace var(--nx-dur-ambient) linear infinite;
}

@keyframes nx-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

.nx-pulse {
  animation: nx-pulse calc(var(--nx-dur-ambient) / 3) var(--nx-ease) infinite;
}

/* --------------------------------------------------- 10 header, mega menu */

/* Arm-style chrome: fully transparent over the hero, white nav, no frosted
   glass until the page has scrolled. Measured against arm.com top bar
   (transparent bg, ~80px, white 14–18px weight-400 labels, icon utilities). */
.nx-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--nx-z-header);
  font-family: var(--nx-font);
  background: transparent;
  border-block-end: 1px solid transparent;
  transition: background var(--nx-dur) var(--nx-ease),
    border-color var(--nx-dur) var(--nx-ease),
    backdrop-filter var(--nx-dur) var(--nx-ease);
}

body.has-announcement .nx-header {
  top: var(--announcement-height, 44px);
}

.nx-header[data-scrolled="true"] {
  background: rgba(8, 2, 37, 0.78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-block-end-color: var(--nx-line);
}

.nx-header[data-mega-open="true"] {
  background: rgba(8, 2, 37, 0.96);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-block-end-color: var(--nx-line);
}

@media (max-width: 48rem) {
  .nx-header[data-scrolled="true"],
  .nx-header[data-mega-open="true"] {
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
  }
}

.nx-header__bar {
  display: flex;
  align-items: center;
  /* Tighter than page-band gutter so Partner/Contact fit at 1280 while
     page content still uses the fuller --nx-gutter clamp. */
  gap: clamp(0.75rem, 1.4vw, 2.5rem);
  height: var(--nx-header-h);
  max-width: calc(var(--nx-container-wide) + var(--nx-gutter) * 2);
  margin-inline: auto;
  /* 15px below the 1360 container; side margin = leftover above it. */
  padding-inline: max(15px, calc((100vw - var(--nx-container)) / 2));
}

.nx-header__logo {
  display: flex;
  align-items: center;
  flex: none;
  height: 100%;
  text-decoration: none;
  opacity: 1;
  transition: opacity var(--nx-dur-fast) var(--nx-ease);
}

.nx-header__logo:hover {
  opacity: 0.88;
}

.nx-header__logo img {
  height: 28px;
  width: auto;
  display: block;
}

.nx-header__spacer {
  flex: 1 1 auto;
}

.nx-nav {
  display: none;
}

@media (min-width: 68rem) {
  .nx-nav {
    display: flex;
    align-items: center;
    height: 100%;
  }
}

.nx-nav__list {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
}

.nx-nav__item {
  display: flex;
  align-items: center;
  height: 100%;
}

.nx-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0 clamp(0.55rem, 0.7vw, 0.95rem);
  height: 100%;
  border: 0;
  background: none;
  font-family: inherit;
  /* Eight top-level labels: stay readable without wrapping at 1280. */
  font-size: clamp(0.8125rem, 0.25vw + 0.7rem, 0.9375rem);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--nx-text);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--nx-dur-fast) var(--nx-ease);
}

/* The no-JS fallback list in nx-header.html reuses .nx-nav__link on an <a>,
   which needs the underline off; the button form has none to remove. */
a.nx-nav__link {
  text-decoration: none;
}

.nx-nav__link::after {
  content: "";
  position: absolute;
  left: clamp(0.55rem, 0.7vw, 0.95rem);
  right: clamp(0.55rem, 0.7vw, 0.95rem);
  bottom: 0;
  height: 2px;
  background: var(--nx-text);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--nx-dur) var(--nx-ease-out);
}

.nx-nav__link:hover,
.nx-nav__link[aria-expanded="true"] {
  color: #fff;
}

.nx-nav__link[aria-expanded="true"]::after,
.nx-nav__link[data-active="true"]::after,
.nx-nav__link:hover::after {
  transform: scaleX(1);
}

.nx-nav__link[data-active="true"] {
  color: #fff;
}

/* Active top-nav caret — Arm points a small triangle at the open panel. */
.nx-nav__caret {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 0;
  border-inline: 6px solid transparent;
  border-block-end: 6px solid var(--nx-azure-soft);
  transform: translateX(-50%);
  pointer-events: none;
}

.nx-nav__link[aria-expanded="true"] {
  color: var(--nx-azure-soft);
}

.nx-nav__link[aria-expanded="true"] .nx-nav__caret {
  display: block;
}

.nx-nav__link[aria-expanded="true"]::after {
  background: var(--nx-azure-soft);
}

/* Mega menu — Arm two-pane anatomy: left category rail, right detail pane.
   Below the desktop breakpoint the drawer carries the same links, so panels
   are removed from the layout entirely rather than parked off-canvas. */
.nx-mega {
  display: none;
  position: absolute;
  inset-inline: 0;
  top: 100%;
  z-index: var(--nx-z-mega);
  background: var(--nx-abyss, #080225);
  border-block-end: 1px solid var(--nx-line);
  box-shadow: var(--nx-shadow-lift);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--nx-dur-fast) var(--nx-ease),
    transform var(--nx-dur) var(--nx-ease-out),
    visibility var(--nx-dur);
}

@media (min-width: 68rem) {
  .nx-mega {
    display: block;
  }
}

.nx-mega[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nx-mega__inner {
  display: grid;
  grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
  gap: 0;
  max-width: calc(var(--nx-container-wide) + var(--nx-gutter) * 2);
  margin-inline: auto;
  /* Match the header bar inset so the rail lines up with the logo. */
  padding-inline: max(15px, calc((100vw - var(--nx-container)) / 2));
  min-height: 22rem;
}

.nx-mega__inner--single {
  min-height: 18rem;
}

.nx-mega__rail {
  display: flex;
  flex-direction: column;
  gap: var(--nx-space-4);
  padding: var(--nx-space-10) var(--nx-space-6) var(--nx-space-8);
  background: rgba(0, 0, 0, 0.22);
  border-inline-end: 1px solid var(--nx-line);
}

.nx-mega__eyebrow {
  margin: 0 0 var(--nx-space-2);
  padding-inline: var(--nx-space-3);
  font-size: var(--nx-fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--nx-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--nx-azure-soft);
}

.nx-mega__cats {
  display: grid;
  gap: 0.35rem;
  flex: 1 1 auto;
  align-content: start;
}

.nx-mega__cat {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  margin: 0;
  padding: 0.7rem 0.85rem;
  border: 1px solid transparent;
  border-radius: 2px;
  background: transparent;
  color: var(--nx-text);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 400;
  text-align: start;
  cursor: pointer;
  transition: border-color var(--nx-dur-fast) var(--nx-ease),
    background var(--nx-dur-fast) var(--nx-ease),
    color var(--nx-dur-fast) var(--nx-ease);
}

.nx-mega__cat:hover,
.nx-mega__cat:focus-visible {
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  outline: none;
}

.nx-mega__cat:focus-visible {
  border-color: var(--nx-azure-soft);
}

.nx-mega__cat[aria-selected="true"] {
  border-color: rgba(199, 173, 252, 0.55);
  background: rgba(255, 255, 255, 0.03);
  color: #fff;
}

.nx-mega__cat-icon {
  display: inline-flex;
  flex: none;
  color: var(--nx-text-muted);
}

.nx-mega__cat[aria-selected="true"] .nx-mega__cat-icon,
.nx-mega__cat:hover .nx-mega__cat-icon {
  color: var(--nx-azure-soft);
}

.nx-mega__cat-label {
  line-height: 1.3;
}

.nx-mega__overview {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-block-start: auto;
  padding: 0.85rem var(--nx-space-3) 0;
  border-block-start: 1px solid var(--nx-line);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--nx-dur-fast) var(--nx-ease);
}

.nx-mega__overview:hover,
.nx-mega__overview:focus-visible {
  color: var(--nx-azure-soft);
  outline: none;
}

.nx-mega__panes {
  position: relative;
  min-width: 0;
  padding: var(--nx-space-10) clamp(1.5rem, 3vw, 2.75rem) var(--nx-space-10);
}

.nx-mega__pane {
  display: none;
  grid-template-columns: minmax(0, 1.15fr) minmax(12rem, 0.85fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: start;
}

.nx-mega__pane[data-active="true"] {
  display: grid;
}

.nx-mega__inner--single .nx-mega__pane {
  grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem);
}

.nx-mega__pane-main {
  display: grid;
  gap: var(--nx-space-4);
  align-content: start;
  min-width: 0;
}

.nx-mega__pane-title {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  color: #fff;
  font-size: clamp(1.35rem, 1.1vw + 1rem, 1.75rem);
  font-weight: 400;
  letter-spacing: var(--nx-tracking-heading);
  line-height: 1.2;
  text-decoration: none;
  max-width: 28ch;
}

.nx-mega__pane-title:hover,
.nx-mega__pane-title:focus-visible {
  color: var(--nx-azure-soft);
  outline: none;
}

.nx-mega__pane-blurb {
  margin: 0;
  max-width: 48ch;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--nx-text-muted);
}

.nx-mega__list {
  list-style: none;
  margin: var(--nx-space-4) 0 0;
  padding: 0;
  display: grid;
  gap: 0.15rem;
}

.nx-mega__link {
  display: grid;
  gap: 0.2rem;
  padding: 0.75rem 0;
  border-block-end: 1px solid transparent;
  text-decoration: none;
  transition: opacity var(--nx-dur-fast) var(--nx-ease);
}

.nx-mega__list > li + li .nx-mega__link {
  border-block-start: 1px solid rgba(255, 255, 255, 0.06);
}

.nx-mega__link:hover,
.nx-mega__link:focus-visible {
  outline: none;
}

.nx-mega__link-title {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
  transition: color var(--nx-dur-fast) var(--nx-ease);
}

.nx-mega__link:hover .nx-mega__link-title,
.nx-mega__link:focus-visible .nx-mega__link-title {
  color: var(--nx-azure-soft);
}

.nx-mega__link-desc {
  font-size: var(--nx-fs-caption);
  line-height: 1.5;
  color: var(--nx-text-faint);
  max-width: 46ch;
}

.nx-mega__pane-aside {
  align-self: stretch;
  min-width: 0;
}

.nx-mega__figure {
  margin: 0;
  display: grid;
  gap: 0.55rem;
}

.nx-mega__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}

.nx-mega__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nx-mega__caption {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--nx-text-faint);
}

.nx-mega__feature {
  display: grid;
  gap: var(--nx-space-3);
  align-content: start;
  height: 100%;
  min-height: 14rem;
  padding: var(--nx-space-6);
  border: 1px solid var(--nx-line);
  background: rgba(33, 27, 59, 0.45);
}

.nx-mega__feature-eyebrow {
  margin: 0;
  font-size: var(--nx-fs-eyebrow);
  letter-spacing: var(--nx-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--nx-azure-soft);
}

.nx-mega__feature-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 500;
  color: #fff;
}

.nx-mega__feature-body {
  margin: 0;
  font-size: var(--nx-fs-caption);
  line-height: 1.55;
  color: var(--nx-text-muted);
}

.nx-mega__feature-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-block-start: auto;
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}

.nx-mega__feature-cta:hover,
.nx-mega__feature-cta:focus-visible {
  color: var(--nx-azure-soft);
  outline: none;
}

@media (max-width: 84rem) {
  .nx-mega__pane {
    grid-template-columns: minmax(0, 1fr) minmax(11rem, 14rem);
  }
}

@media (max-width: 72rem) {
  .nx-mega__pane {
    grid-template-columns: minmax(0, 1fr);
  }

  .nx-mega__pane-aside {
    max-width: 22rem;
  }
}

.nx-header__actions {
  display: none;
  align-items: center;
  gap: 0.35rem;
  flex: none;
  height: 100%;
}

@media (min-width: 68rem) {
  .nx-header__actions {
    display: flex;
  }
}

/* Utility icon — Arm's right cluster is icon-only (search / contact / account).
   Contact is the one Nelix needs; 44px hit target kept for a11y. */
.nx-header__util {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--nx-text);
  text-decoration: none;
  border-radius: 2px;
  transition: color var(--nx-dur-fast) var(--nx-ease),
    background var(--nx-dur-fast) var(--nx-ease);
}

.nx-header__util:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.nx-header__util svg {
  display: block;
}

/* Quiet text partner link — not a filled CTA. Arm keeps conversion out of
   the chrome; we keep the route discoverable without a blue pill. */
.nx-header__partner {
  display: none;
  align-items: center;
  height: 44px;
  padding-inline: 0.85rem;
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--nx-text);
  text-decoration: none;
  white-space: nowrap;
  border-radius: 2px;
  transition: color var(--nx-dur-fast) var(--nx-ease),
    background var(--nx-dur-fast) var(--nx-ease);
}

.nx-header__partner:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

@media (min-width: 80rem) {
  .nx-header__partner {
    display: inline-flex;
  }
}

/* Both right-side actions share the quiet text treatment; Contact appears
   from the same breakpoint as the action cluster so the mobile drawer keeps
   owning those routes below desktop. */
.nx-header__partner--contact {
  display: inline-flex;
}

/* Legacy class kept so any stray markup does not reappear as a filled button. */
.nx-header__contact {
  display: none !important;
}

/* Mobile drawer — 44px minimum targets throughout. */
.nx-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
  padding: 0 11px;
  margin-inline-start: auto;
  border: 1px solid var(--nx-line-strong);
  border-radius: var(--nx-radius-xs);
  background: none;
  cursor: pointer;
  flex: none;
  transition: border-color var(--nx-dur-fast) var(--nx-ease);
}

.nx-burger:hover,
.nx-burger:focus-visible {
  border-color: var(--nx-line-accent);
}

@media (min-width: 68rem) {
  .nx-burger {
    display: none;
  }
}

.nx-burger span {
  display: block;
  height: 1px;
  width: 100%;
  background: var(--nx-text);
  transition: transform var(--nx-dur) var(--nx-ease),
    opacity var(--nx-dur-fast) var(--nx-ease);
}

.nx-burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nx-burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nx-burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.nx-drawer {
  position: fixed;
  inset: var(--nx-header-h) 0 0 0;
  z-index: calc(var(--nx-z-header) - 1);
  background: linear-gradient(180deg, var(--nx-void) 0%, var(--nx-navy-deep) 100%);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--nx-dur) var(--nx-ease),
    transform var(--nx-dur) var(--nx-ease),
    visibility var(--nx-dur);
}

body.has-announcement .nx-drawer {
  top: calc(var(--nx-header-h) + var(--announcement-height, 44px));
}

.nx-drawer[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (min-width: 68rem) {
  .nx-drawer {
    display: none;
  }
}

.nx-drawer__inner {
  padding: var(--nx-space-4) var(--nx-gutter) var(--nx-space-20);
}

.nx-drawer__section {
  border-block-end: 1px solid var(--nx-line);
}

.nx-drawer__trigger {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 52px;
  padding-block: var(--nx-space-3);
  font-family: var(--nx-font);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--nx-text);
  cursor: pointer;
  transition: color var(--nx-dur-fast) var(--nx-ease);
}

.nx-drawer__trigger:hover,
.nx-drawer__trigger[aria-expanded="true"] {
  color: var(--nx-azure-soft);
}

.nx-drawer__toplink {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding-block: var(--nx-space-3);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--nx-text);
  text-decoration: none;
  transition: color var(--nx-dur-fast) var(--nx-ease);
}

.nx-drawer__toplink:hover {
  color: var(--nx-azure-soft);
}

/* Same reasoning as .nx-accordion__panel: the row change is instant, the eased
   part composites. */
.nx-drawer__panel {
  display: grid;
  grid-template-rows: 0fr;
}

.nx-drawer__panel[data-open="true"] {
  grid-template-rows: 1fr;
}

.nx-drawer__panel > div {
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity var(--nx-dur) var(--nx-ease),
    transform var(--nx-dur) var(--nx-ease);
}

.nx-drawer__panel[data-open="true"] > div {
  opacity: 1;
  transform: translateY(0);
}

.nx-drawer__list {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--nx-space-4) 0;
  display: grid;
  gap: 1px;
}

.nx-drawer__colhead {
  margin: var(--nx-space-4) 0 var(--nx-space-1);
  padding-inline-start: var(--nx-space-5);
  font-size: var(--nx-fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--nx-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--nx-text-faint);
}

.nx-drawer__colhead:first-child {
  margin-block-start: var(--nx-space-2);
}

.nx-drawer__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--nx-space-3) 0 var(--nx-space-3) var(--nx-space-5);
  border-left: 1px solid var(--nx-line);
  font-size: 0.9375rem;
  color: var(--nx-text-muted);
  text-decoration: none;
  transition: color var(--nx-dur-fast) var(--nx-ease),
    border-color var(--nx-dur-fast) var(--nx-ease);
}

.nx-drawer__link:hover {
  color: var(--nx-azure-soft);
  border-left-color: var(--nx-azure);
}

.nx-drawer__actions {
  display: grid;
  gap: var(--nx-space-3);
  padding-block-start: var(--nx-space-10);
}

/* -------------------------------------------------------------- 11 footer */

.nx-footer2 {
  position: relative;
  background: var(--nx-void);
  color: var(--nx-text-body);
  font-family: var(--nx-font);
  font-size: 0.875rem;
  isolation: isolate;
  overflow: hidden;
}

.nx-footer2__glow {
  position: absolute;
  inset: -8rem 8% auto;
  height: 14rem;
  background:
    radial-gradient(55% 80% at 50% 0%, var(--nx-glow-a18), transparent 70%),
    radial-gradient(40% 70% at 20% 20%, rgba(143, 192, 255, 0.12), transparent 65%),
    radial-gradient(35% 60% at 80% 10%, rgba(114, 51, 247, 0.1), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.nx-footer2__inner {
  position: relative;
  z-index: 1;
  max-width: calc(var(--nx-container-wide) + var(--nx-gutter) * 2);
  margin-inline: auto;
  padding: clamp(3rem, 7vh, 5rem) var(--nx-gutter) var(--nx-space-8);
}

/* Stay-connected band — above the link columns */
.nx-footer2__connect {
  display: grid;
  gap: var(--nx-space-6);
  align-items: end;
  padding-block-end: clamp(2.5rem, 5vh, 3.5rem);
  margin-block-end: clamp(2.5rem, 5vh, 3.5rem);
  border-block-end: 1px solid var(--nx-line);
}

@media (min-width: 56rem) {
  .nx-footer2__connect {
    grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 1fr);
    gap: var(--nx-space-12);
  }
}

.nx-footer2__connect-eyebrow {
  margin: 0 0 var(--nx-space-2);
  font-size: var(--nx-fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--nx-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--nx-azure-soft);
}

.nx-footer2__connect-title {
  margin: 0;
  max-width: 28ch;
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--nx-text);
}

.nx-footer2__connect-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  margin: var(--nx-space-4) 0 0;
  color: var(--nx-text-muted);
  font-size: 0.875rem;
}

.nx-footer2__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--nx-space-3);
  align-items: stretch;
  width: 100%;
  max-width: 28rem;
  justify-self: end;
}

.nx-footer2__input {
  width: 100%;
  min-height: 2.875rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--nx-line-strong);
  border-radius: var(--nx-radius-xs);
  background: rgba(255, 255, 255, 0.03);
  color: var(--nx-text);
  font-family: var(--nx-font);
  font-size: 0.9375rem;
  outline: none;
  transition: border-color var(--nx-dur-fast) var(--nx-ease),
    background var(--nx-dur-fast) var(--nx-ease),
    box-shadow var(--nx-dur-fast) var(--nx-ease);
}

.nx-footer2__input::placeholder {
  color: var(--nx-text-faint);
}

.nx-footer2__input:hover {
  border-color: var(--nx-line-accent);
}

.nx-footer2__input:focus {
  border-color: var(--nx-azure);
  background: rgba(114, 51, 247, 0.06);
  box-shadow: 0 0 0 3px var(--nx-glow-a18);
}

.nx-footer2__submit {
  min-width: 7.5rem;
}

.nx-footer2__connect-cta {
  justify-self: start;
}

@media (min-width: 56rem) {
  .nx-footer2__connect-cta {
    justify-self: end;
  }
}

/* Equal-weight link columns — Arm-style mega-footer */
.nx-footer2__nav {
  display: grid;
  gap: var(--nx-space-10) var(--nx-space-8);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-block-end: clamp(2.5rem, 5vh, 3.75rem);
}

@media (min-width: 48rem) {
  .nx-footer2__nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 72rem) {
  .nx-footer2__nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--nx-space-10) var(--nx-space-6);
  }
}

@media (min-width: 90rem) {
  .nx-footer2__nav {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}

.nx-footer2__group {
  display: grid;
  gap: 0.65rem;
  align-content: start;
}

.nx-footer2__grouphead {
  margin: 0 0 0.35rem;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--nx-text);
  text-decoration: none;
  text-transform: none;
}

a.nx-footer2__grouphead:hover {
  color: var(--nx-azure-soft);
}

.nx-footer2__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.15rem;
}

.nx-footer2__link {
  color: rgba(242, 246, 252, 0.72);
  text-decoration: none;
  font-size: 0.875rem;
  line-height: 1.35;
  padding: 0.28rem 0;
  display: inline-flex;
  align-items: center;
  transition: color var(--nx-dur-fast) var(--nx-ease);
}

.nx-footer2__link:hover {
  color: var(--nx-text);
}

/* Social + wordmark row */
.nx-footer2__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--nx-space-5);
  padding-block: var(--nx-space-6);
  border-block-start: 1px solid var(--nx-line);
}

.nx-footer2__logo img {
  height: 22px;
  width: auto;
  opacity: 0.92;
}

.nx-footer2__social {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.nx-footer2__social:empty {
  display: none;
}

.nx-footer2__social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--nx-radius-xs);
  color: var(--nx-text);
  transition: color var(--nx-dur-fast) var(--nx-ease),
    background var(--nx-dur-fast) var(--nx-ease);
}

.nx-footer2__social a:hover {
  color: var(--nx-azure-soft);
  background: var(--nx-glow-a06);
}

/* Legal strip */
.nx-footer2__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--nx-space-3) var(--nx-space-6);
  padding-block-start: var(--nx-space-5);
  border-block-start: 1px solid var(--nx-line);
  font-size: 0.75rem;
  color: var(--nx-text-muted);
}

/* `color: inherit` is load-bearing: these are <p> elements, and without it
   they take the bare-paragraph default rather than the row colour above,
   which put the copyright line at 3.24:1. */
.nx-footer2__copy,
.nx-footer2__status {
  margin: 0;
  color: inherit;
}

.nx-footer2__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0;
}

.nx-footer2__legal .nx-footer2__link {
  font-size: 0.75rem;
  color: var(--nx-text-muted);
  padding: 0.2rem 0;
}

.nx-footer2__legal .nx-footer2__link:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.7em;
  margin-inline: 0.85rem;
  background: var(--nx-line-strong);
  vertical-align: middle;
}

.nx-footer2__legal .nx-footer2__link:hover {
  color: var(--nx-text);
}

@media (max-width: 35.99rem) {
  .nx-footer2__form {
    grid-template-columns: 1fr;
  }

  .nx-footer2__submit {
    width: 100%;
  }

  .nx-footer2__meta {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ------------------------------------------------------- 12 reveal / motion */

/* 12px rise + opacity. Fires once; the motion module never re-triggers it. */
.nx-reveal,
[data-nx-reveal] {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity var(--nx-dur-slow) var(--nx-ease-out),
    transform var(--nx-dur-slow) var(--nx-ease-out);
  transition-delay: var(--nx-reveal-delay, 0ms);
  will-change: transform, opacity;
}

.nx-reveal[data-visible="true"],
[data-nx-reveal][data-visible="true"] {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* No-JS must never leave content invisible. */
.no-js .nx-reveal,
.no-js [data-nx-reveal] {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------- 13 utilities */

.nx-mt-0 { margin-block-start: 0; }
.nx-mt-2 { margin-block-start: var(--nx-space-2); }
.nx-mt-4 { margin-block-start: var(--nx-space-4); }
.nx-mt-6 { margin-block-start: var(--nx-space-6); }
.nx-mt-8 { margin-block-start: var(--nx-space-8); }
.nx-mt-12 { margin-block-start: var(--nx-space-12); }
.nx-mt-16 { margin-block-start: var(--nx-space-16); }

.nx-accent { color: var(--nx-azure-soft); }
.nx-muted { color: var(--nx-text-muted); }
.nx-dim { color: var(--nx-text-faint); }
.nx-center { text-align: center; }
.nx-nowrap { white-space: nowrap; }
.nx-full { grid-column: 1 / -1; }

/* ==========================================================================
   20 ARM GEOMETRY

   The token layer now carries Arm's measured values, but several primitives
   in this sheet hard-code geometry that tokens cannot reach: button height and
   radius, heading weights, the eyebrow tick, the section tone gradients. This
   section restates those primitives at the measured Arm values.

   It lives at the end of the file rather than being edited in place because
   the rules above are referenced by ~16 stylesheets and eight page templates;
   rewriting them in situ would mean auditing every consumer in one pass. Rules
   here have the same specificity as the originals and win on order. Fold them
   upward when the sheet is next reorganised.

   Source: _tmp/arm-audit/arm-structure.json (Chromium, 1440 and 375) and
   arm-1440-report.txt. Every number below is measured, not chosen.
   ========================================================================== */

/* -------------------------------------------------------- 20.1 type roles
   Arm's content type uses exactly four weights: 100 (hero only), 300 (card
   titles), 400 (everything else) and 500 (the 24px card title on light
   bands). Nothing on the page is bold. The 550/600 weights this sheet used
   are the single loudest difference from Arm and they are all removed here. */
.nx-display,
.nx-h1 {
  font-weight: var(--nx-fw-regular);
  line-height: var(--nx-lh-display);
  letter-spacing: var(--nx-tracking-display);
}

.nx-h2 {
  font-size: var(--nx-fs-h2);
  font-weight: var(--nx-fw-regular);
  line-height: var(--nx-lh-heading);
  letter-spacing: var(--nx-tracking-heading);
}

.nx-h3 {
  font-size: var(--nx-fs-h3);
  font-weight: var(--nx-fw-light);
  line-height: var(--nx-lh-h3);
  letter-spacing: var(--nx-tracking-heading);
}

.nx-h4 {
  font-size: var(--nx-fs-h4);
  font-weight: var(--nx-fw-medium);
  line-height: 1.08;
  letter-spacing: var(--nx-tracking-heading);
}

.nx-h5 {
  font-weight: var(--nx-fw-medium);
}

/* Measured: 24px/400/lh1.33 with POSITIVE 0.5px tracking, and full-strength
   ink rather than a muted grey. Arm does not grey down its lede. */
.nx-lede {
  font-size: var(--nx-fs-lead);
  font-weight: var(--nx-fw-regular);
  line-height: var(--nx-lh-lead);
  letter-spacing: var(--nx-tracking-lead);
  color: var(--nx-text);
  max-width: 44ch;
}

/* Measured median line length on arm.com is 37 characters and the p90 is 81.
   62ch sat above the p90 for body copy; 66ch is the honest cap for the 18px
   role and the narrower roles set their own. */
.nx-body {
  font-size: var(--nx-fs-body);
  font-weight: var(--nx-fw-regular);
  line-height: var(--nx-lh-body);
  letter-spacing: var(--nx-tracking-body);
  color: var(--nx-text-body);
  max-width: 66ch;
}

.nx-small,
.nx-caption {
  font-size: var(--nx-fs-caption);
  line-height: 1.5;
  letter-spacing: 0;
}

/* No bold anywhere. Arm renders no weight above 500 in page content, so the
   default 700 on <strong>/<b> is pulled back onto the medium cut. */
.nx-scope strong,
.nx-scope b,
.nx-scope th {
  font-weight: var(--nx-fw-medium);
}

/* ---------------------------------------------------------- 20.2 eyebrow
   Measured: 14px/400 in the cyan on ink bands, with NO rule or tick before
   it and no letterspaced uppercase treatment. The 2rem leading hairline was
   a Nelix invention. */
.nx-eyebrow {
  font-size: var(--nx-fs-caption);
  font-weight: var(--nx-fw-regular);
  letter-spacing: var(--nx-tracking-eyebrow);
  text-transform: none;
  color: var(--nx-cyan);
}

.nx-eyebrow::before {
  display: none;
}

/* ---------------------------------------------------------- 20.3 buttons
   Measured on every CTA on the homepage: height 48px, radius 40px, padding
   0 20px, 16px/400 with 0.36px tracking, 1px border, no shadow, no lift on
   hover. Only the colour changes between variants, and it changes by the
   surface the button sits on rather than by importance. */
.nx-btn {
  gap: var(--nx-gap-12);
  min-height: 48px;
  padding: 0 var(--nx-sp-20);
  border-radius: var(--nx-radius-btn);
  font-size: var(--nx-fs-btn);
  font-weight: var(--nx-fw-regular);
  letter-spacing: var(--nx-tracking-cta);
}

/* Arm's buttons do not move and do not cast a shadow. */
.nx-btn:hover,
.nx-btn:active {
  transform: none;
}

.nx-btn--primary {
  --_bg: var(--nx-azure-deep);
  --_fg: var(--nx-text);
  --_bd: var(--nx-azure-deep);
  font-weight: var(--nx-fw-regular);
}

.nx-btn--primary:hover {
  --_bg: var(--nx-violet-hover);
  --_bd: var(--nx-violet-hover);
  box-shadow: none;
}

/* Measured: the secondary is a filled ink pill with a violet edge and a
   violet label, set one step larger than the primary at 20px. */
.nx-btn--secondary {
  --_bg: var(--nx-void);
  --_fg: var(--nx-azure);
  --_bd: var(--nx-azure-deep);
  font-size: var(--nx-fs-cta);
}

.nx-btn--secondary:hover {
  --_bg: var(--nx-azure-ink);
  --_bd: var(--nx-azure-deep);
  --_fg: var(--nx-azure-soft);
}

.nx-btn--ghost {
  --_bd: transparent;
  --_bg: transparent;
  --_fg: var(--nx-text-muted);
}

.nx-btn--ghost:hover {
  --_bg: transparent;
  --_fg: var(--nx-text);
}

/* Arm renders one button height. `lg` and `sm` therefore differ only in the
   label, so the page cannot build a size hierarchy Arm does not have. */
.nx-btn--sm,
.nx-btn--lg {
  min-height: 48px;
  padding: 0 var(--nx-sp-20);
  font-size: var(--nx-fs-btn);
}

@media (max-width: 40rem) {
  .nx-btn,
  .nx-btn--sm,
  .nx-btn--lg {
    min-height: 48px;
  }
}

/* On white bands the fill is Arm's blue, not the violet. */
.nx-on-light .nx-btn--primary {
  --_bg: var(--nx-blue);
  --_bd: var(--nx-blue);
  --_fg: var(--nx-text);
}

.nx-on-light .nx-btn--primary:hover {
  --_bg: var(--nx-blue-deep);
  --_bd: var(--nx-blue-deep);
}

.nx-on-light .nx-btn--secondary {
  --_bg: transparent;
  --_fg: var(--nx-blue-deep);
  --_bd: var(--nx-blue);
}

.nx-on-light .nx-btn--secondary:hover {
  --_bg: var(--nx-wipe);
  --_fg: var(--nx-blue-deep);
}

.nx-on-light .nx-btn--ghost {
  --_fg: var(--nx-text-on-light-muted);
}

.nx-on-light .nx-btn--ghost:hover {
  --_fg: var(--nx-text-on-light);
}

/* ------------------------------------------------------------- 20.4 links
   Measured 20px/400 with 0.36px tracking in the on-ink violet, and Arm draws
   no underline on them at rest. */
.nx-link {
  gap: var(--nx-gap-12);
  color: var(--nx-azure);
  font-size: var(--nx-fs-cta);
  font-weight: var(--nx-fw-regular);
  letter-spacing: var(--nx-tracking-cta);
}

.nx-on-light .nx-link {
  color: var(--nx-blue-deep);
}

/* ---------------------------------------------------------- 20.5 surfaces
   Arm bands are opaque fills, not translucent lifts over a page-wide
   gradient. The tone modifiers therefore stop painting their gradients: a
   band declares its own surface with .nx-band--ink / --white / --light. */
.nx-section--raised::before,
.nx-section--sunken::before {
  display: none;
}

.nx-section--ruled::after {
  background: var(--nx-line);
  inset-inline: 0;
}

.nx-on-light.nx-section--ruled::after {
  background: var(--nx-line-on-light);
}

/* Radius 0 everywhere except the button pill. */
.nx-panel,
.nx-card,
.nx-viz,
.nx-figure,
.nx-stat,
.nx-project,
.nx-why-point {
  border-radius: 0;
  box-shadow: none;
}

/* Measured: pills are the button radius. */
.nx-pill {
  border-radius: var(--nx-radius-btn);
  font-weight: var(--nx-fw-regular);
}

/* Status pills on a white band.

   The on-ink states are amber / grey / violet-light. Amber measures 1.85:1 on
   white, so it cannot cross over, and the homepage carousel band is white.
   Each state therefore takes its -on-light twin, all three measured above the
   4.5:1 body floor because the pill label is 11px uppercase:

     active    #0047D6  7.31:1  running now
     progress  #7233F7  5.94:1  in development
     planned   #5A5668  7.08:1  research or prototype

   Hue is not carrying the distinction on its own: the dashed border and the
   hollow marker from nx-tokens.css section 11 come through unchanged. */
.nx-on-light .nx-pill {
  color: var(--nx-text-on-light-muted);
  border-color: var(--nx-line-on-light);
}

.nx-on-light .nx-pill--active {
  color: var(--nx-status-active-on-light);
  border-color: color-mix(in srgb, var(--nx-status-active-on-light) 34%, transparent);
}

.nx-on-light .nx-pill.nx-pill--progress {
  color: var(--nx-status-done-on-light);
  border-color: color-mix(in srgb, var(--nx-status-done-on-light) 34%, transparent);
}

.nx-on-light .nx-pill--planned {
  color: var(--nx-status-hold-on-light);
  border-color: color-mix(in srgb, var(--nx-status-hold-on-light) 34%, transparent);
}

/* ----------------------------------------------------------- 20.6 header
   Measured: 80px tall, sticky, transparent over the masthead, 1360 inner.
   Arm runs six links at ~18px; Nelix now runs eight, so the size steps down
   just enough that the bar still fits at 1280 without wrapping. */
.nx-nav__link {
  font-size: clamp(0.8125rem, 0.25vw + 0.7rem, 0.9375rem);
  font-weight: var(--nx-fw-regular);
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--nx-text);
}

.nx-nav__link::after {
  background: var(--nx-azure-soft);
  height: 1px;
}

.nx-header__bar {
  max-width: calc(var(--nx-container) + var(--nx-gutter) * 2);
}

.nx-header__partner {
  font-size: var(--nx-fs-caption);
  font-weight: var(--nx-fw-regular);
  letter-spacing: var(--nx-tracking-eyebrow);
}

/* ----------------------------------------------------------- 20.7 footer
   Measured: ink fill, 35px top padding and none at the bottom, four equal
   link columns, a 20px/400 column head and 14px/400 links. Arm's footer has
   no glow, no gradient and no radius; the Nelix one had a three-layer radial
   wash across the top, which is the largest single non-Arm gesture left in the
   chrome, so it goes. */
.nx-footer2 {
  font-size: var(--nx-fs-caption);
  overflow: visible;
}

.nx-footer2__glow {
  display: none;
}

.nx-footer2__inner {
  max-width: calc(var(--nx-container) + var(--nx-gutter) * 2);
  padding: var(--nx-sp-35, 35px) var(--nx-gutter) var(--nx-sp-45);
}

/* Five columns, because navigation.py builds five groups. At four the
   Company group wrapped onto a second row on its own and left three empty
   columns beside it. Arm's footer is five columns wide for the same reason:
   the count follows the content. */
.nx-footer2__nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--nx-gap-30);
}

@media (max-width: 74.9375rem) {
  .nx-footer2__nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 61.9375rem) {
  .nx-footer2__nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 47.9375rem) {
  .nx-footer2__nav {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Measured 20px/400, and Arm does not letterspace or uppercase it. */
.nx-footer2__grouphead {
  font-size: var(--nx-fs-cta);
  font-weight: var(--nx-fw-regular);
  letter-spacing: 0;
  text-transform: none;
  color: var(--nx-text);
}

.nx-footer2__link {
  font-size: var(--nx-fs-caption);
  font-weight: var(--nx-fw-regular);
  letter-spacing: 0;
  color: var(--nx-text);
}

.nx-footer2__link:hover {
  color: var(--nx-azure-soft);
}

/* Arm band 8, "Stay connected", is a 45/45 band of its own directly above the
   footer. Nelix already carries that block as the footer's first row, and
   duplicating it as a separate band would put two newsletter forms on the
   page. It keeps Arm's band padding and centred treatment in place. */
.nx-footer2__connect {
  padding-block-end: var(--nx-sp-45);
  margin-block-end: var(--nx-sp-45);
  border-block-end-color: var(--nx-line);
}

.nx-footer2__connect-eyebrow {
  color: var(--nx-cyan);
  letter-spacing: var(--nx-tracking-eyebrow);
  text-transform: none;
}

.nx-footer2__connect-title {
  font-size: var(--nx-fs-h2);
  font-weight: var(--nx-fw-regular);
  line-height: var(--nx-lh-heading);
  letter-spacing: 0;
  color: var(--nx-text);
}

.nx-footer2__input {
  border-radius: var(--nx-radius-btn);
  min-height: 48px;
  padding: 0 var(--nx-sp-20);
  font-size: var(--nx-fs-btn);
}