/* ==========================================================================
   Arm-structure homepage system.

   Everything here reproduces a component measured on arm.com with
   _tmp/arm-audit/measure.mjs on 2 Aug 2026. Component names are `.na-*` so
   they never collide with the older `.nx-*` layer, which still owns every
   other page. Values come from tokens in nx-tokens.css; nothing below
   writes a colour, a size or a step as a literal.

   Measured facts this file exists to hold:
     - bands alternate ink #080225 and white, nothing in between
     - band padding is 45 / 90 / 120-125, page gutter 15
     - container 1360, inner column 1330
     - cards have zero radius, buttons are 40px pills
     - card border on white is a 1px #E5ECEB hairline, no shadow
     - card internal order is heading > description > CTA, CTA bottom-aligned
     - 4-up grid collapses to 2-up at 768 and 1-up at 375
   ========================================================================== */

/* ------------------------------------------------------------- container */

/* Arm's .row is 1360 wide including its gutter, and the 15px lives inside
   it, leaving 1330 of content. Adding the gutter outside 1360 made every
   band 30px wider than the reference and left --nx-container-inner (1330)
   describing nothing. Content now lands on 1330 as measured. */
.na-container {
  width: 100%;
  max-width: var(--nx-container);
  margin-inline: auto;
  padding-inline: var(--nx-gutter);
}

/* The second 15px inset Arm renders inside the 1360 container. */
.na-container__inner {
  max-width: var(--nx-container-inner);
  margin-inline: auto;
}

/* ----------------------------------------------------------------- bands

   Two surfaces only. `.na-band--ink` and `.na-band--light` set both their
   own background and the text colours their contents inherit, so a section
   can be flipped by changing one class and nothing inside it needs to know
   which surface it is on. */

.na-band {
  position: relative;
  padding-block: var(--nx-space-section);
  isolation: isolate;
}

.na-band--ink {
  background: var(--nx-void);
  color: var(--nx-text);
  --_fg: var(--nx-text);
  --_fg-body: var(--nx-text-body);
  --_fg-muted: var(--nx-text-muted);
  --_accent: var(--nx-azure);
  --_rule: var(--nx-line-strong);
  --_card-bd: var(--nx-line-strong);
  /* Form controls: ink-appropriate translucent edge + fill. */
  --_field-bd: var(--nx-line-strong);
  --_field-bg: color-mix(in srgb, var(--nx-text) 6%, transparent);
  --_field-bg-focus: color-mix(in srgb, var(--nx-text) 10%, transparent);
}

.na-band--light {
  background: #ffffff;
  color: var(--nx-text-on-light);
  --_fg: var(--nx-text-on-light);
  --_fg-body: var(--nx-text-on-light);
  --_fg-muted: var(--nx-text-on-light-muted);
  --_accent: var(--nx-blue-deep);
  --_rule: var(--nx-line-on-light);
  --_card-bd: var(--nx-line-on-light);
  /* Form controls: --nx-line-on-light (#e5eceb) vanishes against a light
     field fill on white, and --nx-line-strong is white@13% (ink-only). */
  --_field-bd: #aeb6bf;
  --_field-bg: #f0f2f5;
  --_field-bg-focus: #ffffff;
}

/* Band padding, entirely on the measured 15-based scale: 45 / 90 / 120 / 125
   and nothing else.

   Bands 03, 04 and 05 are all ink and therefore read as one continuous
   region rather than three. Padding them each at their own measured value
   would stack two paddings at every internal seam and produce gaps of 145
   and 135 that exist nowhere on arm.com. Instead the run is padded as a
   unit: 120 above it, 125 below it, and 45+45 = 90 at each internal seam,
   which is exactly Arm's mid-band step. */
.na-band--pad-lead {
  padding-block: var(--nx-space-section-lg) var(--nx-sp-45);
}

.na-band--pad-tail {
  padding-block: var(--nx-sp-45) var(--nx-sp-125);
}

/* Single-band tone run: open and close as one region. */
.na-band--pad-solo {
  padding-block: var(--nx-space-section-lg) var(--nx-sp-125);
}

/* Tail of one run meeting lead of the next must not stack 125+120.
   Collapse to a single mid-band seam (45+45 = 90). */
.na-band--pad-tail + .na-band--pad-lead,
.na-band--pad-solo + .na-band--pad-lead,
.na-band--pad-tail + .na-band--pad-solo,
.na-band--pad-solo + .na-band--pad-solo {
  padding-block-start: var(--nx-sp-45);
}

.na-band--pad-tail:has(+ .na-band--pad-lead),
.na-band--pad-solo:has(+ .na-band--pad-lead),
.na-band--pad-tail:has(+ .na-band--pad-solo),
.na-band--pad-solo:has(+ .na-band--pad-solo) {
  padding-block-end: var(--nx-sp-45);
}

/* Below 768 the lead band's 120 already collapses to 45 through
   --nx-space-section-lg; the tail has to come with it or the run ends on a
   125px void that is a third of a phone screen. */
@media (max-width: 47.9375rem) {
  .na-band--pad-tail,
  .na-band--pad-solo {
    padding-block: var(--nx-sp-45);
  }
}

/* ------------------------------------------------------------ type roles

   Weights are 100 / 300 / 400 / 500 and nothing else. Tracking is positive
   on body copy and slightly negative on the display sizes, which is what
   Arm measures and the reverse of the scale this site used to run.

   Every role states its own colour through the band variable rather than
   inheriting it. Inheritance is not available here: nx-legacy.css and
   nx-system.css both carry bare-element heading defaults, and an element
   rule beats an inherited value however low its specificity. Both are
   :where()-wrapped now, so a plain `color` here is enough. */

.na-hero-title {
  margin: 0;
  font-size: var(--nx-fs-hero);
  font-weight: var(--nx-fw-hero);
  line-height: var(--nx-lh-hero);
  letter-spacing: var(--nx-tracking-display);
  color: var(--_fg, var(--nx-text));
  text-wrap: balance;
}

/* Interior editorial hero (not the homepage carousel). Scoped so homepage
   masthead type is untouched. */
.na-page-hero__copy {
  max-width: 46rem;
}

.na-page-hero__lede {
  max-width: 52ch;
}

.na-page-hero .na-hero-title {
  /* One step below the homepage carousel H1; still clearly the page title. */
  font-size: clamp(2.5rem, 1.6rem + 2.2vw, 3.75rem);
}

.na-page-hero__layout--split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--nx-sp-45);
  align-items: center;
}

.na-page-hero--split .na-page-hero__copy {
  max-width: none;
}

.na-page-hero__media .na-media,
.na-page-hero__media > picture,
.na-page-hero__media > img {
  display: block;
  width: 100%;
}

.na-page-hero__media .na-figcaption {
  color: var(--_fg-body, var(--nx-text-body));
}

@media (max-width: 63.9375rem) {
  .na-page-hero__layout--split {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--nx-gap-30);
  }
}

.na-h2 {
  margin: 0;
  font-size: var(--nx-fs-h2);
  font-weight: var(--nx-fw-regular);
  line-height: var(--nx-lh-heading);
  letter-spacing: var(--nx-tracking-heading);
  color: var(--_fg, var(--nx-text));
  text-wrap: balance;
}

.na-h3 {
  margin: 0;
  font-size: var(--nx-fs-h3);
  font-weight: var(--nx-fw-light);
  line-height: var(--nx-lh-h3);
  color: var(--_fg, var(--nx-text));
  text-wrap: balance;
}

/* Arm's card title: 24/26 weight 500, left, on a ~423px column. Measured on
   its link cards, which is the same job this does. Tighter than the band
   heading's 1.1875, so it carries its own leading. */
.na-h4 {
  margin: 0;
  font-size: var(--nx-fs-h4);
  font-weight: var(--nx-fw-medium);
  line-height: var(--nx-lh-h4);
  color: var(--_fg, var(--nx-text));
  text-wrap: balance;
}

/* The paragraph under a band heading. Arm sets this noticeably smaller than
   the heading above it, not as a second masthead subtitle: the 24px lead
   size belongs to the hero alone, which is why `.na-hero__lede` is the only
   thing that reaches for it. */
.na-lede {
  margin: 0;
  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(--_fg-body, var(--nx-text-body));
  max-width: 52ch;
  text-wrap: pretty;
}

.na-body {
  margin: 0;
  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(--_fg-body, var(--nx-text-body));
  max-width: 42ch;
  text-wrap: pretty;
}

/* Card descriptions run one weight lighter than body copy. The 1.22 leading
   and 1px tracking this rule used to carry came out of a single measured
   node and read as cramped at every width once the cards were populated;
   both are back on the body values, which is what the rest of Arm's 18px
   copy renders at. */
.na-card-body {
  margin: 0;
  font-size: var(--nx-fs-body);
  font-weight: var(--nx-fw-light);
  line-height: 1.4;
  letter-spacing: var(--nx-tracking-body);
  color: var(--_fg-body, var(--nx-text-body));
  text-wrap: pretty;
}

.na-eyebrow {
  display: block;
  margin: 0;
  font-size: var(--nx-fs-eyebrow);
  font-weight: var(--nx-fw-medium);
  line-height: 1.5;
  letter-spacing: var(--nx-tracking-eyebrow);
  color: var(--_accent, var(--nx-azure));
}

/* Arm has no rule, dot or bracket on its eyebrows. */
.na-eyebrow::before {
  content: none;
}

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

   Measured: 48px tall, 40px radius, 0 20px padding, 16px/400 label with
   0.36px tracking. Violet fill on ink, blue fill on white. No shadow, no
   lift on hover, no transform. */

.na-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nx-gap-10);
  min-height: 48px;
  padding: 0 var(--nx-sp-20);
  border: 1px solid transparent;
  border-radius: var(--nx-radius-btn);
  font-family: var(--nx-font);
  font-size: var(--nx-fs-btn);
  font-weight: var(--nx-fw-regular);
  letter-spacing: var(--nx-tracking-cta);
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--nx-dur-fast) var(--nx-ease),
    color var(--nx-dur-fast) var(--nx-ease),
    border-color var(--nx-dur-fast) var(--nx-ease);
}

/* Primary on ink: Arm CTA purple fill, white label. 5.94:1 AA. */
.na-band--ink .na-btn--primary,
.na-btn--primary {
  background: var(--nx-cta-purple, var(--nx-azure-deep));
  border-color: var(--nx-cta-purple, var(--nx-azure-deep));
  color: #ffffff;
}

/* Hover measured on arm.com carousel CTA: #7233f7 → #6023de (7.52:1). */
.na-btn--primary:hover {
  background: var(--nx-violet-hover);
  border-color: var(--nx-violet-hover);
}

/* Compact pill for image tiles and highlight cards — same geometry, less height. */
.na-btn--compact {
  min-height: 36px;
  padding: 0 var(--nx-gap-16);
  font-size: var(--nx-fs-caption);
}

/* Primary stays violet page-wide (same fill as ink). Weight comes from
   placement/size, not a second primary hue. */
.na-band--light .na-btn--primary {
  background: var(--nx-cta-purple, var(--nx-azure-deep));
  border-color: var(--nx-cta-purple, var(--nx-azure-deep));
  color: #ffffff;
}

.na-band--light .na-btn--primary:hover {
  background: var(--nx-violet-hover);
  border-color: var(--nx-violet-hover);
}

/* Secondary on ink: ink fill, violet label. 10.34:1. */
.na-btn--secondary {
  background: var(--nx-void);
  border-color: var(--nx-azure);
  color: var(--nx-azure);
}

.na-btn--secondary:hover {
  background: var(--nx-azure-ink);
}

.na-band--light .na-btn--secondary {
  background: transparent;
  border-color: var(--nx-text-on-light);
  color: var(--nx-text-on-light);
}

.na-band--light .na-btn--secondary:hover {
  background: var(--nx-text-on-light);
  color: #ffffff;
}

/* ------------------------------------------------------------- CTA links

   Measured 20px/400, 0.36px tracking, arrow glyph, no underline until
   hover. This is Arm's in-card call to action, distinct from a button. */

.na-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--nx-gap-10);
  font-size: var(--nx-fs-cta);
  font-weight: var(--nx-fw-regular);
  line-height: 1.4;
  letter-spacing: var(--nx-tracking-cta);
  color: var(--_accent, var(--nx-azure));
  text-decoration: none;
}

.na-cta:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.na-cta__arrow {
  flex: none;
  transition: transform var(--nx-dur-fast) var(--nx-ease);
}

.na-cta:hover .na-cta__arrow {
  transform: translateX(4px);
}

/* ------------------------------------------------------------ section head

   h2 plus optional intro paragraph. Arm left-aligns this on the ink band
   and centres it on the 3-up band. */

.na-sechead {
  display: flex;
  flex-direction: column;
  gap: var(--nx-gap-24);
  margin-block-end: var(--nx-sp-45);
}

.na-sechead--centred {
  align-items: center;
  text-align: center;
}

.na-sechead--centred .na-lede,
.na-sechead--centred .na-body {
  margin-inline: auto;
  max-width: 52ch;
}


/* Trailing action under a band, rather than a heading above one. Nothing
   follows it, so it carries no bottom margin. */
.na-sechead--tail {
  margin-block: var(--nx-sp-45) 0;
}

/* A second heading inside a band that already has one, where content does
   follow. Keeps --tail's leading space off the band above but restores the
   bottom margin, otherwise the heading collides with its own first row. */
.na-sechead--sub {
  margin-block: var(--nx-sp-60) var(--nx-sp-30);
}

/* ----------------------------------------------------------------- grids

   Measured stacking: 4-up holds to 1024, becomes 2-up at 768 (352px
   tracks measured) and 1-up below 480. The 3-up follows the same ladder
   one column down.

   Gap is 24. An earlier pass recorded 30 here; re-measuring the card rows on
   arm.com returned 24px, which is also the only figure in Arm's component
   gap set (8/12/16/24) that 30 could have been standing in for. */

.na-grid {
  display: grid;
  gap: var(--nx-gap-24);
}

.na-grid > * {
  min-width: 0;
}

.na-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.na-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.na-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Four-up / three-up → two-up at tablet. Trailing odd card spans both
   columns so nothing is orphaned. One-up only below ~480. */
@media (max-width: 63.9375rem) {
  .na-grid--4,
  .na-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .na-grid--4 > :last-child:nth-child(odd),
  .na-grid--3 > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 29.9375rem) {
  .na-grid--4,
  .na-grid--3,
  .na-grid--2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .na-grid--4 > :last-child:nth-child(odd),
  .na-grid--3 > :last-child:nth-child(odd) {
    grid-column: auto;
  }
}

/* ------------------------------------------------------------------ card

   Measured c-carousel-card: 398px wide, 24px padding, 1px solid #E5ECEB,
   zero radius, no shadow. Internal order is heading, description, CTA,
   with the CTA pinned to the bottom so a row of cards aligns its actions
   regardless of description length. */

.na-card {
  display: flex;
  flex-direction: column;
  gap: var(--nx-gap-16);
  padding: var(--nx-gap-24);
  border: 1px solid var(--_card-bd, var(--nx-line-on-light));
  border-radius: var(--nx-radius);
  background: transparent;
  box-shadow: none;
  transition: background-color var(--nx-dur-fast) var(--nx-ease);
}

/* Measured hover: the card wipes to #FAFAFA on white. On ink there is no
   equivalent light wipe, so the ink cards lift to the single elevated
   surface instead, which is the same idea on the other surface. */
.na-band--light .na-card:hover {
  background: #fafafa;
}

.na-band--ink .na-card:hover {
  background: var(--nx-navy-lift);
}

.na-card__cta {
  margin-block-start: auto;
  padding-block-start: var(--nx-gap-16);
}

/* Frameless content card. Arm's "Intelligent compute everywhere" 4-up and
   its "Leadership and vision" 3-up are the same object: a title, a
   description and an optional action, separated by the grid gutter rather
   than by a border. Measured block padding 38px. Arm centres the band
   heading above these but never the cards themselves. */
.na-icard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--nx-gap-16);
  /* Arm's measured 38px is the space under an image at the top of the card.
     These cards lead with the title, so the same padding above it would only
     widen the gap the section head already sets. It stays below, where it
     separates rows once the grid wraps. */
  padding-block: 0 var(--nx-sp-38);
}

/* Arm's card title is itself the link. It stays a heading visually: the
   anchor takes the heading's colour and gains an underline only on hover,
   so the row does not read as a list of CTAs. */
.na-icard__link {
  display: inline-flex;
  align-items: baseline;
  gap: var(--nx-gap-10);
  color: inherit;
  text-decoration: none;
}

.na-icard__link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.na-icard__link .na-cta__arrow {
  align-self: center;
}

.na-icard__link:hover .na-cta__arrow {
  transform: translateX(4px);
}

/* ------------------------------------------------------------------ hero

   Arm masthead features adopted (researched arm.com `.c-masthead` / AGI,
   Aug 2026):
   1. Full-bleed media plane (absolute cover) — not a floating sticker plate
   2. Left vignette via `--masthead-image-bg` pattern for copy legibility
   3. Copy block ~20% from top, left-aligned inside the content container
   4. Title ~80/86 desktop; lede ~24/32; eyebrow #E2E2E2
   5. Pill primary CTA (48px / radius 40) + secondary text-link pair
   6. Description width ~50% desktop; glass indicator at viewport foot
   7. Transparent nav over masthead (negative margin into header clearance)
   8. Reflective stage / controlled light falloff under the package
   9. Motions: copy fade-up, package float, stage glow breathe
   Deliberately NOT: hard text-over-die occlusion (user rejected).

   Masthead is 100svh. Rows are stage then indicator so the glass strip
   sits on the viewport foot. Inter 200 kept (Aeonik 100 optical match);
   violet CTA/progress; amber focus. */

.na-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100svh;
  margin-block-start: calc(var(--nx-header-h) * -1);
  background:
    radial-gradient(
      58% 42% at 78% 72%,
      rgb(46 58 140 / 0.55) 0%,
      rgb(27 34 64 / 0.32) 40%,
      transparent 70%
    ),
    radial-gradient(
      80% 45% at 50% 100%,
      rgb(12 18 48 / 0.9) 0%,
      #000000 62%
    ),
    linear-gradient(180deg, #070a12 0%, #000000 78%);
  color: var(--nx-text);
  --_fg: var(--nx-text);
  --_fg-body: var(--nx-text-body);
  --_fg-muted: var(--nx-text-muted);
  --_accent: var(--nx-azure);
  --_rule: var(--nx-line-strong);
  --_focus: var(--nx-amber);
  --nx-hero-dwell: 7s;
}

.na-hero__stage {
  grid-row: 1;
  display: grid;
  overflow: hidden;
}

.na-hero__slide {
  grid-area: 1 / 1;
  position: relative;
  display: grid;
  grid-template-rows: 1fr;
  min-height: min(100svh, 54rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--nx-dur) var(--nx-ease);
}

.na-hero__slide.is-active {
  opacity: 1;
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .na-hero__slide {
    transition: none;
  }

  .na-hero__media picture,
  .na-hero__glow,
  .na-hero__copy {
    animation: none !important;
  }
}

/* Full-bleed media plane — Arm `.c-masthead__…__background` cover pattern.
   Package asset is cropped/scaled so the die fills the right stage the way
   Arm's AGI raster fills its masthead — not a small sticker in empty void. */
.na-hero__media {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.na-hero__media picture {
  display: block;
  position: absolute;
  /* Overscan + right bias; stage-filling package (pre-0.4 shrink). */
  top: -16%;
  right: -19%;
  bottom: -24%;
  left: 10%;
  width: auto;
  height: auto;
  transform: scale(0.48);
  transform-origin: 62% 55%;
  animation: nx-hero-float 12s ease-in-out infinite;
}

@keyframes nx-hero-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(0.48);
  }
  50% {
    transform: translate3d(0, -0.65rem, 0) scale(0.489);
  }
}

.na-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 48%;
  filter: saturate(1.06) contrast(1.03);
}

/* Design-services FPGA slide only: dissolve the photo plate into the hero
   void. Package slide keeps an unmasked cover crop. Mask is on the img
   (not picture) so Chromium actually composites the fade. Oversized ellipse
   + edge ramps kill rectangular corners first without a circular cutout. */
.na-hero__media--fpga .na-hero__img {
  /* Slight plate darken toward hero navy; keep cyan edge light alive. */
  filter: saturate(1.12) contrast(1.06) brightness(0.9);
  -webkit-mask-image:
    radial-gradient(
      ellipse 118% 108% at 54% 48%,
      #000 28%,
      #000 46%,
      rgb(0 0 0 / 0.82) 60%,
      rgb(0 0 0 / 0.4) 74%,
      rgb(0 0 0 / 0.1) 86%,
      transparent 96%
    ),
    linear-gradient(
      90deg,
      transparent 0%,
      #000 10%,
      #000 90%,
      transparent 100%
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      #000 11%,
      #000 88%,
      transparent 100%
    );
  mask-image:
    radial-gradient(
      ellipse 118% 108% at 54% 48%,
      #000 28%,
      #000 46%,
      rgb(0 0 0 / 0.82) 60%,
      rgb(0 0 0 / 0.4) 74%,
      rgb(0 0 0 / 0.1) 86%,
      transparent 96%
    ),
    linear-gradient(
      90deg,
      transparent 0%,
      #000 10%,
      #000 90%,
      transparent 100%
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      #000 11%,
      #000 88%,
      transparent 100%
    );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-composite: source-in, source-in;
  mask-composite: intersect;
}

.na-hero__media--fpga::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 8% 4% 14% 14%;
  pointer-events: none;
  background:
    radial-gradient(
      75% 65% at 58% 52%,
      rgb(8 12 28 / 0.65) 0%,
      rgb(5 8 16 / 0.35) 52%,
      transparent 78%
    );
}

/* Reflective stage floor — curved horizon wash (Arm AGI ground plane). */
.na-hero__media::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: auto 0 0;
  height: 48%;
  pointer-events: none;
  background:
    radial-gradient(
      120% 90% at 68% 120%,
      rgb(28 36 92 / 0.75) 0%,
      rgb(10 14 36 / 0.35) 42%,
      transparent 70%
    ),
    radial-gradient(
      55% 70% at 74% 100%,
      rgb(114 51 247 / 0.28) 0%,
      transparent 62%
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      rgb(0 0 0 / 0.12) 40%,
      rgb(0 0 0 / 0.62) 100%
    );
}

/* Ambient stage glow under / behind the package. */
.na-hero__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  contain: paint;
  background:
    radial-gradient(
      52% 40% at 76% 58%,
      rgb(100 95 255 / 0.4) 0%,
      rgb(124 92 255 / 0.16) 48%,
      transparent 74%
    ),
    radial-gradient(
      90% 48% at 66% 108%,
      rgb(70 85 255 / 0.4) 0%,
      rgb(46 58 140 / 0.2) 46%,
      transparent 76%
    );
  animation: nx-hero-glow 9s ease-in-out infinite;
}

/* Curved horizon ellipse under the package (Arm AGI ground plane cue). */
.na-hero__glow::after {
  content: "";
  position: absolute;
  left: 28%;
  right: -5%;
  bottom: -18%;
  height: 42%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgb(80 90 220 / 0.28) 0%,
    rgb(40 50 140 / 0.12) 45%,
    transparent 70%
  );
  filter: blur(8px);
}

@keyframes nx-hero-glow {
  0%,
  100% {
    opacity: 0.9;
  }
  50% {
    opacity: 1;
  }
}

/* Arm left vignette — copy reads on ink; package stays clear on the right.
   Measured AGI slide: --masthead-image-bg 250deg black falloff to the left. */
.na-hero__veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(
      250deg,
      rgb(0 0 0 / 0.12) 0%,
      rgb(0 0 0 / 0.22) 55%,
      rgb(0 0 0 / 0.88) 100%
    ),
    linear-gradient(
      90deg,
      rgb(0 0 0 / 0.78) 0%,
      rgb(0 0 0 / 0.48) 30%,
      rgb(0 0 0 / 0.1) 52%,
      transparent 66%
    );
}

.na-hero__frame {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  /* Arm theme top ≈ 20% of the masthead. */
  padding-block-start: clamp(6.5rem, 18vh, 11.5rem);
  padding-block-end: 9.5rem;
}

.na-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Arm description width-desktop: 50% — keep die clear of hard occlusion. */
  max-width: min(38rem, 48%);
  text-align: start;
  animation: nx-hero-copy-in 900ms var(--nx-ease) both;
}

@keyframes nx-hero-copy-in {
  from {
    opacity: 0;
    transform: translate3d(0, 1.1rem, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.na-hero .na-hero-title {
  max-width: 16ch;
  margin: 0 0 var(--nx-gap-16);
  font-size: clamp(40px, 18.4px + 4.3vw, 80px);
  font-weight: var(--nx-fw-hero);
  line-height: 1.075; /* Arm 80/86 */
  letter-spacing: -0.5px;
  text-wrap: balance;
}

.na-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0 0 var(--nx-gap-16);
  font-size: var(--nx-fs-eyebrow-lead);
  font-weight: var(--nx-fw-regular);
  line-height: 1.25;
  letter-spacing: 0.04em;
  color: #e2e2e2; /* Arm subtitle */
}

.na-hero__eyebrow-mark {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  opacity: 0.9;
}

.na-hero__lede {
  margin: 0;
  max-width: 34rem;
  font-size: clamp(16px, 10.4px + 1.12vw, 24px);
  line-height: 1.333; /* Arm 24/32 */
  letter-spacing: 0.02em;
  color: #a6acc4;
  text-wrap: pretty;
}

.na-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--nx-gap-16);
  margin-block-start: 1.25rem; /* Arm line3 → CTA */
}

/* Arm masthead CTA: pill, 48× padding-inline 20, 16px label. */
.na-hero .na-btn--primary {
  border-radius: 40px;
  min-height: 48px;
  padding-inline: 1.25rem;
  font-size: 16px;
  letter-spacing: 0.36px;
}

.na-hero__actions .na-cta {
  color: #ffffff;
  font-size: 16px;
  letter-spacing: 0.36px;
}

.na-hero__actions .na-cta:hover {
  color: var(--nx-azure-soft);
}

/* Honesty caption — stage foot, right. */
.na-hero__credit {
  position: absolute;
  z-index: 2;
  right: max(1rem, calc((100% - var(--nx-container)) / 2));
  bottom: 6.75rem;
  margin: 0;
  max-width: 16rem;
  font-size: var(--nx-fs-caption);
  letter-spacing: var(--nx-tracking-eyebrow);
  color: color-mix(in srgb, #ffffff 68%, transparent);
  text-align: end;
  pointer-events: none;
}

.na-hero__nav {
  position: relative;
  z-index: 4;
  grid-row: 2;
  padding-block-end: var(--nx-sp-45);
  margin-block-start: -6.25rem;
}

.na-hero__controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--nx-gap-12);
}

@keyframes nx-hero-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* Indicator: measured arm.com `.c-masthead__indicator` pad 24, white-10% wash. */
.na-hero-tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  width: 100%;
  max-width: 28rem;
  margin-inline: auto;
  padding: 1.5rem;
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    rgb(255 255 255 / 0.1) -4.25%,
    rgb(230 230 233 / 0.1) 102.73%
  );
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.na-hero-tabs__tab {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  min-width: 0;
  padding: 0 0.75rem 0 0;
  border: 0;
  background: transparent;
  color: rgb(230 230 233 / 0.6);
  font-family: var(--nx-font);
  text-align: start;
  cursor: pointer;
}

.na-hero-tabs__tab:last-child {
  padding-inline: 0.75rem 0;
}

.na-hero-tabs__tab:hover {
  color: #ffffff;
}

.na-hero-tabs__track {
  display: block;
  position: relative;
  height: 4px;
  overflow: hidden;
  background: var(--nx-navy-lift);
}

.na-hero-tabs__progress {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  background: var(--nx-azure-deep);
  transform: scaleX(0);
  transform-origin: left center;
}

.na-hero-tabs__tab.is-active .na-hero-tabs__progress {
  animation: nx-hero-progress var(--nx-hero-dwell, 7s) linear forwards;
}

.na-hero-tabs__tab.is-paused .na-hero-tabs__progress,
.na-hero.is-user-paused .na-hero-tabs__tab.is-active .na-hero-tabs__progress,
.na-hero.is-offscreen .na-hero-tabs__tab.is-active .na-hero-tabs__progress {
  animation-play-state: paused;
}

.na-hero-tabs__title {
  font-size: 12px;
  font-weight: var(--nx-fw-medium);
  line-height: 18px;
  letter-spacing: 0.24px;
  color: inherit;
}

.na-hero-tabs__tab.is-active .na-hero-tabs__title {
  color: #ffffff;
}

.na-hero-tabs__desc {
  font-size: 12px;
  font-weight: var(--nx-fw-regular);
  line-height: 1.2;
  letter-spacing: 0.24px;
  color: inherit;
}

.na-hero-tabs__tab.is-active .na-hero-tabs__desc {
  color: rgb(230 230 233);
}

.na-hero__pause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid rgb(255 255 255 / 0.28);
  border-radius: 4px;
  background: rgb(8 2 37 / 0.45);
  color: #ffffff;
  font-family: var(--nx-font);
  font-size: 12px;
  font-weight: var(--nx-fw-medium);
  letter-spacing: 0.24px;
  cursor: pointer;
}

.na-hero__pause:hover {
  border-color: rgb(255 255 255 / 0.5);
}

.na-hero__pause[aria-pressed="true"] {
  background: var(--nx-azure-deep);
  border-color: var(--nx-azure-deep);
}

@media (max-width: 61.9375rem) {
  .na-hero__frame {
    padding-block-start: clamp(6.25rem, 16vh, 9.5rem);
  }

  .na-hero__copy {
    max-width: min(34rem, 52%);
  }

  .na-hero__img {
    object-position: 82% 54%;
  }

  .na-hero .na-hero-title {
    max-width: 14ch;
  }

  .na-hero .na-btn--primary {
    min-height: 40px;
    font-size: 14px;
  }
}

@media (max-width: 47.9375rem) {
  .na-hero__slide {
    min-height: auto;
    grid-template-rows: auto auto;
  }

  .na-hero__frame {
    grid-row: 1;
    padding-block-start: 5.75rem;
    padding-block-end: 0.75rem;
  }

  .na-hero__copy {
    max-width: none;
    animation-duration: 700ms;
  }

  .na-hero .na-hero-title {
    max-width: none;
    font-size: clamp(38px, 8vw, 48px);
    line-height: 1.1;
  }

  .na-hero__lede {
    font-size: var(--nx-fs-body);
    line-height: var(--nx-lh-body);
    color: #ffffff;
  }

  .na-hero__veil {
    background:
      linear-gradient(
        180deg,
        rgb(0 0 0 / 0.55) 0%,
        rgb(0 0 0 / 0.2) 42%,
        transparent 70%
      );
  }

  /* Mobile: copy above, grounded package stage below (Arm mobile crop). */
  .na-hero__media {
    position: relative;
    grid-row: 2;
    inset: auto;
    width: 100%;
    min-height: 18rem;
    height: min(58vw, 20rem);
    margin-block-end: 2.75rem;
    overflow: visible;
  }

  .na-hero__media picture {
    top: -6%;
    right: -10%;
    bottom: -15%;
    left: -10%;
    width: auto;
    height: auto;
    transform: scale(0.51);
    transform-origin: 50% 52%;
    overflow: hidden;
    clip-path: inset(0);
  }

  .na-hero__img {
    object-fit: cover;
    object-position: 55% 42%;
  }

  .na-hero__media::after {
    height: 58%;
  }

  .na-hero__glow {
    background:
      radial-gradient(
        90% 55% at 50% 90%,
        rgb(70 85 255 / 0.32) 0%,
        rgb(124 92 255 / 0.14) 42%,
        transparent 72%
      );
  }

  .na-hero__glow::after {
    left: 5%;
    right: 5%;
    bottom: -22%;
    height: 48%;
  }

  /* Credit under the stage, not over the die. */
  .na-hero__credit {
    right: auto;
    left: 50%;
    bottom: -1.75rem;
    transform: translateX(-50%);
    text-align: center;
    z-index: 3;
  }

  .na-hero__nav {
    margin-block-start: -3.5rem;
    padding-block-end: var(--nx-gap-24);
  }

  .na-hero .na-btn--primary {
    min-height: 32px;
    font-size: 12px;
    padding-inline: 1.25rem;
  }

  .na-hero__actions .na-cta {
    font-size: 14px;
  }

  .na-hero-tabs {
    max-width: none;
    gap: var(--nx-gap-12);
    padding: 0;
    border: 0;
    background: none;
    justify-content: center;
  }

  .na-hero-tabs__tab {
    gap: 0;
    padding: var(--nx-gap-12) 0;
  }

  .na-hero-tabs__tab:hover {
    color: rgb(230 230 233 / 0.6);
  }

  .na-hero-tabs__title,
  .na-hero-tabs__desc {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ------------------------------------------------------- horizontal tabs

   Measured arm.com c-horizontal-tabs (Aug 2026, "Powering tomorrow…"):
   chips 185×100, gap 21px, radius 0, icon ~55, label 18px/500.
   Active: #FFAE2D fill, ink #080225 text. Inactive: ink fill, #441F94
   border, white text. Panel ~50/50, subhead 24px, body/links 18px. */

.na-tabs {
  --na-tab-border: #441f94; /* measured inactive chip border on arm.com */
}

#position .na-sechead .na-lede {
  /* Match the sitewide section lede measure (52ch), not a narrower pocket. */
  max-width: 52ch;
}

.na-tabs__nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 21px;
  margin-block-end: var(--nx-sp-45);
}

.na-tabs__tab {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--nx-gap-10);
  box-sizing: border-box;
  width: 11.5625rem; /* 185px */
  min-height: 6.25rem; /* 100px */
  padding: 8px 12px;
  border: 1px solid var(--na-tab-border);
  border-radius: 0;
  background: transparent;
  color: #ffffff;
  font-family: var(--nx-font);
  font-size: 18px;
  font-weight: var(--nx-fw-regular);
  letter-spacing: var(--nx-tracking-cta);
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--nx-dur-fast) var(--nx-ease),
    border-color var(--nx-dur-fast) var(--nx-ease),
    color var(--nx-dur-fast) var(--nx-ease);
}

.na-tabs__icon {
  display: block;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
}

.na-tabs__tab-label {
  display: block;
}

.na-tabs__tab:hover {
  background: var(--nx-navy-lift);
}

/* Active tab uses violet family; amber reserved for focus rings. */
.na-tabs__tab[aria-selected="true"] {
  background: var(--nx-azure-deep);
  border-color: var(--nx-azure-deep);
  color: #ffffff;
  font-weight: var(--nx-fw-medium);
}

.na-tabs__tab:focus-visible {
  outline: 2px solid var(--nx-amber);
  outline-offset: 3px;
}

.na-tabs__tab[aria-selected="true"]:focus-visible {
  outline-color: #ffffff;
}

/* Without JS: every panel stacks so content stays reachable. */
.na-tabs__panels {
  display: grid;
  gap: var(--nx-sp-45);
}

.na-tabs__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--nx-gap-30);
  align-items: start;
  text-align: start;
}

/* With JS: panels share one cell — tallest wins, no layout jump. */
.na-tabs.is-enhanced .na-tabs__panels {
  gap: 0;
}

.na-tabs.is-enhanced .na-tabs__panel {
  grid-area: 1 / 1;
}

.na-tabs.is-enhanced .na-tabs__panel[hidden] {
  /* Keep in flow for equal height; UA [hidden] would be display:none. */
  display: grid;
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 63.9375rem) {
  .na-tabs__panel,
  .na-tabs.is-enhanced .na-tabs__panel[hidden] {
    grid-template-columns: minmax(0, 1fr);
  }

  .na-tabs__tab {
    width: calc(50% - 12px);
    min-width: 9.5rem;
    flex: 1 1 9.5rem;
  }
}

@media (max-width: 29.9375rem) {
  .na-tabs__nav {
    gap: 12px;
  }

  .na-tabs__tab {
    width: calc(50% - 6px);
    min-width: 0;
    min-height: 5.5rem;
    font-size: 16px;
    padding: 8px 8px;
  }

  .na-tabs__icon {
    width: 40px;
    height: 40px;
  }
}

.na-tabs__copy {
  display: flex;
  flex-direction: column;
  gap: var(--nx-gap-20);
  min-width: 0;
}

.na-tabs__heading {
  margin: 0;
  font-size: 24px;
  font-weight: var(--nx-fw-regular);
  line-height: 1.25;
  color: #ffffff;
  text-wrap: balance;
}

.na-tabs__body {
  margin: 0;
  max-width: 40ch;
  font-size: 18px;
  font-weight: var(--nx-fw-regular);
  line-height: 1.45;
  color: color-mix(in srgb, #ffffff 86%, transparent);
}

.na-tabs__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.na-tabs__links a {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 44px;
  padding-block: 0.55rem;
  color: var(--nx-azure);
  font-size: var(--nx-fs-body);
  font-weight: var(--nx-fw-regular);
  line-height: 1.4;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--nx-azure) 55%, transparent);
  text-underline-offset: 4px;
}

.na-tabs__links a::before {
  content: '';
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

.na-tabs__links a:hover {
  color: var(--nx-azure-soft);
  text-decoration-color: currentColor;
}

.na-tabs__media {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--nx-gap-12);
}

.na-tabs__media > picture,
.na-tabs__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  /* Same shared grade as plate / mosaic cards. */
  filter: saturate(1.28) contrast(1.08) brightness(1.12);
}

.na-tabs__caption {
  margin: 0;
  font-size: var(--nx-fs-body);
  font-weight: var(--nx-fw-regular);
  line-height: 1.4;
  color: color-mix(in srgb, #ffffff 72%, transparent);
}

.na-tabs__caption a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 0.55rem;
  color: var(--nx-azure);
  font-size: var(--nx-fs-body);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--nx-azure) 55%, transparent);
  text-underline-offset: 4px;
}

.na-tabs__caption a:hover {
  color: var(--nx-azure-soft);
  text-decoration-color: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  .na-tabs__tab {
    transition: none;
  }
}

/* ------------------------------------------------------------- link list

   The deep-linked index Arm renders inside its tab panels: a numbered row
   per entry, hairline separated, no card and no radius. */

.na-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.na-list__item {
  border-block-start: 1px solid var(--_rule, var(--nx-line-strong));
}

.na-list__item:last-child {
  border-block-end: 1px solid var(--_rule, var(--nx-line-strong));
}

.na-list__link {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--nx-gap-4) var(--nx-gap-16);
  padding: var(--nx-gap-16) var(--nx-gap-4);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--nx-dur-fast) var(--nx-ease);
}

.na-band--light .na-list__link:hover {
  background: #fafafa;
}

.na-band--ink .na-list__link:hover {
  background: var(--nx-navy-lift);
}

.na-list__num {
  font-size: var(--nx-fs-caption);
  font-weight: var(--nx-fw-regular);
  line-height: 1.6;
  color: var(--_accent, var(--nx-azure));
  font-variant-numeric: tabular-nums;
}

.na-list__label {
  font-size: var(--nx-fs-body);
  font-weight: var(--nx-fw-regular);
  line-height: 1.4;
  color: var(--_fg, var(--nx-text));
}

.na-list__note {
  grid-column: 2;
  font-size: var(--nx-fs-caption);
  font-weight: var(--nx-fw-regular);
  line-height: 1.5;
  color: var(--_fg-muted, var(--nx-text-muted));
}

/* ----------------------------------------------------------- status chip

   Nelix-specific and load-bearing: it is how the site states that nothing
   has been fabricated. Arm has no equivalent, so it borrows Arm's chip
   geometry (12px/500, 0.24px tracking, 4px radius) rather than inventing a
   shape. Colour comes from the -on-light twins on white bands, because
   amber measures 1.85:1 there. */

.na-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--nx-gap-10);
  padding: var(--nx-gap-4) var(--nx-gap-10);
  border: 1px solid currentColor;
  border-radius: var(--nx-radius-xs);
  font-size: var(--nx-fs-eyebrow);
  font-weight: var(--nx-fw-medium);
  letter-spacing: var(--nx-tracking-eyebrow);
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
}

.na-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  background: currentColor;
}

/* State is carried by colour AND marker silhouette, so it survives
   greyscale and every form of colour blindness. */
.na-chip--active {
  color: var(--nx-status-active-on-light);
}

.na-chip--progress {
  color: var(--nx-status-hold-on-light);
  border-style: dashed;
}

.na-chip--progress::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px currentColor;
}

.na-chip--planned {
  color: var(--nx-text-on-light-muted);
}

.na-chip--planned::before {
  width: 6px;
  height: 6px;
  background: transparent;
  box-shadow: inset 0 0 0 1px currentColor;
  transform: rotate(45deg);
}

/* On ink, the same chips take the ink twins. */
.na-band--ink .na-chip--active {
  color: var(--nx-status-active);
}

.na-band--ink .na-chip--progress {
  color: var(--nx-status-hold);
}

.na-band--ink .na-chip--planned {
  color: var(--nx-text-muted);
}

/* ------------------------------------------------------------ CTA band

   Arm's closing band is a centred heading, one line of copy and a single
   button. It carries no link list; the footer does the wayfinding. */

.na-ctaband {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--nx-gap-24);
  text-align: center;
}

/* ==========================================================================
   COMPONENT VOCABULARY

   Everything below is the reusable set the redesign brief lists, expressed
   in the same measured language as the components above: two surfaces, the
   15-based section scale, the 2/4/10/12/16/20/24/30 gap set, zero radius,
   and colour taken from the band's own --_fg / --_accent / --_rule so a
   component never needs to know which surface it is sitting on.

   Nothing here writes a literal colour, size or step.
   ========================================================================== */

/* --------------------------------------------------------------- helpers */

/* Button rows and inline action groups. */
.na-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nx-gap-16);
}

.na-cluster--centred {
  justify-content: center;
}

/* Vertical rhythm inside a column. The three steps map onto the measured
   component gaps rather than inventing a ladder. */
/* Children stretch. An earlier pass used `align-items: flex-start` so a lone
   button would not span the column, but that shrink-wraps *every* child, and
   a grid built on `repeat(auto-fit, minmax(...))` resolves to a single column
   when it is sized under a shrink-to-fit constraint. The workflow, pathway
   and card grids all collapsed to one narrow column because of it. Stretch is
   the correct default for a layout primitive; the two things that must stay
   intrinsically sized say so below. */
.na-stack {
  display: flex;
  flex-direction: column;
  gap: var(--nx-gap-24);
  align-items: stretch;
}

/* Both are inline-flex, so stretching them would produce a full-width pill. */
.na-stack > .na-btn,
.na-stack > .na-cta {
  align-self: flex-start;
}

.na-stack--sm {
  gap: var(--nx-gap-12);
}

.na-stack--lg {
  gap: var(--nx-sp-38);
}

/* A plain list stripped of its markers, used wherever the semantics want a
   list but the design does not want bullets. */
.na-bare {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ------------------------------------------------------------ responsive
                                                                     media

   One image frame for the whole site. The aspect ratio is a custom property
   so a caller can set it per placement without a new class, and the image
   fills the frame rather than dictating its height — which is what stopped
   the hero rendering correctly before `.nx-scope img` was dropped to zero
   specificity. */

.na-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--na-media-ratio, 16 / 9);
  background: var(--nx-navy-lift);
}

.na-band--light .na-media {
  background: var(--nx-wipe);
}

.na-media > img,
.na-media > svg,
.na-media > picture > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Diagram figures size themselves from their own viewBox and must not be
   given a frame — see the note on na.diagram(). This only resets the margin
   a bare <figure> carries. */
.na-diagram {
  margin: 0;
  min-width: 0;
}

/* Diagrams must not be cropped the way a photograph can be. */
.na-media--contain > img,
.na-media--contain > svg,
.na-media--contain > picture > img {
  object-fit: contain;
}

/* Status and provenance labels under a visual. Nelix is pre-silicon, so
   "illustrative", "concept" and "in development" are load-bearing copy, not
   decoration. Body colour rather than muted: this text sits over imagery in
   some placements and muted failed AA there. */
.na-figcaption {
  margin: 0;
  padding-block-start: var(--nx-gap-12);
  font-size: var(--nx-fs-caption);
  font-weight: var(--nx-fw-regular);
  line-height: 1.45;
  color: var(--_fg-body, var(--nx-text-body));
}

/* ------------------------------------------------------------ breadcrumbs

   Interior pages only. Small, quiet, and never the first thing read: the
   list is labelled so a screen reader announces it as navigation and the
   current page is marked rather than linked. */

.na-crumbs {
  margin-block-end: var(--nx-sp-20);
}

.na-crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nx-gap-10);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--nx-fs-caption);
  color: var(--_fg-muted, var(--nx-text-muted));
}

.na-crumbs__list a {
  color: inherit;
  text-decoration: none;
}

.na-crumbs__list a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.na-crumbs__sep {
  opacity: 0.5;
}

.na-crumbs__current {
  color: var(--_fg, var(--nx-text));
}

/* ------------------------------------------------------------- editorial
                                                                 statement

   The large positioning statement. One column, no card, no ornament, and a
   measure short enough that the sentence breaks where it means to. Arm sets
   these at display size against a lot of empty space; the restraint is the
   component. */

.na-editorial {
  display: flex;
  flex-direction: column;
  /* Section scale rather than a component gap: 30 under 80px type reads as a
     crowded caption. */
  gap: var(--nx-sp-45);
  /* Wide enough that a display-size sentence does not become a 1200px tower
     of single words. Restraint comes from the empty band around it, not from
     forcing the title into a 24ch chimney. */
  max-width: min(40rem, 100%);
}

.na-editorial__title {
  margin: 0;
  font-size: var(--nx-fs-display);
  font-weight: var(--nx-fw-hero);
  line-height: var(--nx-lh-display);
  letter-spacing: var(--nx-tracking-display);
  color: var(--_fg, var(--nx-text));
  text-wrap: balance;
  max-width: 18ch;
}

/* The supporting paragraph runs in a distinctly narrower column than the
   statement, so the two do not share a ragged right edge and read as one
   block. An earlier pass set 46ch intending the opposite — a wider body —
   but `ch` is measured at each element's own font size, so 46ch of 18px
   copy (519px) landed within a pixel or two of the 80px statement's wrap.
   The difference has to be structural to be legible, hence the standard
   42ch body measure against the wrapper's full 640. */
.na-editorial__body {
  max-width: 42ch;
}

.na-editorial--wide .na-editorial__title {
  max-width: 22ch;
}

@media (max-width: 47.9375rem) {
  .na-editorial__title,
  .na-editorial--wide .na-editorial__title {
    max-width: none;
  }
}

/* --------------------------------------------------------- feature rows

   The large horizontal product sections: a media column and a copy column,
   alternating sides down the page. Explicitly not cards — the brief calls
   for "large horizontal feature sections, not small cards", and the visual
   weight comes from the media size and the whitespace rather than a border.

   7/5 rather than 6/6: an even split leaves the copy column wider than its
   own measure wants and the media looking incidental. */

.na-feature {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--nx-sp-45);
  align-items: center;
}

.na-feature + .na-feature {
  margin-block-start: var(--nx-sp-90);
}

/* Homepage platform rows: a quiet status plate instead of a full animated
   diagram, so the page stays on one visual language. */
.na-platform-figure {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--nx-gap-16);
  min-height: 18rem;
  padding: var(--nx-sp-45);
  background: var(--nx-navy-lift);
  border: 1px solid var(--_rule, var(--nx-line-strong));
}

.na-band--light .na-platform-figure {
  background: var(--nx-wipe);
}

.na-platform-figure__status {
  margin: 0;
  font-size: var(--nx-fs-caption);
  font-weight: var(--nx-fw-regular);
  color: var(--_fg-muted, var(--nx-text-muted));
}

.na-platform-figure__name {
  margin: 0;
  font-size: var(--nx-fs-h3);
  font-weight: var(--nx-fw-light);
  line-height: var(--nx-lh-h3);
  color: var(--_fg, var(--nx-text));
}

.na-platform-figure__meta {
  margin: 0;
  font-size: var(--nx-fs-body);
  font-weight: var(--nx-fw-light);
  line-height: 1.4;
  color: var(--_fg-body, var(--nx-text-body));
  max-width: 28ch;
}

/* Architecture diagram on the homepage: cap height so it cannot dominate the
   band the way a full-bleed nxd figure does inside a feature row. */
.na-band .na-diagram {
  max-width: 56rem;
}

.na-band .na-diagram .nxd,
.na-band .na-diagram figure {
  max-height: 28rem;
}

/* Alternating placement. The media is first in the DOM, so flipping is a
   column-order change and the reading order stays media-then-copy on the
   narrow layout regardless of which side it took on desktop. */
.na-feature--flip .na-feature__media {
  order: 2;
}

.na-feature__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--nx-gap-24);
}

/* Pathway packed into a feature copy column cannot stay N-up. */
.na-feature__copy .na-pathway {
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: 100%;
}

@media (max-width: 63.9375rem) {
  .na-feature {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--nx-gap-30);
  }

  .na-feature--flip .na-feature__media {
    order: 0;
  }

  .na-feature + .na-feature {
    margin-block-start: var(--nx-sp-45);
  }
}

/* ------------------------------------------------------ solution section

   Industry blocks. Same bones as a feature row but with a structured body:
   the constraint, the response, and the products and services that apply.
   The brief is explicit that the homepage carries no large paragraphs here,
   so the copy slots are short and the lists do the work. */

.na-solution {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--nx-sp-45);
  align-items: start;
  padding-block: var(--nx-sp-45);
  border-block-start: 1px solid var(--_rule, var(--nx-line-strong));
}

.na-solution:first-child {
  border-block-start: 0;
  padding-block-start: 0;
}

.na-solution__body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--nx-gap-30);
}

.na-solution__slot {
  display: flex;
  flex-direction: column;
  gap: var(--nx-gap-10);
}

/* The slot label. Small, uppercase-free — Arm sets these as quiet labels
   rather than shouted headers, and the brief bans excessive all caps. */
.na-solution__label {
  margin: 0;
  font-size: var(--nx-fs-caption);
  font-weight: var(--nx-fw-medium);
  line-height: 1.4;
  color: var(--_fg-muted, var(--nx-text-muted));
}

@media (max-width: 63.9375rem) {
  .na-solution {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--nx-gap-30);
  }
}

@media (max-width: 29.9375rem) {
  .na-solution__body {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* -------------------------------------------------------------- pathway

   The education-to-employment chain, and any other ordered progression.
   Numbered, connected by a rule, and an <ol> underneath so the order is
   real rather than implied by layout.

   The connector is drawn on the step rather than between steps so it
   cannot survive a wrap and leave a rule pointing into empty space. */

/* Three shared rows — marker, name, description — so a step whose name wraps
   to two lines does not push its own description a line below its neighbours'.
   Without the subgrid the row reads as ragged rather than tabular, which is
   the one thing a numbered progression cannot afford. */
.na-pathway {
  display: grid;
  grid-template-columns: repeat(var(--na-pathway-cols, 5), minmax(0, 1fr));
  grid-auto-rows: auto;
  /* A subgrid takes its row gap from this parent, so the two axes are set
     separately: 24 between steps across, 12 between a step's own three rows.
     When the grid wraps to two columns the 12 also lands between stacked
     steps, where the hairline and the 20px lead-in carry the separation. */
  column-gap: var(--nx-gap-24);
  row-gap: var(--nx-gap-12);
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: na-pathway;
}

.na-pathway__step {
  position: relative;
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  padding-block-start: var(--nx-sp-20);
  border-block-start: 1px solid var(--_rule, var(--nx-line-strong));
  counter-increment: na-pathway;
}

/* The marker is generated from the counter so the numbering cannot drift
   out of step with the DOM order the way a hand-written index does. */
.na-pathway__step::before {
  content: counter(na-pathway, decimal-leading-zero);
  font-size: var(--nx-fs-caption);
  font-weight: var(--nx-fw-medium);
  letter-spacing: var(--nx-tracking-eyebrow);
  color: var(--_accent, var(--nx-azure));
}

.na-pathway--unnumbered .na-pathway__step::before {
  content: none !important;
  display: none;
}

.na-pathway--unnumbered .na-pathway__step {
  padding-block-start: var(--nx-gap-12);
}

.na-pathway__name {
  display: block;
  margin: 0;
  font-size: var(--nx-fs-h4);
  font-weight: var(--nx-fw-medium);
  line-height: var(--nx-lh-h4);
  color: var(--_fg, var(--nx-text));
}

/* Avoid orphan half-row at tablet: wrap to single column below 4-up. */
@media (max-width: 63.9375rem) {
  .na-pathway {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------- workflow

   The design-services chain. Longer than a pathway and read as a sequence
   of stages rather than a set of steps, so it runs as a horizontal band of
   narrow columns and wraps rather than scrolling. */

.na-workflow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-auto-rows: auto;
  gap: var(--nx-gap-16);
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: na-workflow;
}

/* Two-up from tablet through mobile; odd final stage spans the row. */
@media (max-width: 63.9375rem) {
  .na-workflow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .na-workflow__stage:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* Two shared rows, so "RTL and IP integration" wrapping to two lines does not
   leave the stage names either side of it sitting a line higher. These are
   bordered boxes, so they already stretch to equal height — the subgrid is
   what aligns the text inside them. Its row gap comes from the parent's 16,
   which is why no gap is declared here. */
.na-workflow__stage {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  padding: var(--nx-gap-16);
  border: 1px solid var(--_card-bd, var(--nx-line-on-light));
  counter-increment: na-workflow;
}

.na-workflow__stage::before {
  content: counter(na-workflow, decimal-leading-zero);
  font-size: var(--nx-fs-caption);
  font-weight: var(--nx-fw-medium);
  color: var(--_accent, var(--nx-azure));
}

.na-workflow__name {
  display: block;
  margin: 0;
  font-size: var(--nx-fs-body);
  font-weight: var(--nx-fw-medium);
  line-height: 1.3;
  color: var(--_fg, var(--nx-text));
}

/* -------------------------------------------------------------- metrics

   A strip of figures. Nelix is pre-silicon, so the empty state is the
   normal state: a metric with no verified value renders an em-dash and an
   explicit "not yet reported" note rather than a zero, which would be a
   claim. Never populate these with invented numbers. */

.na-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--nx-gap-24);
  margin: 0;
}

.na-metric {
  display: flex;
  flex-direction: column;
  gap: var(--nx-gap-4);
  padding-block: var(--nx-sp-20);
  border-block-start: 1px solid var(--_rule, var(--nx-line-strong));
}

.na-metric__value {
  margin: 0;
  font-size: var(--nx-fs-h2);
  font-weight: var(--nx-fw-light);
  line-height: 1.1;
  color: var(--_fg, var(--nx-text));
}

/* The placeholder dash is quieter than a real figure would be, so an empty
   dashboard does not read as a wall of confident numbers. */
.na-metric__value--empty {
  color: var(--_fg-muted, var(--nx-text-muted));
}

.na-metric__label {
  margin: 0;
  font-size: var(--nx-fs-caption);
  font-weight: var(--nx-fw-regular);
  line-height: 1.4;
  color: var(--_fg-body, var(--nx-text-body));
}

.na-metric__note {
  margin: 0;
  font-size: var(--nx-fs-caption);
  color: var(--_fg-muted, var(--nx-text-muted));
}

/* ------------------------------------------------------- partner grid

   Categories Nelix is open to — not logos, not claimed relationships.
   Four-column CSS grid: a final row of three left-aligns under columns
   1–3 (no centred half-column stagger). One shared accent
   (--nx-azure-deep / #7233f7) on every card — top rule, numeral, action —
   so the set reads as one family. Text-led; not a third image-card pattern.

   Motion (Arm-measured tokens): --nx-dur-fast 180ms, --nx-ease
   cubic-bezier(0.22, 0.61, 0.36, 1). Hover wipe surface is --nx-wipe
   (#FAFAFA), measured on Arm c-carousel-card. Only transform + opacity
   are transitioned. */

.na-partners {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--nx-gap-24);
  list-style: none;
  margin: var(--nx-sp-45) 0 0;
  padding: 0;
  justify-items: stretch;
  align-items: stretch;
}

.na-partner {
  min-width: 0;
  display: flex;
  height: 100%;
}

.na-partner__link,
.na-partner__inner {
  --na-partner-accent: var(--nx-azure-deep); /* #7233f7 — one accent for the set */
  position: relative;
  isolation: isolate;
  /* meta / status / title / body / action — equal tracks across the set */
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: var(--nx-gap-12);
  box-sizing: border-box;
  width: 100%;
  min-height: 100%;
  padding: var(--nx-sp-30) var(--nx-sp-24) var(--nx-sp-30);
  border: 1px solid var(--nx-line-on-light); /* #E5ECEB measured Arm hairline */
  border-block-start: 0;
  background: var(--na-partner-surface, var(--nx-white));
  color: inherit;
  text-decoration: none;
  overflow: hidden;
}

/* Open-to category cards (na.partners macro): pale cool surface so white
   cards lift off light bands. Named collaborations keep the base white plate. */
.na-partners:not(.na-partners--named) {
  --na-partner-surface: var(--nx-wipe);
}

.na-band--ink .na-partners:not(.na-partners--named) {
  --na-partner-surface: var(--nx-white);
}

/* Hover wipe steps one shade cooler when the resting surface is already wipe. */
.na-band--light .na-partners:not(.na-partners--named) .na-partner__link::before {
  background: var(--_field-bg);
}

/* Soft Arm wipe via opacity (not background-color animation). */
.na-partner__link::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--nx-wipe); /* #FAFAFA */
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--nx-dur-fast) var(--nx-ease);
}

/* Accent rule grows on hover — one shared colour, no rainbow. */
.na-partner__link::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 2;
  height: 3px;
  background: var(--na-partner-accent);
  transform: scaleX(0.28);
  transform-origin: left center;
  transition: transform var(--nx-dur-fast) var(--nx-ease);
}

.na-partner__inner::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 2;
  height: 3px;
  background: var(--na-partner-accent);
}

.na-partner__link > *,
.na-partner__inner > * {
  position: relative;
  z-index: 1;
}

.na-partner__link {
  cursor: pointer;
  transition: transform var(--nx-dur-fast) var(--nx-ease),
    border-color var(--nx-dur-fast) var(--nx-ease);
}

.na-partner__link:hover,
.na-partner__link:focus-visible {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--na-partner-accent) 28%, var(--nx-line-on-light));
}

.na-partner__link:hover::before,
.na-partner__link:focus-visible::before {
  opacity: 1;
}

.na-partner__link:hover::after,
.na-partner__link:focus-visible::after {
  transform: scaleX(1);
}

.na-partner__link:focus-visible {
  outline: 2px solid var(--na-partner-accent);
  outline-offset: 3px;
}

/* Static: same white surface + same accent rule; no hover motion. */
.na-partner__inner {
  cursor: default;
}

.na-partner__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nx-gap-12);
  min-height: 1.5rem;
}

.na-partner__num {
  margin: 0;
  font-size: var(--nx-fs-caption);
  font-weight: var(--nx-fw-medium);
  letter-spacing: var(--nx-tracking-eyebrow);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  color: var(--na-partner-accent); /* 5.94:1 on white — AA */
}

.na-partner__icon {
  display: inline-flex;
  flex: none;
  color: var(--na-partner-accent);
  opacity: 0.88;
}

.na-partner__icon .nx-i {
  display: block;
}

.na-partner__status {
  margin: 0;
  font-size: var(--nx-fs-caption);
  font-weight: var(--nx-fw-regular);
  letter-spacing: var(--nx-tracking-eyebrow);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--nx-text-muted-on-light, rgba(0, 0, 0, 0.62));
}

.na-partner__name {
  margin: 0;
  min-height: calc(2 * var(--nx-lh-h4) * var(--nx-fs-h4));
  font-size: clamp(1.125rem, 0.4vw + 1rem, 1.35rem);
  font-weight: var(--nx-fw-medium);
  line-height: var(--nx-lh-h4);
  letter-spacing: var(--nx-tracking-heading, -0.01em);
  color: var(--nx-text-on-light);
  text-wrap: balance;
}

.na-partner__body {
  margin: 0;
  align-self: start;
  min-height: calc(3 * 1.45 * var(--nx-fs-body));
  font-size: var(--nx-fs-body);
  font-weight: var(--nx-fw-light);
  line-height: 1.45;
  color: var(--nx-text-on-light-muted);
}

.na-partner__action {
  display: inline-flex;
  align-items: center;
  gap: var(--nx-gap-4);
  min-height: 1.25rem;
  padding-block-start: var(--nx-gap-8);
  border-block-start: 1px solid var(--nx-line-on-light);
  font-size: var(--nx-fs-caption);
  font-weight: var(--nx-fw-medium);
  letter-spacing: var(--nx-tracking-eyebrow);
  line-height: 1.4;
  color: var(--na-partner-accent);
}

.na-partner__action--static {
  color: var(--nx-text-muted-on-light, rgba(0, 0, 0, 0.55));
  font-weight: var(--nx-fw-regular);
}

.na-partner__link .na-cta__arrow {
  transition: transform var(--nx-dur-fast) var(--nx-ease);
}

.na-partner__link:hover .na-cta__arrow,
.na-partner__link:focus-visible .na-cta__arrow {
  transform: translateX(4px);
}

/* Short final rows stay left-aligned under tracks 1–3 (7-card set = 4+3).
   Do not stretch a trailing singleton across the full grid. */
.na-partners > :last-child:nth-child(4n + 1) {
  grid-column: auto;
}

@media (max-width: 63.9375rem) {
  .na-partners {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--nx-gap-16);
  }
}

@media (max-width: 29.9375rem) {
  .na-partners {
    grid-template-columns: minmax(0, 1fr);
  }

  .na-partner__name {
    min-height: 0;
  }

  .na-partner__body {
    min-height: 0;
  }
}

/* --------------------------------------------------------- resource
                                                              feature

   The featured white paper: one large item beside a short list of smaller
   supporting ones. */

.na-resource {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--nx-sp-45);
  align-items: start;
}

.na-resource__lead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--nx-gap-24);
}

/* The name of the work itself, between the eyebrow and the headline that
   describes it. It was reusing the muted `na-solution__label`, which put two
   near-identical grey kickers on top of each other. It is a title, so it sits
   in the foreground colour at body size. */
.na-resource__title {
  margin: 0;
  font-size: var(--nx-fs-body);
  font-weight: var(--nx-fw-medium);
  line-height: var(--nx-lh-body);
  color: var(--_fg, var(--nx-text));
}

.na-resource__aside {
  display: flex;
  flex-direction: column;
  gap: var(--nx-gap-24);
}

.na-resource__item {
  display: flex;
  flex-direction: column;
  gap: var(--nx-gap-10);
  padding-block-start: var(--nx-gap-24);
  border-block-start: 1px solid var(--_rule, var(--nx-line-strong));
}

.na-resource__item:first-child {
  padding-block-start: 0;
  border-block-start: 0;
}

@media (max-width: 63.9375rem) {
  .na-resource {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--nx-gap-30);
  }
}

/* ------------------------------------------------------------ two-column
                                                                 split

   Developer / academic ecosystem and anywhere else two peer audiences are
   addressed side by side. Equal columns, because neither is subordinate. */

.na-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--nx-sp-45);
  align-items: start;
}

.na-split__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--nx-gap-24);
}

@media (max-width: 47.9375rem) {
  .na-split {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--nx-sp-38);
  }
}

/* ---------------------------------------------- university partnership

   Homepage section 6 and the dedicated university page share this shell so
   the two cannot drift. The capability grid and pathway already exist; this
   only sets the rhythm between them and the CTA cluster. */

.na-university {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--nx-sp-45);
}

.na-university > .na-sechead {
  margin-block-end: 0;
}

.na-university__pathway {
  width: 100%;
  padding-block-start: var(--nx-gap-12);
}

/* Follow-on blocks inside a band (pathway, CTA cluster after a card row). */
.na-section-follow {
  margin-block-start: var(--nx-sp-45);
  width: 100%;
}

/* -------------------------------------------------------------- label chip

   Category label on mosaic tiles (Arm's green market chip, in our palette).
   Distinct from `.na-chip`, which carries honest product status. */

.na-label {
  display: inline-flex;
  align-items: center;
  padding: var(--nx-gap-4) var(--nx-gap-10);
  border-radius: var(--nx-radius-xs);
  background: color-mix(in srgb, #000000 55%, transparent);
  border: 1px solid color-mix(in srgb, #ffffff 28%, transparent);
  color: #e8fff4;
  font-size: var(--nx-fs-eyebrow);
  font-weight: var(--nx-fw-medium);
  letter-spacing: var(--nx-tracking-eyebrow);
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
}

.na-band--light .na-label {
  background: color-mix(in srgb, #080225 72%, transparent);
  border-color: color-mix(in srgb, #ffffff 20%, transparent);
  color: #e8fff4;
}

/* ------------------------------------------------------ Arm plate cards

   Measured against arm.com "Latest highlights" (Aug 2026):
   image top with no overlay text; solid black plate below; centred heading,
   body and primary pill CTA (48px / 16px / #7233f7); square corners; no
   shadow; equal-height plates so CTAs share a baseline. */

.na-pcard {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
  background: #000000;
  color: #ffffff;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.na-pcard__media {
  aspect-ratio: var(--na-media-ratio, 3 / 2);
  overflow: hidden;
  background: #0a0a0a;
}

/* Illustrative-render credit. Sits between media and plate so aspect-ratio
   overflow cannot clip it. Body-sized caption colour on the shared black card. */
.na-pcard__caption {
  margin: 0;
  padding: var(--nx-gap-12) var(--nx-sp-20) 0;
  background: #000000;
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--nx-fs-caption);
  font-weight: var(--nx-fw-regular);
  line-height: 1.45;
  text-align: center;
}

.na-pcard__media > picture {
  display: block;
  width: 100%;
  height: 100%;
}

.na-pcard__media > img,
.na-pcard__media > picture > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Base tasteful lift — same family as .na-mtile, not neon. */
  filter: saturate(1.28) contrast(1.06) brightness(1.1);
}

.na-pcard:hover .na-pcard__media img,
.na-pcard:hover .na-pcard__media picture > img {
  transform: scale(1.02);
}

.na-pcard__media img,
.na-pcard__media picture > img {
  transition: transform var(--nx-dur-mid) var(--nx-ease);
}

.na-pcard__plate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--nx-gap-16);
  /* Use real 15-based tokens only (--nx-sp-32/24/28 do not exist). */
  padding: var(--nx-sp-30) var(--nx-sp-20) var(--nx-sp-30);
  text-align: center;
  flex: 1 1 auto;
  background: #000000;
  /* White on black: well above AA for body and headings. */
  color: #ffffff;
}

.na-pcard__label {
  margin: 0;
  min-height: 1.25em;
  font-size: var(--nx-fs-caption);
  font-weight: var(--nx-fw-regular);
  letter-spacing: var(--nx-tracking-eyebrow);
  text-transform: uppercase;
  color: color-mix(in srgb, #ffffff 72%, transparent);
}

.na-pcard__title {
  margin: 0;
  min-height: calc(2 * var(--nx-lh-h4, 1.083) * var(--nx-fs-h4));
  font-size: var(--nx-fs-h4);
  font-weight: var(--nx-fw-medium);
  line-height: var(--nx-lh-h4, 1.083);
  color: #ffffff;
  text-wrap: balance;
}

.na-pcard__body {
  margin: 0;
  max-width: 32ch;
  min-height: calc(3 * 1.45 * var(--nx-fs-body));
  font-size: var(--nx-fs-body);
  font-weight: var(--nx-fw-light);
  line-height: 1.45;
  /* ~#C7C7C7 on #000 ≈ 11:1, AA for body. */
  color: color-mix(in srgb, #ffffff 78%, transparent);
}

.na-pcard__cta {
  margin-block-start: auto;
  padding-block-start: var(--nx-gap-12);
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Full Arm primary pill: height fixed, width follows label (Arm behaviour). */
.na-pcard__cta .na-btn {
  min-height: 48px;
  min-width: 0;
  padding: 0 var(--nx-sp-20);
  font-size: var(--nx-fs-btn);
  font-weight: var(--nx-fw-regular);
  letter-spacing: var(--nx-tracking-cta);
}

.na-pcard__cta .na-btn--primary,
.na-band--light .na-pcard__cta .na-btn--primary {
  background: var(--nx-cta-purple, var(--nx-azure-deep));
  border-color: var(--nx-cta-purple, var(--nx-azure-deep));
  color: #ffffff;
}

/* Hover must follow the light-band rest rule or equal-specificity loses. */
.na-pcard__cta .na-btn--primary:hover,
.na-band--light .na-pcard__cta .na-btn--primary:hover {
  background: var(--nx-violet-hover);
  border-color: var(--nx-violet-hover);
}

.na-pcard-row {
  width: 100%;
  align-items: stretch;
}

/* Pillars sit on a white band; plates stay black as intentional contrast.
   One shared image grade page-wide — no per-card hue-rotate / brightness. */
#pillars .na-pcard {
  outline: 1px solid color-mix(in srgb, var(--nx-void) 12%, transparent);
}

.na-pcard__media img,
.na-pcard__media picture > img {
  filter: saturate(1.28) contrast(1.08) brightness(1.12);
  object-position: 50% 50%;
}

#architecture .na-pcard__body {
  max-width: 30ch;
  min-height: calc(3 * 1.45 * var(--nx-fs-body));
}

@media (max-width: 47.9375rem) {
  .na-pcard__plate {
    padding: var(--nx-sp-20) var(--nx-sp-15) var(--nx-sp-30);
  }

  .na-pcard__title {
    min-height: 0;
  }
}

/* Legacy aliases from the earlier hcard / tile names. */
.na-hcard,
.na-tile {
  /* Intentionally empty: plate macros emit .na-pcard. */
}

/* ----------------------------------------------- Arm market mosaic tiles

   Scrim-on-image product grid (arm.com "Intelligent compute everywhere").
   Measured from arm.com market tiles (Aug 2026): soft bottom-only gradient
   (~45% clear, then ~0.35→0.75 black), solid teal category pill with dark
   text (~12px / 500, 6×12 padding, full pill radius), ~26–28px regular-weight
   headline, ~28–32px inset padding, image zoom ~1.08 on hover. Distinct from
   .na-pcard plate cards. */

.na-mtile {
  --na-mtile-chip: #5ad6c4;
  --na-mtile-chip-ink: #0b1f24;
  position: relative;
  display: block;
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
  aspect-ratio: var(--na-media-ratio, 4 / 3);
  color: #ffffff;
  text-decoration: none;
  isolation: isolate;
  background: #121212;
}

.na-mtile__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.na-mtile__media > picture {
  display: block;
  width: 100%;
  height: 100%;
}

.na-mtile__media > img,
.na-mtile__media > picture > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Tasteful grade: lift saturation/brightness so night assets read colourful
     without inventing photography. Does not imply fabricated product shots. */
  filter: saturate(1.28) contrast(1.06) brightness(1.1);
  transform: scale(1);
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.na-mtile__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Full copy-band coverage so status/chip text clears AA on bright crops
     (e.g. TrustCore heatsink glow). Structural — not a per-asset darken. */
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.22) 0%,
    rgba(0, 0, 0, 0.18) 36%,
    rgba(0, 0, 0, 0.42) 62%,
    rgba(0, 0, 0, 0.78) 100%
  );
  pointer-events: none;
}

.na-mtile__copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 0.7rem;
  box-sizing: border-box;
  height: 100%;
  padding: 1.75rem 1.75rem 1.85rem;
}

.na-mtile__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
}

.na-mtile__chip {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  border: 0;
  border-radius: 999px;
  background: var(--na-mtile-chip);
  color: var(--na-mtile-chip-ink);
  font-size: var(--nx-fs-caption);
  font-weight: var(--nx-fw-medium);
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.na-mtile__status {
  margin: 0;
  color: color-mix(in srgb, #ffffff 88%, transparent);
  font-size: var(--nx-fs-caption);
  font-weight: var(--nx-fw-regular);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
}

.na-mtile__title {
  margin: 0;
  max-width: 22ch;
  font-size: var(--nx-fs-h4);
  font-weight: var(--nx-fw-medium);
  line-height: var(--nx-lh-h4);
  color: #ffffff;
  text-wrap: balance;
  overflow-wrap: anywhere;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.na-mtile__cta {
  min-height: 44px;
  margin-block-start: 0.15rem;
  pointer-events: none;
  opacity: 1;
}

.na-mtile-grid {
  width: 100%;
}

/* Hover / focus: image scale only. CTA stays visible at rest. */
@media (hover: hover) and (pointer: fine) {
  .na-mtile:hover .na-mtile__media img,
  .na-mtile:hover .na-mtile__media picture > img,
  .na-mtile:focus-visible .na-mtile__media img,
  .na-mtile:focus-visible .na-mtile__media picture > img {
    transform: scale(1.08);
  }
}

/* Dark plate surface: one inset ring; suppress the band-level outline. */
.na-band .na-mtile:focus-visible,
.na-band--ink .na-mtile:focus-visible,
.na-band--light .na-mtile:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--_focus-on-dark, var(--nx-amber));
}

@media (max-width: 47.9375rem) {
  .na-mtile__copy {
    padding: 1.35rem 1.35rem 1.45rem;
  }
}

@media (max-width: 29.9375rem) {
  .na-mtile {
    min-height: 17.5rem;
  }

  .na-mtile__copy {
    gap: 0.55rem;
    padding: 1.15rem 1.15rem 1.25rem;
  }

  .na-mtile__title {
    font-size: 1.2rem;
    max-width: 24ch;
  }
}

/* Platform feature media: let photographs fill the column. */
.na-feature__media .na-media {
  width: 100%;
}

.na-feature__media .na-figcaption {
  color: var(--_fg-muted, var(--nx-text-muted));
}

/* --------------------------------------------------------------- tags

   Short application and capability labels. A list, not a row of buttons —
   these are not interactive and must not look as though they are. */

.na-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nx-gap-10);
  list-style: none;
  margin: 0;
  padding: 0;
}

.na-tag {
  padding: var(--nx-gap-4) var(--nx-gap-12);
  border: 1px solid var(--_rule, var(--nx-line-strong));
  font-size: var(--nx-fs-caption);
  line-height: 1.6;
  color: var(--_fg-body, var(--nx-text-body));
}

/* ----------------------------------------------------------- chip lists

   Compact topic labels for programme area inventories. Not status chips,
   not pills with fill: quiet bordered tokens on a wrapping flex row. */

.na-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nx-gap-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.na-chip-list__item {
  margin: 0;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--_rule, var(--nx-line-strong));
  color: var(--_fg-body, var(--nx-text-body));
  font-size: var(--nx-fs-caption);
  line-height: 1.3;
}

/* -------------------------------------------------------------- fields

   Shared text inputs / selects / textareas for na bands and light panels.
   Borders follow --_field-bd (set per surface above). Never use
   --nx-line-strong as a light-surface field border — it is white@13%. */

.na-field {
  display: grid;
  gap: var(--nx-gap-8);
  min-width: 0;
  position: relative;
  overflow: visible;
}

.na-field > label,
.na-field__label {
  font-size: var(--nx-fs-caption);
  font-weight: var(--nx-fw-medium);
  letter-spacing: var(--nx-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--_fg-muted, var(--nx-text-muted));
}

.na-field__req {
  color: var(--_accent, var(--nx-violet));
  margin-inline-start: 0.2em;
}

.na-field input,
.na-field select,
.na-field textarea,
.na-field .form-control,
.na-field .form-input {
  width: 100%;
  min-width: 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--_field-bd, var(--_rule, var(--nx-line-on-light)));
  border-radius: 0;
  background-color: var(--_field-bg, color-mix(in srgb, var(--_fg, #fff) 6%, transparent));
  color: var(--_fg, var(--nx-text));
  font-family: inherit;
  font-size: var(--nx-fs-body);
  font-weight: var(--nx-fw-light);
  line-height: 1.4;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.na-field textarea {
  min-height: 9rem;
  resize: vertical;
}

.na-field input::placeholder,
.na-field textarea::placeholder {
  color: var(--_fg-muted, var(--nx-text-muted));
}

.na-field input:focus,
.na-field select:focus,
.na-field textarea:focus {
  outline: none;
  border-color: var(--_accent, var(--nx-violet));
  background-color: var(--_field-bg-focus, var(--_field-bg, transparent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--_accent, #7233f7) 22%, transparent);
}

.na-field input[aria-invalid="true"],
.na-field select[aria-invalid="true"],
.na-field textarea[aria-invalid="true"],
.na-field .is-invalid,
.na-field .form-input-error {
  border-color: #c45b4a;
}

.na-field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3 5.25 7 9.25l4-4' stroke='%23a3a8ae' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 14px 14px;
  padding-inline-end: 2.75rem;
  cursor: pointer;
}

.na-field select:focus,
.na-field select:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3 5.25 7 9.25l4-4' stroke='%237233f7' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 14px 14px;
}

/* Native <option> colours are unreliable on Windows/Chrome (dark-on-dark
   popup). Prefer the custom .na-select listbox below; keep these as a
   fallback when JS is off. */
.na-band--ink .na-field select {
  color-scheme: dark;
}

.na-band--light .na-field select {
  color-scheme: light;
}

.na-field select option {
  background-color: #151038;
  color: #ffffff;
}

.na-band--light .na-field select option {
  background-color: #ffffff;
  color: #080225;
}

/* Custom select — reliable option contrast on ink and light bands. */
.na-select {
  position: relative;
  width: 100%;
  min-width: 0;
}

.na-select[data-open="true"] {
  z-index: 40;
}

.na-select__native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  appearance: none !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none;
}

.na-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0.85rem 2.75rem 0.85rem 1rem;
  border: 1px solid var(--_field-bd, var(--_rule, var(--nx-line-on-light)));
  border-radius: 0;
  background-color: var(--_field-bg, color-mix(in srgb, var(--_fg, #fff) 6%, transparent));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3 5.25 7 9.25l4-4' stroke='%23a3a8ae' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 14px 14px;
  color: var(--_fg, var(--nx-text));
  font-family: inherit;
  font-size: var(--nx-fs-body);
  font-weight: var(--nx-fw-light);
  line-height: 1.4;
  text-align: start;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.na-select__trigger[data-placeholder="true"] {
  color: var(--_fg-muted, var(--nx-text-muted));
}

.na-select__trigger:hover,
.na-select__trigger:focus,
.na-select[data-open="true"] .na-select__trigger {
  outline: none;
  border-color: var(--_accent, var(--nx-violet));
  background-color: var(--_field-bg-focus, var(--_field-bg, transparent));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3 5.25 7 9.25l4-4' stroke='%237233f7' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 14px 14px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--_accent, #7233f7) 22%, transparent);
}

.na-select__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.na-select__list {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 0.25rem);
  z-index: 50;
  display: none;
  margin: 0;
  padding: 0.35rem 0;
  list-style: none;
  max-height: min(18rem, 55vh);
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid color-mix(in srgb, #ffffff 18%, transparent);
  background-color: #151038;
  color: #ffffff;
  box-shadow: 0 12px 32px color-mix(in srgb, #080225 55%, transparent);
}

.na-select[data-open="true"] .na-select__list {
  display: block;
}

.na-band--light .na-select__list {
  border-color: #c8cdd3;
  background-color: #ffffff;
  color: #080225;
  box-shadow: 0 12px 28px color-mix(in srgb, #080225 14%, transparent);
}

.na-select__option {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.7rem 1rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: var(--nx-fw-light);
  line-height: 1.35;
  text-align: start;
  cursor: pointer;
}

.na-select__option:hover,
.na-select__option:focus,
.na-select__option[aria-selected="true"] {
  outline: none;
  background-color: color-mix(in srgb, #7233f7 28%, #151038);
  color: #ffffff;
}

.na-band--light .na-select__option:hover,
.na-band--light .na-select__option:focus,
.na-band--light .na-select__option[aria-selected="true"] {
  background-color: color-mix(in srgb, #7233f7 14%, #ffffff);
  color: #080225;
}

.na-select__option[data-placeholder="true"] {
  color: color-mix(in srgb, #ffffff 55%, transparent);
}

.na-band--light .na-select__option[data-placeholder="true"] {
  color: color-mix(in srgb, #080225 50%, transparent);
}

.na-field__error,
.na-field .invalid-feedback,
.na-field .form-error {
  display: block;
  margin: 0;
  font-size: var(--nx-fs-caption);
  color: #c45b4a;
}

.na-field__help {
  margin: 0;
  font-size: var(--nx-fs-caption);
  color: var(--_fg-muted, var(--nx-text-muted));
}

/* Auth white panels sit on ink chrome outside .na-band--light; give them
   the same light field tokens so shared .na-field rules stay visible. */
.na-auth__panel {
  --_rule: var(--nx-line-on-light);
  --_fg: var(--nx-text-on-light);
  --_fg-body: var(--nx-text-on-light);
  --_fg-muted: var(--nx-text-on-light-muted);
  --_accent: var(--nx-violet);
  --_field-bd: #aeb6bf;
  --_field-bg: #f0f2f5;
  --_field-bg-focus: #ffffff;
  /* Global --nx-text-* tokens are dark-theme (light ink). Remap here too so
     any rule that still references them stays readable on the white panel. */
  --nx-text-body: #3d4654;
  --nx-text-muted: var(--nx-text-on-light-muted);
}

/* -------------------------------------------------------------- focus

   Ring keyed to the local surface, not the band: black plates always use
   amber (10.85:1 on void); light UI chrome uses blue. */

.na-band--ink,
.na-hero {
  --_focus: var(--nx-amber);
  --_focus-on-dark: var(--nx-amber);
}

.na-band--light {
  --_focus: var(--nx-blue-deep);
  --_focus-on-dark: var(--nx-amber);
}

.na-pcard,
.na-mtile {
  --_focus: var(--_focus-on-dark, var(--nx-amber));
}

.na-band :focus-visible,
.na-hero :focus-visible {
  outline: 2px solid var(--_focus, var(--nx-amber));
  outline-offset: 3px;
}

.na-band .na-pcard:focus-visible,
.na-band .na-pcard a:focus-visible,
.na-band .na-pcard button:focus-visible {
  outline-color: var(--_focus-on-dark, var(--nx-amber));
}

/* -------------------------------------------------------------- motion

   Every reduced-motion concession lives here, in one block, so there is a
   single place to check that nothing moves when the user has asked for
   stillness. The carousel stops auto-advancing entirely under this query
   (nx-hero-carousel.js returns before arming progress), so the active tab's
   bar is pinned full rather than sweeping, and slides swap on click only. */

@media (prefers-reduced-motion: reduce) {
  .na-hero__slide,
  .na-hero-tabs__progress,
  .na-cta__arrow,
  .na-pcard__media img,
  .na-pcard__media picture > img,
  .na-mtile__media img,
  .na-mtile__media picture > img,
  .na-mtile__cta,
  .na-partner__link,
  .na-partner__link::before,
  .na-partner__link::after,
  .na-partner__link .na-cta__arrow,
  .na-field input,
  .na-field select,
  .na-field textarea {
    transition: none;
  }

  .na-partner__link:hover,
  .na-partner__link:focus-visible {
    transform: none;
  }

  .na-partner__link:hover::before,
  .na-partner__link:focus-visible::before {
    opacity: 1; /* end-state wipe, no motion */
  }

  .na-partner__link:hover::after,
  .na-partner__link:focus-visible::after {
    transform: scaleX(1);
  }

  .na-partner__link:hover .na-cta__arrow,
  .na-partner__link:focus-visible .na-cta__arrow {
    transform: none;
  }

  .na-pcard:hover .na-pcard__media img,
  .na-pcard:hover .na-pcard__media picture > img,
  .na-mtile:hover .na-mtile__media img,
  .na-mtile:hover .na-mtile__media picture > img,
  .na-mtile:focus-visible .na-mtile__media img,
  .na-mtile:focus-visible .na-mtile__media picture > img {
    transform: none;
  }

  .na-mtile__media img,
  .na-mtile__media picture > img {
    transition: none;
  }

  .na-mtile__cta {
    opacity: 1;
    transform: none;
  }

  .na-hero-tabs__tab.is-active .na-hero-tabs__progress {
    animation: none;
    transform: scaleX(1);
  }
}