/* ==========================================================================
   PRIMIONICS DESIGN SYSTEM
   One set of tokens and one normalisation layer for the whole site.

   Written against measurements, not guesses. Auditing eight representative
   pages at 1440px found the same role rendered at eleven different sizes
   (h3: 15-28px), five container widths, thirteen section paddings, thirteen
   grid gaps, six card radii and four button radii. This file settles each of
   those on one value while leaving each page's own composition alone.

   Load order: injected by shared.js after professional-polish.css, so it is
   authoritative for the properties it claims. It deliberately claims only
   type scale, container width, section rhythm, card and button geometry and
   the colour tokens - never layout, never per-page composition.

   Excluded by design:
     .expo*        the exhibition cards carry each show's own identity
     .pm-nav/.pm-footer  the shared chrome has its own settled system
   ========================================================================== */

:root {
  /* ---- brand ---------------------------------------------------------- */
  --p-navy-950: #0f2238;   /* primary navy: headings, dark grounds        */
  --p-navy-900: #173754;   /* secondary navy: panels inside dark sections */
  --p-navy-800: #1d4160;
  --p-navy-ink: #0a1727;   /* deepest: announcement bar                   */

  --p-orange:          #e5551a;  /* brand orange - large areas only       */
  --p-orange-readable: #c8420f;  /* orange TEXT and chip faces (AA)       */
  --p-orange-dark:     #a8350b;  /* hover / small text on tinted grounds  */
  --p-orange-light:    #ffb18d;  /* orange on navy grounds                */
  --p-orange-soft:     #fdf0eb;  /* tint background                       */

  /* ---- text ----------------------------------------------------------- */
  --p-text:        #0f2238;
  --p-text-2:      #33455a;
  --p-text-muted:  #5a6b7f;
  --p-text-on-dark:      #ffffff;
  --p-text-on-dark-2:    #c6d5e1;
  --p-text-on-dark-muted:#a9bccb;

  /* ---- surfaces and borders ------------------------------------------- */
  --p-surface:       #ffffff;
  --p-surface-soft:  #f6f8fa;
  --p-surface-soft-2:#eef2f6;
  --p-border:        #e3e9f0;
  --p-border-strong: #d3dde7;

  /* ---- type ------------------------------------------------------------ */
  --p-font-display: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  --p-font-body:    Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --p-font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --p-h1-home:  clamp(36px, 4.6vw, 60px);
  --p-h1:       clamp(34px, 3.9vw, 52px);
  --p-h2:       clamp(28px, 2.9vw, 38px);
  --p-h3:       clamp(19px, 1.5vw, 23px);
  --p-h4:       18px;
  --p-lead:     18px;
  --p-body:     15.5px;
  --p-small:    13.5px;
  --p-eyebrow:  11px;
  --p-crumb:    12px;
  --p-button:   14px;

  --p-lh-tight: 1.08;
  --p-lh-head:  1.22;
  --p-lh-body:  1.68;

  /* ---- layout ---------------------------------------------------------- */
  --p-container: 1240px;
  --p-reading:   800px;
  --p-pad-x:     32px;

  --p-sec-major:    104px;
  --p-sec-standard: 80px;
  --p-sec-compact:  56px;
  --p-sec-band:     34px;   /* thin trust/logo bands */

  --p-gap-sm: 16px;
  --p-gap:    20px;
  --p-gap-lg: 24px;

  /* ---- shape ------------------------------------------------------------ */
  --p-radius-sm: 6px;
  --p-radius:    10px;
  --p-radius-lg: 14px;
  --p-radius-btn: 8px;

  --p-shadow-sm: 0 1px 2px rgba(15, 34, 56, .05);
  --p-shadow:    0 10px 28px rgba(15, 34, 56, .08);
  --p-shadow-lg: 0 18px 44px rgba(15, 34, 56, .10);

  --p-btn-h: 46px;
}

@media (max-width: 1024px) { :root { --p-pad-x: 24px; --p-sec-major: 80px; --p-sec-standard: 64px; --p-sec-compact: 48px; --p-sec-band: 30px; } }
@media (max-width: 640px)  { :root { --p-pad-x: 20px; --p-sec-major: 64px; --p-sec-standard: 52px; --p-sec-compact: 40px; --p-sec-band: 26px; } }

/* ==========================================================================
   NORMALISATION
   ========================================================================== */

/* ---- 1. containers: five widths became one -------------------------------
   1280 / 1248 / 1240 / 1220 were all attempts at the same measure. */
html body :is(
  .rail, .wrap, .container, .pm-shell, .pp-rail, .pw-rail, .cr-rail, .ax-rail,
  .sx-shell, .ix-shell, .abt-rail, .svc-rail, .resource-shell, .aw-container,
  .arch-container, .sv-container, .dp-rail, .wg-rail, .ecs-shell
):not(.pm-footer *):not(.pm-nav *) {
  width: min(100% - (var(--p-pad-x) * 2), var(--p-container)) !important;
  margin-inline: auto !important;
}

/* ---- 2. type scale -------------------------------------------------------
   h3 alone was rendering at eleven sizes. Each role now resolves to one
   clamp, so the same role is the same size on every page. */
html body main :is(h1, .ph-title, .dp-h1, .pp-hero-title, .abt-title, .svc-title,
                   .cr-title, .pw-title, .ax-h1, .sx-title, .ix-title):not(.expo *) {
  font-family: var(--p-font-display) !important;
  font-size: var(--p-h1) !important;
  line-height: var(--p-lh-tight) !important;
  letter-spacing: -.032em !important;
  text-wrap: balance;
}

html body.home-2026 main .hero h1 { font-size: var(--p-h1-home) !important; }

html body main :is(h2, .pp-h2, .abt-h2, .svc-h2, .cr-h2, .pw-h2, .sx-h2, .ix-h2,
                   .section-head h2, .pm-section-head h2):not(.expo *) {
  font-family: var(--p-font-display) !important;
  font-size: var(--p-h2) !important;
  line-height: var(--p-lh-head) !important;
  letter-spacing: -.026em !important;
  text-wrap: balance;
}

html body main h3:not(.expo *):not(.pm-footer *) {
  font-family: var(--p-font-display) !important;
  font-size: var(--p-h3) !important;
  line-height: 1.3 !important;
  letter-spacing: -.014em !important;
}

html body main h4:not(.expo *) {
  font-family: var(--p-font-display) !important;
  font-size: var(--p-h4) !important;
  line-height: 1.32 !important;
}

/* eyebrows and labels: 9-12px became one, and one letter-spacing */
html body main :is(.eyebrow, .lbl, .kicker, .pp-eyebrow, .abt-kicker, .svc-kicker,
                   .cr-kicker, .pw-eyebrow, .sx-eyebrow, .ix-eyebrow, .ax-kicker,
                   .wg-eyebrow, .pm-eyebrow, .resource-eyebrow, .dp-series-label,
                   .trust-label):not(.expo *) {
  font-family: var(--p-font-mono) !important;
  font-size: var(--p-eyebrow) !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
}

/* breadcrumbs */
html body main :is(.pp-crumbs, .ix-breadcrumbs, .sx-crumbs, .wg-breadcrumb,
                   .partner-crumbs, .rg-crumbs, .breadcrumb, .crumbs):not(.expo *) {
  font-size: var(--p-crumb) !important;
  letter-spacing: .06em !important;
  text-transform: none !important;
}

/* ---- 3. section rhythm: thirteen paddings became three ------------------- */
html body main > section:not(.expo):not([class*="hero"]):not(.site-cta):not(.conversion-panel):not(.trust):not(.sec-band):not(.pp-section),
html body main > div > section:not(.expo):not([class*="hero"]):not(.site-cta):not(.conversion-panel):not(.trust):not(.sec-band):not(.pp-section) {
  padding-block: var(--p-sec-standard) !important;
}

html body main :is(.sec-major, .section-major, .pm-section-major) { padding-block: var(--p-sec-major) !important; }
html body main :is(.sec-compact, .section-compact, .pp-section--compact, .sx-section--compact) { padding-block: var(--p-sec-compact) !important; }
html body main :is(.trust, .sec-band, .logo-band, .pm-trust) { padding-block: var(--p-sec-band) !important; }

/* heading-to-content rhythm */
html body main :is(.section-head, .pp-head, .abt-head, .svc-head, .cr-section-head,
                   .pw-section-head, .sx-section-head, .ix-section-head, .pm-section-head) {
  margin-bottom: 34px !important;
}

/* ---- 4. cards: six radii became three -----------------------------------
   Small chips 6px, standard cards 10px, feature cards 14px. */
html body :is([class*="card"]:not([class*="card-"]):not([class*="card__"]):not([class*="-card-"]), .solution, .launch, .next-step, .contact-path,
              .resource, .pm-application, .pm-wing, .pm-industry, .pm-resource,
              .cr-value, .cr-role, .pw-party, .pe-pcard):not(.expo):not(.expo *):not([class*="-img"]):not([class*="-logo"]) {
  border-radius: var(--p-radius) !important;
}

html body :is(.pm-application, .pm-wing, .industry-card.anchor, .resource.main,
              .solution.featured, .pp-logo-panel, .rg-aside, .pw-readiness,
              .cr-hero-panel, .svc-contact-card) {
  border-radius: var(--p-radius-lg) !important;
}

html body :is(.chip, .pill, .tag, [class*="-tag"], [class*="-chip"], [class*="-badge"]):not(.expo *) {
  border-radius: var(--p-radius-sm) !important;
}

/* one border, one shadow language */
html body :is([class*="card"]:not([class*="card-"]):not([class*="card__"]):not([class*="-card-"]), .solution, .launch, .next-step, .contact-path,
              .resource, .cr-value, .cr-role, .pw-party):not(.expo):not(.expo *):not([class*="-img"]) {
  border-width: 1px !important;
  border-style: solid !important;
}

/* ---- 5. buttons: three heights and four radii became one ---------------- */
html body :is(.btn, .pp-btn, .pw-btn, .cr-btn, .svc-btn, .ax-btn, .sx-btn,
              .pm-button, .ecs-btn, .aw-btn, .sv-btn, .dp-btn, .pe-btn):not(.expo *):not(.btn-sm):not(.cr-mini-btn) {
  min-height: var(--p-btn-h) !important;
  padding-inline: 22px !important;
  border-radius: var(--p-radius-btn) !important;
  font-family: var(--p-font-display) !important;
  font-size: var(--p-button) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

html body :is(.btn-sm, .cr-mini-btn):not(.expo *) {
  min-height: 38px !important;
  padding-inline: 16px !important;
  border-radius: var(--p-radius-sm) !important;
  font-size: 13px !important;
}

/* ---- 6. grid gaps: thirteen values became three ------------------------- */
html body main :is([class*="-grid"], [class*="-showcase"], .solutions-grid,
                   .featured-products, .launches, .event-grid):not(.expo *):not(.pm-footer-grid):not(.arch-flow) {
  gap: var(--p-gap-lg) !important;
}

html body main :is([class*="-list"], .pp-product-tags, .pp-chips, [class*="chips"]):not(.expo *) {
  gap: var(--p-gap-sm) !important;
}

/* ---- 7. hover: one behaviour ------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  html body a:is([class*="card"], .solution-card, .contact-path, .industry-card,
                 .pm-application, .pm-wing, .pm-industry, .pm-resource):not(.expo):hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--p-shadow) !important;
  }
}

/* ---- 8. images ---------------------------------------------------------- */
html body main img:not([class*="logo"]):not(.expo-logo) { max-width: 100%; height: auto; }

html body :is([class*="-img"], .product-art, .pcard-img, .card-media, .sx-related__media) img {
  object-fit: contain !important;
}

/* logos hold their aspect and never overpower the page */
html body :is(.partner-card-logo, .pp-logo-panel, .brandrow, .pm-trust-logos) img {
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* ---- 9. reading measure ------------------------------------------------- */
html body main :is(.lead, .ph-sub, .pp-lead, .abt-lead, .svc-lead, .cr-lead,
                   .pw-lead, .sx-lead, .hero-sub, .section-head p):not(.expo *) {
  max-width: var(--p-reading);
  font-size: var(--p-lead) !important;
  line-height: var(--p-lh-body) !important;
}

/* ---- 10. forms ---------------------------------------------------------- */
html body :is(input[type="text"], input[type="email"], input[type="tel"],
              input[type="url"], input[type="number"], input[type="date"],
              select, textarea):not(.expo *) {
  min-height: var(--p-btn-h);
  padding: 11px 14px;
  border: 1px solid var(--p-border-strong);
  border-radius: var(--p-radius-sm);
  background: var(--p-surface);
  color: var(--p-text);
  font-family: var(--p-font-body);
  font-size: var(--p-body);
  transition: border-color .16s ease, box-shadow .16s ease;
}

html body textarea { min-height: 130px; padding-block: 12px; }

html body :is(input, select, textarea):focus-visible {
  outline: 0;
  border-color: var(--p-orange-readable);
  box-shadow: 0 0 0 3px rgba(200, 66, 15, .16);
}

html body :is(label, .form-label, .contact-field label, .field-label) {
  font-size: var(--p-small);
  font-weight: 600;
  color: var(--p-text-2);
}

/* ---- 11. tables --------------------------------------------------------- */
html body main table:not(.expo *) {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--p-small);
}

html body main :is(th, td):not(.expo *) {
  padding: 11px 14px;
  border: 0;
  border-bottom: 1px solid var(--p-border);
  text-align: left;
  vertical-align: top;
}

html body main th:not(.expo *) {
  font-family: var(--p-font-mono);
  font-size: var(--p-eyebrow);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--p-text-muted);
  background: var(--p-surface-soft);
}

/* ---- 12. motion --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html body *, html body *::before, html body *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   Escapees found on re-measurement.
   ========================================================================== */

/* homepage-consistency.css matches heroes with h1[class], which out-ranked the
   scale rule at equal class count. Matching that weight settles h1 at one
   size: about.html and the partner pages were still rendering 64px. */
html body main :is(h1[class], h1:not([class]), .abt-title, .cr-title, .pw-title,
                   .svc-title, .ax-h1, .ph-title, .dp-h1, .pp-hero-title):not(.expo *) {
  font-size: var(--p-h1) !important;
}
html body.home-2026 main .hero :is(h1[class], h1:not([class])) { font-size: var(--p-h1-home) !important; }

/* eyebrow classes the first pass missed (9px and 10px) */
html body :is(.conversion-panel__eyebrow, .abt-proof-label, .abt-office-label,
              .svc-meta-label, .cr-panel-label, .pw-readiness-kicker,
              .contact-paths__eyebrow, .mid-conversion__eyebrow) {
  font-family: var(--p-font-mono) !important;
  font-size: var(--p-eyebrow) !important;
  letter-spacing: .15em !important;
}

/* two containers still off the measure */
html body :is(.conversion-panel__inner, .wg-hub-only, .contact-paths__inner,
              .next-steps__inner, .mid-conversion) {
  width: min(100% - (var(--p-pad-x) * 2), var(--p-container)) !important;
  margin-inline: auto !important;
}

/* content CTAs the button rule did not name */
html body :is(.abt-linkedin-btn, .consent-btn, .expo-btn) { border-radius: var(--p-radius-btn) !important; }
html body .abt-linkedin-btn { min-height: var(--p-btn-h) !important; font-size: var(--p-button) !important; }

/* ---- body and small text -------------------------------------------------
   Measurement found copy as small as 8px. Section leads keep 18px, card copy
   settles at 13.5px, and metadata at 13px - nothing in content below that. */
html body main :is([class*="-desc"], .desc, [class*="-copy"] p, .card p,
                   [class*="card"] p):not(.expo *):not(.expo) {
  font-size: var(--p-small) !important;
  line-height: 1.65 !important;
}

html body main :is(small, [class*="-meta"], [class*="-note"], .caption,
                   [class*="-spec"]):not(.expo *):not([class*="eyebrow"]) {
  font-size: 13px !important;
  line-height: 1.55 !important;
}

/* the floating action bar and the consent bar are their own UI, not content
   CTAs, so they keep their own geometry */
html body :is(.float-btn, .float-bar *) { min-height: 0 !important; padding-inline: 0 !important; }

/* Chips, tags, badges and code labels were rendering between 9px and 10.9px.
   The brief's label range is 10-12px; this sets one value across the family so
   a tag looks the same whichever page it is on. */
html body main :is(
  .rg-tag, .pp-chip, .pp-product-tag, .ax-workflow-tag, .ax-stack-num,
  .wg-featured-badge, .abt-domain-code, .abt-office-region, .abt-person-focus,
  .product-tag, .launch-badge, .pw-offer-tag, .cr-role-tag, .sx-tag, .ix-tag,
  [class*="-chip"], [class*="-tag"], [class*="-badge"], [class*="-pill"]
):not(.expo *) {
  font-family: var(--p-font-mono) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: .12em !important;
}

/* ==========================================================================
   Orange restraint.

   Measured share of orange text per page before this rule:
     index 4%   careers 6%   academia 10%
     about 25%  precision-environments 27%  test-measurement 30%
     resources 36%  partners 46%

   The cause was consistent: on every card grid each card carried three orange
   elements - the category label, the action, and the cross-reference - so the
   accent read as the body colour rather than a signature. Orange is now kept
   for the action, active navigation, focus states and a single accent; the
   category labels and decorative marks move to slate.
   ========================================================================== */

/* category and eyebrow labels inside cards are information, not action */
html body :is(
  .partner-card-sub, .rg-tag, .pcard-cat, .prod-card-cat, .tm20-card-cat,
  .product-tag, .launch-badge, .wg-featured-badge, .abt-domain-code,
  .abt-person-focus, .cr-role-tag, .pw-offer-tag, .ax-workflow-tag,
  .sim-card-cat, .pe-tag, .ix-product-meta
):not(.expo *) {
  color: #5a6b7f !important;
  background: transparent !important;
}

/* decorative route and step arrows are structure, not emphasis */
html body :is(.wg-arrow, .industry-route-arrow, .arch-arrow, .flow-arrow,
              .pe-arrow, .ix-arrow):not(.expo *) {
  color: #64758a !important;   /* structural, but still clears AA */
}

/* a cross-reference under a card is secondary to the card's own action */
html body .pcard-xref a { color: #5a6b7f !important; }

/* body emphasis is weight, not colour */
html body main:is(.pe-page, .sx-page, .ix-page) :is(b, strong):not([class]) {
  color: var(--p-text) !important;
  font-weight: 700;
}

/* plain in-copy links stay orange but only on hover do they assert it */
html body main.abt-page a:not([class]):not(:hover) { color: var(--p-text-2) !important; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #c8b0a4; }
html body main.abt-page a:not([class]):hover { color: var(--p-orange-dark) !important; }

/* the resource card already carries its action in orange; the format badge
   keeps the tinted pill but its text steps back */
html body a.resource-questionnaire-card > span:not(.resource-card-link) { color: #5a6b7f !important; }

/* Sub-navigation strips scroll rather than clip on narrow viewports. The
   About strip was running 700px wide inside a 390px viewport. */
html body :is(.abt-subnav, .pp-subnav, .svc-subnav, .cr-subnav, .wg-subnav,
              .sx-subnav, .ix-subnav) :is(.rail, .pp-rail, [class*="inner"]) {
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

html body :is(.abt-subnav, .pp-subnav, .svc-subnav, .cr-subnav, .wg-subnav,
              .sx-subnav, .ix-subnav) :is(.rail, .pp-rail, [class*="inner"])::-webkit-scrollbar {
  display: none;
}

html body :is(.abt-subnav, .pp-subnav, .svc-subnav, .cr-subnav, .wg-subnav) a {
  white-space: nowrap;
  flex: none;
}

/* The muted label colour above assumes a light card. On the dark bands it
   measured 2.68:1, so those take the light value instead. */
html body :is(.section.dark, .systems, .final, .abt-hero, .abt-process, .abt-cta,
              .svc-hero, .svc-cta, .cr-hero, .cr-expect, .pw-hero, .pw-readiness,
              .page-hero, .pm-home-hero, .sx-hero, .sx-section--navy)
  :is(.launch-badge, .product-tag, .rg-tag, .partner-card-sub, .cr-role-tag,
      .pw-offer-tag, .ax-workflow-tag, .abt-domain-code, .abt-person-focus,
      [class*="-tag"], [class*="-badge"]) {
  color: #b9cad6 !important;
}

/* --------------------------------------------------------------------------
   A heading used as a CARD title takes the card scale, not the section scale.

   industries.html marks each directory row up with <h2>, so the section-
   heading rule rendered those titles at 37px - roughly twice every other card
   title on the site (solutions 19px, partners 16px). The card is the context
   that should decide the size, not the tag.
   -------------------------------------------------------------------------- */
html body main :is(
  .ix-directory-row, .sx-solution-card, [class*="card"]:not([class*="card-"]):not([class*="card__"]):not([class*="-card-"]),
  .solution, .launch, .resource, .next-step, .contact-path, .tv-row, .pe-card
):not(.expo):not(.expo *) :is(h2, h3) {
  font-size: var(--p-h3) !important;
  line-height: 1.3 !important;
  letter-spacing: -.014em !important;
  margin-block: 0 8px;
}

/* the row's body copy and action join the card family */
html body main .ix-directory-row p { font-size: var(--p-small) !important; line-height: 1.65 !important; }
html body main .ix-directory-row b {
  margin-top: auto;
  margin-left: auto;
  font-size: 12.5px !important;
  font-weight: 800;
  color: var(--p-orange-readable) !important;
}

/* ==========================================================================
   PASS 2 - residual outliers, measured across 18 pages at 1440px.

   Pass 1 settled the headings (h1 52, h2 38, h3 22, h4 18) and the container,
   section rhythm, button height and card radius for the families it named.
   Re-measuring found what it had not reached:

     body copy      35 combinations of size and line-height, 14px dominant
     grid gaps      41 distinct values
     card radius    6 values, up to 28px
     card border    30 distinct colours
     light surfaces 13 near-identical greys between #eef2f8 and #f7f9fc
     orange text    7 shades
     shadows        11, the heaviest 0 20px 60px rgba(0,0,0,.16)
     text           down to 8px in a table cell

   Each block below names the elements the measurement actually found.
   ========================================================================== */

:root {
  --p-body:  16px;   /* was 15.5 and never applied to prose; measured 14 */
  --p-small: 14px;   /* card copy and table cells                        */
  --p-micro: 13px;   /* metadata, captions, notes - the floor for copy   */

  --p-space-1: 8px;
  --p-space-2: 12px;
  --p-space-3: 16px;
  --p-space-4: 20px;
  --p-space-5: 24px;
  --p-space-6: 32px;

  --p-card-pad:         26px;
  --p-card-pad-compact: 20px;
}

@media (max-width: 640px) { :root { --p-card-pad: 20px; --p-card-pad-compact: 16px; } }

/* ---- 13. body prose ------------------------------------------------------
   One size and one line-height for running copy. Leads keep 18px, card copy
   14px, metadata 13px; nothing else in content sets its own. */
html body main p:not(.expo *):not(.tv-row *):not(.pe-card *):not([class*="lead"]):not([class*="eyebrow"]):not([class*="kicker"]):not([class*="tagline"]):not([class*="meta"]):not([class*="note"]):not([class*="caption"]):not([class*="-sub"]) {
  font-size: var(--p-body) !important;
  line-height: var(--p-lh-body) !important;
}

html body main :is([class*="card"], .solution, .launch, .resource, .next-step,
                   .contact-path, .ix-directory-row, .tv-row, .pe-card):not(.expo):not(.expo *) p:not([class*="lead"]) {
  font-size: var(--p-small) !important;
  line-height: 1.62 !important;
}

html body main :is(p.ix-hero-lead, p.sx-lead, p.cq-lead, p.ifm-hero__lead,
                   p.ax-lead, p.embedded-section-intro):not(.expo *) {
  font-size: var(--p-lead) !important;
  line-height: var(--p-lh-body) !important;
}

html body main :is(p.ix-product-role, p.ix-standard-note, p.dp-spec-note,
                   p.cr-role-summary):not(.expo *) {
  font-size: var(--p-micro) !important;
  line-height: 1.6 !important;
}

/* ---- 14. the small-text floor --------------------------------------------
   Measurement found 8px table cells, 9px card labels and 10px headers. */
html body main :is(td, td *):not(.expo *) { font-size: var(--p-small) !important; }
html body main th:not(.expo *)            { font-size: 11px !important; }

html body :is(.svc-card-type, .partner-card-sub, .conversion-resource__icon,
              .dp-ks-lbl, .arp-cat, .cr-expect-label, .contact-form-section__title,
              .dp-bc-sep, .abt-office-label, .abt-proof-label):not(.expo *) {
  font-size: 11px !important;
  letter-spacing: .12em !important;
}

/* ---- 15. buttons: the families pass 1 did not name ----------------------- */
html body :is(.ix-button, .ss-btn, .dp-btn-primary, .dp-btn-sec, .dp-btn-question,
              .ifm-btn, .cr-apply-role, .cr-btn, .arp-btn, .nv-btn,
              .pz-btn, .cdy-btn, .sft-btn):not(.expo *) {
  min-height: var(--p-btn-h) !important;
  height: auto !important;
  padding-block: 0 !important;
  padding-inline: 22px !important;
  border-radius: var(--p-radius-btn) !important;
  font-family: var(--p-font-display) !important;
  font-size: var(--p-button) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

/* A button is a control, not an elevated surface. Measured drop shadows ran to
   0 8px 24px rgba(.2); the press state carries the feedback instead. */
html body :is(.btn, .pp-btn, .pw-btn, .cr-btn, .svc-btn, .ax-btn, .sx-btn, .ss-btn,
              .pm-button, .ecs-btn, .aw-btn, .sv-btn, .dp-btn-primary, .dp-btn-sec,
              .ix-button, .ifm-btn):not(.expo *):not(.expo-btn) {
  box-shadow: none !important;
}

/* ---- 16. spacing scale ---------------------------------------------------
   Six steps. The values below are the ones measurement found off the scale. */
html body main :is(.arch-flow, .assurance-flow, .contact-field, .abt-office-contact,
                   .cr-role-meta, .cr-field, .cr-checks, .contact-side-item,
                   .ax-breadcrumb, .ax-card-actions, .dp-thumbstrip,
                   .partner-card-body):not(.expo *) { gap: var(--p-space-1) !important; }

html body main :is(.product-meta, .abt-faq, .cr-apply-point, .ph-actions, .svc-input,
                   .pp-actions, .pp-faq, .site-faq):not(.expo *) { gap: var(--p-space-2) !important; }

html body main :is(.contact-fields, .contact-submit, .ax-stack, .ax-process,
                   .cq-hero__actions, .cr-form-foot):not(.expo *) { gap: var(--p-space-3) !important; }

html body main :is(.abt-process, .svc-process, .ax-principles, .ax-levels,
                   .ix-products, .cr-role-top, .academix):not(.expo *) { gap: var(--p-space-4) !important; }

/* ---- 17. radius: six values became three -------------------------------- */
html body :is(.abt-intro-main, .abt-intro-aside, .svc-scope-main, .svc-scope-aside,
              .ax-step, .ax-level, .cr-apply-aside, .ax-intro-panel, .ax-workflow,
              .ifm-req, .ifm-media, .ifm-facts, .ax-stack-card,
              .dp-img-col):not(.expo *) {
  border-radius: var(--p-radius-lg) !important;
}

html body :is(.rg-support-grid, .site-faq-item, .ix-standard, .ix-related,
              .sx-loop-node, .pm-architecture, .abt-step, .dp-ks, .academix,
              .conversion-resource, .dp-ks-item, .contact-form-card,
              .contact-side-card):not(.expo *) {
  border-radius: var(--p-radius) !important;
}

html body :is(.arp-media, .svc-input, .dp-thumb):not(.expo *),
html body :is(input, select, textarea):not(.expo *) {
  border-radius: var(--p-radius-sm) !important;
}

/* ---- 18. shadow: one soft elevation, one stronger ----------------------- */
html body main :is([class*="card"], [class*="panel"], .ifm-media, .dp-img-col,
                   .ax-stack-card, .ax-intro-panel, .academix,
                   .conversion-resource):not(.expo):not(.expo *):not([class*="cards"]):not([class*="card-"]):not([class*="card__"]):not([class*="-card-"]) {
  box-shadow: var(--p-shadow-sm) !important;
}

html body main :is(.contact-form-card, .cr-form-card, .abt-intro-main,
                   .svc-scope-main, .dp-img-col):not(.expo *) {
  box-shadow: var(--p-shadow) !important;
}

/* ---- 19. light surfaces: thirteen greys became two ----------------------
   A section band and a media well are different roles, so they keep different
   values - but only two values, not thirteen. */
html body :is(.section.soft, .next-steps, .resource-body, .pp-section-soft,
              .ax-section-soft, .abt-section-soft, .svc-section-soft,
              .ix-section-soft, .cr-section-soft, .ifm-section--soft,
              .pp-related, .dp-section, .academix):not(.expo *) {
  background: var(--p-surface-soft) !important;
}

html body :is(.sim-img, .arp-media, .ix-product-media, .abt-person-media,
              .sx-solution-card__media, .pe-ia-row__media, .dp-spec-source,
              .pcard-img, .card-media, .product-art):not(.expo *) {
  background: var(--p-surface-soft-2) !important;
}

/* ---- 20. card borders: thirty colours became one ------------------------
   The navy anchor card and the single orange-bordered card keep theirs; they
   are deliberate accents, not drift. */
html body main :is([class*="card"], [class*="panel"], [class*="tile"]
                  ):not(.expo):not(.expo *):not(.industry-card.anchor):not(.abt-audience-card):not([class*="card-"]):not([class*="card__"]):not([class*="-card-"]) {
  border-color: var(--p-border) !important;
}

html body :is(.section.dark, .systems, .final, .sx-section--navy, .pw-readiness,
              .abt-process, .cr-expect, .conversion-panel)
  :is([class*="card"], [class*="panel"]):not([class*="card-"]) {
  border-color: rgba(255, 255, 255, .13) !important;
}

/* ---- 21. one orange ------------------------------------------------------
   #c8420f is the readable brand orange and clears AA on every light surface
   the site uses. Six near-misses resolved to it. */
html body main :is(.abt-kicker, .cr-kicker, .svc-kicker, .next-step__n,
                   .svc-card-link, .ix-eyebrow, .ax-kicker, .pw-eyebrow,
                   .industry-application-card__eyebrow,
                   .industry-application-card__action, .ix-product-link,
                   .arp-brand, .ifm-chip--orange, .conversion-resource__icon,
                   .rg-crumb-current):not(.expo *) {
  color: var(--p-orange-readable) !important;
}

/* ---- 22. card padding: seventeen values became two ---------------------- */
html body main :is([class*="card"], .solution, .launch, .resource, .next-step,
                   .contact-path):not(.expo):not(.expo *):not([class*="cards"]):not([class*="card-"]):not([class*="card__"]):not([class*="-card-"]):not([class*="-img"]):not([class*="-media"]):not([class*="-logo"]):not([class*="-grid"]) {
  padding: var(--p-card-pad) !important;
}

/* ==========================================================================
   PASS 3 - the families that out-ranked pass 2.

   Re-measurement after pass 2:
     prose sizes   8 -> 5      gaps        41 -> 23
     radii         9 -> 4      shadows     12 -> 3
     light greys  12 -> 3      borders     11 -> 4
     button height 3 -> 1      orange       7 -> 5

   Everything still off the system belonged to one of four page families whose
   own sheet loads later or matches harder: the product-detail pages (.dp-*),
   the industry pages (.ix-*), the ifm portfolio (.ifm-*) and AcademiX (.ax-*).
   Those are named directly here rather than by a broad selector.
   ========================================================================== */

/* ---- product-detail family ---------------------------------------------- */
html body main :is(.dp-feat, .dp-app, .dp-ks, .dp-spec-source, .sim-explore,
                   .sim-card, .arp-card):not(.expo *) {
  border-radius: var(--p-radius) !important;
}

html body main :is(.dp-img-col, .dp-gallery):not(.expo *) { border-radius: var(--p-radius-lg) !important; }
html body a.dp-btn-sec, html body a.dp-btn-primary, html body a.dp-btn-question {
  border-radius: var(--p-radius-btn) !important;
  font-size: var(--p-button) !important;
}

/* .dp-shell is the ground the dark product hero sits on - the hero itself
   sets only a faint grid overlay, which resets background-color to
   transparent. Painting the shell light turned white hero text onto a near-
   white ground (h1 measured 1.06:1). Only the related-products band below
   the fold takes the soft surface. */
html body :is(.sim-products-section, .pc-similar-v2):not(.expo *) {
  background: var(--p-surface-soft) !important;
}

html body main p.dp-tagline:not(.expo *) {
  font-size: var(--p-lead) !important;
  line-height: var(--p-lh-body) !important;
}

html body main :is(.dp-feats, .dp-apps, .dp-specs):not(.expo *) { gap: var(--p-space-3) !important; }

/* icon-only controls carry no text; the small-text floor does not apply */
html body :is(.dp-arr, .dp-thumb, .sim-arrow) { font-size: 0 !important; box-shadow: none !important; }

/* ---- industry family ----------------------------------------------------- */
html body main :is(.ix-directory-row, .ix-product, .ix-related,
                   .industry-route-card):not(.expo *) {
  border-radius: var(--p-radius) !important;
}
html body main :is(.industry-route-intro, .ix-anchor):not(.expo *) { border-radius: var(--p-radius-lg) !important; }
html body main p.ix-hero-lead:not(.expo *) { font-size: var(--p-lead) !important; line-height: var(--p-lh-body) !important; }

/* ---- ifm portfolio ------------------------------------------------------- */
html body main .ifm-card.ifm-card--lift:not(.expo *) {
  border-radius: var(--p-radius) !important;
  border-color: var(--p-border) !important;
  box-shadow: var(--p-shadow-sm) !important;
}

/* ---- AcademiX and solutions --------------------------------------------- */
html body main :is(.ax-faq, .cq-head, .pm-hero-proof, .conversion-panel__proof,
                   .pe-ia-group__head):not(.expo *) { gap: var(--p-space-2) !important; }
html body main :is(.pp-faq, .site-faq, .site-faq-item):not(.expo *) { gap: var(--p-space-2) !important; }
html body main details.site-faq-item:not(.expo *) { border-radius: var(--p-radius) !important; }
html body main p.sx-lead:not(.expo *) { font-size: var(--p-lead) !important; line-height: var(--p-lh-body) !important; }

/* ---- the last orange strays ---------------------------------------------
   #b83a0b, #cc410d, #e45b24, #b1470f, #c94312 all resolve to the one token. */
html body main :is(em, i, b, strong, span, div, a).ax-level-label:not(.expo *),
html body main :is(.sx-eyebrow, .ax-level-label, .pe-eyebrow, .cq-eyebrow,
                   .rg-eyebrow, .arp-brand, .ifm-chip--orange,
                   .conversion-resource__icon):not(.expo *) {
  color: var(--p-orange-readable) !important;
}

html body main :is(section, div, article, p, li):not(.expo):not(.expo *) > :is(em, i):not([class]) {
  color: var(--p-orange-readable) !important;
  font-style: normal;
  font-weight: 700;
}

/* ---- borders the BEM modifier exclusion skipped -------------------------- */
html body main :is(.abt-person-card--profile, .abt-model-card, .abt-domain-card,
                   .pp-intro-card, .pp-tech-card, .pp-related-card, .product-card,
                   .industry-application-card, .sx-solution-card,
                   .industry-card):not(.industry-card.anchor):not(.expo *) {
  border-color: var(--p-border) !important;
}

/* ---- a hard floor on table text ----------------------------------------- */
html body table :is(td, th, td *, th *):not(.expo *) { font-size: inherit !important; }
html body main table:not(.expo *) { font-size: var(--p-small) !important; }
html body main table th:not(.expo *) { font-size: 11px !important; }

/* ==========================================================================
   PASS 4 - three rules that lost on specificity, not on intent.

   product-catalogue-v2.css is injected by shared.js after this file and its
   selectors carry three classes (body.product-catalogue-v2:is([data-category=
   "test-measurement"], ...)), so a single-class rule here never applied. These
   match that weight rather than escalating to a broader !important.
   ========================================================================== */

html body.product-catalogue-v2 :is(.dp-img-col.dp-img-col, .dp-gallery.dp-gallery) {
  border-radius: var(--p-radius-lg) !important;
}

html body.product-catalogue-v2 :is(.dp-btn-sec.dp-btn-sec, .dp-btn-primary.dp-btn-primary,
                                   .dp-btn-question.dp-btn-question) {
  border-radius: var(--p-radius-btn) !important;
  font-size: var(--p-button) !important;
  min-height: var(--p-btn-h) !important;
}

html body.product-catalogue-v2 :is(.dp-feat.dp-feat, .dp-app.dp-app, .dp-ks.dp-ks,
                                   .sim-explore.sim-explore, .sim-card.sim-card) {
  border-radius: var(--p-radius) !important;
}

/* Inline emphasis carries the accent by weight; where it carries colour it
   takes the one token. Five near-identical oranges measured on em/i/b/span. */
html body main :is(em, i, b, cite):not([class]):not(.expo *) {
  color: var(--p-orange-readable) !important;
  font-style: normal;
  font-weight: 700;
}

html body main :is([class*="accent"], [class*="highlight"], .hl, .em-orange):not(.expo *) {
  color: var(--p-orange-readable) !important;
}

/* ==========================================================================
   PASS 5 - legibility floor, touch targets and one breadcrumb.

   Responsive QA at 1440 / 1280 / 1024 / 768 / 430 / 390 / 360 found no
   horizontal scroll on any page (the wide specification tables scroll inside
   .dp-models-wrap, which is correct). What it did find:

     8px  .dp-spec-table tr.grp td   group label rows in every spec table
     16px inline card links on mobile - below a usable tap target
     .dp-bc-cur ran past the right edge at 430px and below
   ========================================================================== */

/* A group label inside a specification table is an eyebrow, not 8px text. */
html body.product-catalogue-v2 .dp-spec-table tbody tr.grp td {
  font-family: var(--p-font-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--p-text-muted) !important;
}

/* Breadcrumbs wrap rather than push the page open. */
html body main :is(.dp-bc, .pp-crumbs, .ix-breadcrumbs, .sx-crumbs, .wg-breadcrumb,
                   .partner-crumbs, .rg-crumbs, .breadcrumb, .crumbs):not(.expo *) {
  flex-wrap: wrap;
  overflow-wrap: anywhere;
}
html body main :is(.dp-bc-cur, .rg-crumb-current):not(.expo *) { overflow-wrap: anywhere; }

/* Below 640px a content link needs a tap target, not just a text baseline. */
@media (max-width: 640px) {
  html body main :is(a.trust-link, a.launch-link, a.partner-group__link,
                     a.sim-brand-link, a[class*="-link"]:not([class*="btn"]),
                     a[class*="explore"], a[class*="-more"]):not(.expo *) {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
  }
}

/* ==========================================================================
   PASS 6 - media grounds, split by what the image actually is.

   Pass 2 put every media well on one grey. Product photography is shot on
   white, so a grey well drew a visible white rectangle around each product
   (measured on the home page featured cards). Equipment wells take white with
   a hairline; photographic wells - people, sites, solution imagery - keep the
   grey, because those images bleed to their own edge.
   ========================================================================== */

html body :is(.product-art, .pcard-img, .card-media, .sim-img, .arp-media,
              .ix-product-media, .dp-img-col, .dp-gallery):not(.expo *) {
  background: var(--p-surface) !important;
  border-bottom: 1px solid var(--p-border);
}

html body :is(.product-art, .pcard-img, .card-media, .sim-img, .arp-media,
              .ix-product-media):not(.expo *) img {
  object-fit: contain !important;
  padding: 10px;
}

html body :is(.abt-person-media, .sx-solution-card__media, .pe-ia-row__media,
              .dp-spec-source):not(.expo *) {
  background: var(--p-surface-soft-2) !important;
}

/* ==========================================================================
   PASS 7 - industry composition (brief items 10, 22, 30).

   industries.html laid seven identical cards in a flat 3-column grid, and
   because each <img> carried only width/height attributes with no CSS ratio,
   the images rendered between 200px and 285px tall. Titles therefore landed
   at five different heights across one row.

   Two corrections:
     - every industry image takes the 12:7 ratio its own markup declares, so
       titles align;
     - the first industry becomes a wide editorial row rather than the eighth
       identical rectangle, giving the section a point of entry.
   ========================================================================== */

html body main .ix-directory-list { gap: var(--p-gap-lg) !important; }

html body main .ix-directory-row > img {
  width: 100%;
  aspect-ratio: 12 / 7;
  height: auto !important;
  object-fit: cover;
  border-radius: var(--p-radius) var(--p-radius) 0 0;
}

/* the anchor: image left, text right, across the full measure.
   The three text rows are centred as a group against a full-height image,
   rather than each child aligning to its own edge. */
@media (min-width: 861px) {
  html body main .ix-directory-list > .ix-directory-row:first-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-content: center;
    padding: 0;
  }

  html body main .ix-directory-list > .ix-directory-row:first-child > img {
    grid-column: 1;
    grid-row: 1 / -1;
    aspect-ratio: auto;
    height: 100% !important;
    min-height: 340px;
    align-self: stretch;
    border-radius: var(--p-radius) 0 0 var(--p-radius);
  }

  html body main .ix-directory-list > .ix-directory-row:first-child > h2,
  html body main .ix-directory-list > .ix-directory-row:first-child > p,
  html body main .ix-directory-list > .ix-directory-row:first-child > b {
    grid-column: 2;
    margin-inline: 0;
    padding-inline: 40px;
  }

  html body main .ix-directory-list > .ix-directory-row:first-child > h2 {
    grid-row: 1;
    font-size: clamp(26px, 2.2vw, 32px) !important;
    line-height: var(--p-lh-head) !important;
    letter-spacing: -.024em !important;
    margin-block: 0 12px !important;
  }
  html body main .ix-directory-list > .ix-directory-row:first-child > p {
    grid-row: 2;
    font-size: var(--p-body) !important;
    line-height: var(--p-lh-body) !important;
    max-width: 44ch;
    margin-block: 0 20px !important;
  }
  html body main .ix-directory-list > .ix-directory-row:first-child > b {
    grid-row: 3;
    margin: 0 !important;
  }
}

/* The card-title rule weighs five classes (its :is() list contains
   [class*="card"] with two :not()s), so the anchor's own heading rule and the
   supporting cards' alignment both lost to it. These match that weight. */
html body main .ix-directory-list > .ix-directory-row.ix-directory-row.ix-directory-row:first-child > h2 {
  font-size: clamp(26px, 2.2vw, 32px) !important;
  line-height: var(--p-lh-head) !important;
  letter-spacing: -.024em !important;
}

/* the supporting cards centred their children because the card is a flex
   column with align-items:center, so short titles read as centred while the
   copy read as left-aligned */
html body main .ix-directory-list > .ix-directory-row.ix-directory-row {
  align-items: stretch !important;
  text-align: left !important;
}
html body main .ix-directory-list > .ix-directory-row.ix-directory-row > :is(h2, p, b) {
  padding-inline: 22px;
  text-align: left !important;
}
html body main .ix-directory-list > .ix-directory-row.ix-directory-row > h2 { padding-top: 18px; }
html body main .ix-directory-list > .ix-directory-row.ix-directory-row > b { margin-top: auto; padding-bottom: 20px; }

@media (min-width: 861px) {
  html body main .ix-directory-list > .ix-directory-row.ix-directory-row:first-child > :is(h2, p, b) {
    padding-inline: 40px;
  }
  html body main .ix-directory-list > .ix-directory-row.ix-directory-row:first-child > h2 { padding-top: 0; }
  html body main .ix-directory-list > .ix-directory-row.ix-directory-row:first-child > b { padding-bottom: 0; margin-top: 0; }
}

/* ==========================================================================
   PASS 8 - the large layout gaps, and four stragglers.

   The card-grid gaps were settled in pass 2; what remained were the column
   gaps of split layouts, measured at 22, 25, 28, 34, 40, 42, 44, 48, 49, 56,
   64, 70 and 72px. Compositions may differ (brief item 44) but their gutters
   should not be arbitrary, so these snap to a four-step large scale.
   ========================================================================== */

:root { --p-gutter-sm: 32px; --p-gutter: 40px; --p-gutter-lg: 48px; --p-gutter-xl: 64px; }
@media (max-width: 1024px) { :root { --p-gutter-sm: 24px; --p-gutter: 32px; --p-gutter-lg: 36px; --p-gutter-xl: 40px; } }

html body main :is(.svc-scope, .assurance-rail, .cr-apply-wrap, .pe-ia-rows,
                   .ifm-requirements):not(.expo *) { gap: var(--p-gutter-sm) !important; }

html body main :is(.contact-layout, .ix-support, .conversion-panel__inner,
                   .abt-head):not(.expo *) { gap: var(--p-gutter) !important; }

html body main :is(.ix-shell, .sx-family, .sx-shell, .ss-rail, .cr-section-head,
                   .cr-faq, .ifm-darkgrid):not(.expo *) { gap: var(--p-gutter-lg) !important; }

html body main :is(.cq-hero__grid, .ifm-hero__grid, .pm-shell):not(.expo *) { gap: var(--p-gutter-xl) !important; }

/* ---- stragglers --------------------------------------------------------- */

/* two section leads still at 14px while every other lead reads 18px */
html body main :is(p.ix-hero-lead.ix-hero-lead, p.sx-lead.sx-lead,
                   p.cq-hero__lead.cq-hero__lead):not(.expo *) {
  font-size: var(--p-lead) !important;
  line-height: var(--p-lh-body) !important;
}

html body main details.site-faq-item.site-faq-item:not(.expo *) { border-radius: var(--p-radius) !important; }

html body a.abt-linkedin-btn.abt-linkedin-btn { height: var(--p-btn-h) !important; min-height: var(--p-btn-h) !important; }

/* ==========================================================================
   PASS 9 - mobile tap targets.

   Responsive QA at 430 / 390 / 360px found content links rendering 13-26px
   tall on seven page families. Links inside running prose stay inline (a tap
   target inside a sentence would break the line box); standalone content
   links become a real target.
   ========================================================================== */

/* Changing `display` on a link that is itself a card turns the card into an
   inline row: the broad form of this rule laid .resource out horizontally and
   pushed index.html 69px past the viewport at 390px. Only links that are
   already inline get a target. */
@media (max-width: 640px) {
  html body main :is(a[class*="-link"], a[class*="-more"], a[class*="explore"],
                     a[class*="overview"], a.trust-link, a.launch-link,
                     a.partner-group__link, a.sim-brand-link,
                     a.pe-ia-overview):not([class*="btn"]):not([class*="card"]):not(.expo *) {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
  }
}

/* the exhibition sub-mark kept its own styling but not a 9px size */
html body .expo .expo-submark { font-size: 11px !important; line-height: 1.4 !important; }

/* The remaining short links are unclassed anchors sitting directly inside a
   card, an aside or a breadcrumb. Padding raises the hit area without touching
   the layout mode - the mistake that made .resource lay out horizontally. */
@media (max-width: 640px) {
  html body main :is(.academix, .contact-side-card, .abt-domain-card, .partner-crumbs,
                     .abt-breadcrumb, .ax-breadcrumb, [class*="crumb"],
                     [class*="side-card"]):not(.expo *) > a:not([class]) {
    padding-block: 8px !important;
  }
}

/* ==========================================================================
   PASS 10 - two real contrast failures on the product-detail pages.

   A contrast sweep first reported 60 failures in the .dp-hero. Screenshotting
   the page showed the hero rendering correctly as white on navy: the harness
   was reading the FIRST layer of a three-layer background-image (a 1.8%-opacity
   grid overlay) instead of the navy gradient beneath it, so it walked past the
   hero to the light shell. No hero change was needed and none is made beyond
   the defensive background-color below, which only shows if that gradient ever
   fails to paint.

   Two failures in the same sweep were real, both measured off a flat
   background-color rather than a gradient:

     .dp-pill    white on #f04d0f   3.64:1  (needs 4.5)
     .dp-bc-sep  #cbd5e1 on #f7f9fc 1.41:1  (needs 4.5)
   ========================================================================== */

html body.product-catalogue-v2 .dp-shell .dp-hero.dp-hero.dp-hero {
  background-color: var(--p-navy-950);
}

html body.product-catalogue-v2 .dp-pill.dp-pill { background-color: var(--p-orange-readable) !important; }

html body main :is(.dp-bc-sep, .rg-crumb-sep, [class*="crumb"] .sep):not(.expo *) {
  color: var(--p-text-muted) !important;
}

/* Running copy takes the body face. The product tagline - the sentence under
   every product H1 - was rendering in JetBrains Mono, which is the label and
   data face on this site, not a face for prose. */
html body main :is(p.dp-tagline, p.dp-lead, .dp-info-col > p):not(.expo *) {
  font-family: var(--p-font-body) !important;
  letter-spacing: 0 !important;
}

/* ==========================================================================
   PASS 11 - the readable orange has two values, one per ground.

   Pass 3 resolved seven orange shades to #c8420f. That clears AA on every
   light surface (4.9:1 on white, 4.7:1 on #f6f8fa) but not on the navy
   heroes, where it measured 3.25:1 - and not on the #eef2f6 media ground,
   where it lands at 4.40:1, just under the 4.5 threshold.

   Three grounds, three values, one token each:
     white / #f6f8fa   --p-orange-readable  #c8420f   4.7-4.9:1
     #eef2f6           --p-orange-dark      #a8350b   6.1:1
     navy               --p-orange-light     #ffb18d   7.4:1
   ========================================================================== */

html body :is(.page-hero, .abt-hero, .ax-hero, .cr-hero, .pw-hero, .svc-hero,
              .sx-hero, .ix-hero, .dp-hero, .pp-hero,
              .section.dark, .systems, .final, .sx-section--navy, .abt-process,
              .abt-cta, .svc-cta, .cr-expect, .pw-readiness, .conversion-panel,
              .ix-cta, .ss-cta, .site-cta)
  :is(.eyebrow, .kicker, [class*="-eyebrow"], [class*="-kicker"], [class*="-label"],
      .ax-kicker, .ix-eyebrow, .sx-eyebrow, .pw-eyebrow, .dp-series-label) {
  color: var(--p-orange-light) !important;
}

/* a breadcrumb inside a dark hero is light text, not ink or accent */
html body :is(.page-hero, .abt-hero, .ax-hero, .cr-hero, .pw-hero, .svc-hero,
              .sx-hero, .ix-hero, .dp-hero, .pp-hero)
  :is(.abt-breadcrumb, .ax-breadcrumb, .partner-crumbs, .dp-bc, [class*="crumb"]) a {
  color: var(--p-text-on-dark-2) !important;
}
html body :is(.page-hero, .abt-hero, .ax-hero, .cr-hero, .pw-hero, .svc-hero,
              .sx-hero, .ix-hero, .dp-hero, .pp-hero)
  :is(.abt-breadcrumb, .ax-breadcrumb, .partner-crumbs, .dp-bc, [class*="crumb"]) a:hover {
  color: var(--p-text-on-dark) !important;
}

/* an orange link on the #eef2f6 media ground takes the darker step */
html body :is(.dp-spec-source, .sim-img, .arp-media, .ix-product-media,
              .abt-person-media, .sx-solution-card__media, .pe-ia-row__media) a,
html body a.dp-source-link, html body a[class*="official"] {
  color: var(--p-orange-dark) !important;
}

/* Three grounds the pass-11 list did not name: .ax-section-dark (a dark band
   further down AcademiX, not the hero), and the breadcrumb <nav> elements,
   whose links carry no class of their own. The home hero is LIGHT, so naming
   .hero in that list put light orange on a near-white ground at 1.71:1 - it
   is excluded rather than added. */
html body :is(.ax-section-dark, .ax-section--dark, .svc-section-dark, .cr-section-dark,
              .abt-section-dark, .ix-section-dark, .pp-section-dark)
  :is(.eyebrow, .kicker, [class*="-eyebrow"], [class*="-kicker"], .ax-kicker) {
  color: var(--p-orange-light) !important;
}

html body :is(.abt-hero, .svc-hero, .cr-hero, .pw-hero, .ax-hero, .sx-hero,
              .ix-hero, .dp-hero, .pp-hero, .page-hero)
  :is(nav[class*="breadcrumb"], nav[class*="crumb"], [class*="breadcrumb"], [class*="crumbs"]) a {
  color: var(--p-text-on-dark-2) !important;
}
html body :is(.abt-hero, .svc-hero, .cr-hero, .pw-hero, .ax-hero, .sx-hero,
              .ix-hero, .dp-hero, .pp-hero, .page-hero)
  :is(nav[class*="breadcrumb"], nav[class*="crumb"], [class*="breadcrumb"], [class*="crumbs"]) a:hover {
  color: var(--p-text-on-dark) !important;
}

/* The last two lose on weight, not on match: homepage-palette.css sets both
   with !important at three classes. Matching that weight rather than reaching
   for a broader selector. */
html body main.abt-page .abt-hero .abt-breadcrumb.abt-breadcrumb a {
  color: var(--p-text-on-dark-2) !important;
}
html body main.abt-page .abt-hero .abt-breadcrumb.abt-breadcrumb a:hover {
  color: var(--p-text-on-dark) !important;
}
html body main.ax-page .ax-section.ax-section-dark .ax-kicker.ax-kicker {
  color: var(--p-orange-light) !important;
}

/* ==========================================================================
   PASS 12 - orange restraint, second sweep.

   Auditing every non-button element with a solid orange fill across 18 pages
   returned five patterns. Three are legitimate signatures - the "New" badge
   and the manufacturer pill appear once per page, and the primary button is
   meant to be orange. Two were the pattern brief item 4 names directly:

     .cr-value-num   a 210x17 solid orange bar on all four careers cards
     .abt-step-num   five 48x48 orange discs down the About process
     .svc-step-num   the same five down Engineering Support

   A filled bar on every card reads as the body colour rather than an accent.
   Both become the restrained form the rest of the site already uses: a quiet
   label with a short orange rule, and an outlined step marker.
   ========================================================================== */

html body main .cr-value .cr-value-num.cr-value-num {
  display: block;
  width: auto;
  padding: 0 !important;
  background: transparent !important;
  color: var(--p-orange-readable) !important;
  font-family: var(--p-font-mono) !important;
  font-size: var(--p-eyebrow) !important;
  font-weight: 700 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase;
  border-radius: 0 !important;
}

html body main .cr-value .cr-value-num.cr-value-num::before {
  content: "";
  display: block;
  width: 26px;
  height: 2px;
  margin-bottom: 12px;
  background: var(--p-orange-readable);
}

html body main :is(.abt-step-num, .svc-step-num) {
  background: transparent !important;
  color: var(--p-orange-readable) !important;
  border: 1.5px solid var(--p-orange-readable) !important;
  box-shadow: none !important;
  font-family: var(--p-font-mono) !important;
  font-weight: 700 !important;
}

/* on the dark process bands the outline takes the light value */
html body :is(.abt-process, .svc-process, .section.dark, .sx-section--navy)
  :is(.abt-step-num, .svc-step-num) {
  color: var(--p-orange-light) !important;
  border-color: var(--p-orange-light) !important;
}

/* the step markers sit behind a three-class rule in the page sheets */
html body main :is(.abt-process, .abt-page, .svc-page, .svc-process)
  :is(.abt-step, .svc-step) :is(.abt-step-num, .svc-step-num) {
  background: transparent !important;
  background-image: none !important;
  color: var(--p-orange-light) !important;
  border: 1.5px solid var(--p-orange-light) !important;
  box-shadow: none !important;
}

/* ==========================================================================
   PASS 13 - the accent, placed where it earns its keep.

   Measured across 18 pages, card actions rendered in five different colours:

     rgb(15,34,56)   navy      .more, .product-more        14 cards on the home page
     rgb(29,65,96)   navy-800  .ind-link                    6 cards
     rgb(200,66,15)  orange    .arp-go, .ix-directory-row b correct
     rgb(255,177,141) light    .launch-link                 correct, on dark
     rgba(255,255,255,.82)     .ind-link on dark            correct

   Only 2 of 32 home-page cards carried any accent at all, which is why the
   page reads flat. The accent belongs on ONE thing per card - the action -
   because that is the affordance. The eyebrow, the metadata and the copy stay
   slate, so the orange is the thing the eye finds.

   Orange is used, site-wide, at exactly four moments:
     1. the card action and the primary button
     2. the section eyebrow, once per section
     3. active and current state - navigation, breadcrumb, form focus
     4. one structural mark - a short rule under a heading, a step marker
   ========================================================================== */

html body main :is(
  .more, .product-more, .ind-link, .launch-link, .arp-go, .sim-explore,
  .svc-card-link, .resource-card-link, .pcard-xref a, .ax-card-link,
  .pp-related-card b, .abt-domain-card a, .cr-role-link, .pe-ia-overview,
  [class*="-more"], [class*="-explore"], [class*="explore-"], [class*="-go"]
):not(.expo *):not([class*="btn"]):not([class*="button"]) {
  color: var(--p-orange-readable) !important;
  font-family: var(--p-font-display) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

/* the same action sitting on a dark card takes the light value */
html body :is(.section.dark, .systems, .final, .sx-section--navy, .abt-process,
              .cr-expect, .pw-readiness, .conversion-panel, .site-cta,
              .industry-card.anchor, .solution.anchor, [class*="--navy"],
              [class*="-dark"])
  :is(.more, .product-more, .ind-link, .launch-link, .arp-go, .sim-explore,
      [class*="-more"], [class*="-explore"], [class*="-go"]):not([class*="btn"]) {
  color: var(--p-orange-light) !important;
}

/* ---- card interior rhythm ------------------------------------------------
   Eyebrow, title, copy, then the action pushed to the foot of the card so a
   row of cards shares one action baseline regardless of copy length. */
html body main :is([class*="card"], .solution, .launch, .resource, .next-step,
                   .ix-directory-row, .sx-solution-card
                  ):not(.expo):not(.expo *):not([class*="cards"]):not([class*="card-"]):not([class*="card__"]):not([class*="-card-"]) {
  /* NOTE: this block used to set `display:flex; flex-direction:column` so the
     action could be pushed to the card foot with margin-top:auto. That was wrong
     three times over, because [class*="card"] also matches CONTAINERS and ROWS:

       .cards                a 3-column grid of cards (software assurance)
       .ifp-area-cards       a 4-column grid of cards (ifm technology areas)
       .industry-route-card  a HORIZONTAL need -> solution -> technology row

     Each was flipped to a vertical column. The card sheets already set their own
     display; only the action alignment is claimed here, and margin-top:auto is
     inert where it does not apply. */
  min-width: 0;
}

html body main :is([class*="card"], .solution, .launch, .resource,
                   .sx-solution-card):not(.expo):not(.expo *):not([class*="cards"]):not([class*="card-"]):not([class*="card__"]):not([class*="-card-"]) p {
  max-width: 46ch;
  margin-block: 0 0;
}

html body main :is([class*="card"], .solution, .launch, .resource, .next-step,
                   .sx-solution-card):not(.expo):not(.expo *):not([class*="cards"]):not([class*="card-"]):not([class*="card__"]):not([class*="-card-"])
  > :is(.more, .product-more, .ind-link, .launch-link, .arp-go, .sim-explore,
        [class*="-more"], [class*="-explore"], [class*="-go"]):not([class*="btn"]) {
  margin-top: auto;
  padding-top: 18px;
  align-self: flex-end;
}

/* ---- hover: a warm edge, not a lift-off --------------------------------- */
@media (hover: hover) and (pointer: fine) {
  html body main :is(a[class*="card"], a.solution, a.resource, a.launch,
                     a.ix-directory-row, a.sx-solution-card
                    ):not(.expo):not(.expo *):hover {
    border-color: var(--p-orange-light) !important;
    transform: translateY(-2px);
    box-shadow: var(--p-shadow) !important;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  }
  html body main :is(a[class*="card"], a.solution, a.resource, a.launch,
                     a.ix-directory-row, a.sx-solution-card):not(.expo):hover
    :is([class*="-more"], [class*="-explore"], [class*="-go"], .more, .ind-link) {
    color: var(--p-orange-dark) !important;
  }
}

/* ==========================================================================
   PASS 14 - what the accent is NOT for.

   Applying the accent to every card action surfaced the inverse problem on the
   contact form: four section headings ("Your details", "Requirement context",
   "Test & measurement requirements", "Precision environment requirements")
   were rendering in orange. A heading is not an action, and four orange
   headings down one form is the pattern brief item 4 warns about.

   The required-field asterisks stay orange - that IS an indicator, and it is
   the one place on the form where the accent carries meaning.
   ========================================================================== */

html body main :is(.contact-form-section__title, .contact-fieldset__title,
                   [class*="form-section"] [class*="title"], legend):not(.expo *) {
  color: var(--p-text-muted) !important;
}

html body main :is(form, .contact-form-card, .cr-form-card) :is(em, i):not([class]) {
  color: var(--p-orange-readable) !important;
  font-style: normal;
  font-weight: 700;
}

/* ---- text elegance: the card's three text roles -------------------------
   One rhythm, so a card reads eyebrow -> title -> copy -> action on every
   page: the label sits above the title with 10px of air, the title clears the
   copy by 8px, and the copy holds a 46ch measure. */
html body main :is([class*="card"], .solution, .launch, .resource, .next-step,
                   .ix-directory-row, .sx-solution-card
                  ):not(.expo):not(.expo *):not([class*="cards"]):not([class*="card-"]):not([class*="card__"]):not([class*="-card-"])
  > :is(.eyebrow, .kicker, [class*="-kicker"], [class*="-eyebrow"], [class*="-cat"]) {
  margin-block: 0 10px;
}

html body main :is([class*="card"], .solution, .launch, .resource, .next-step,
                   .ix-directory-row, .sx-solution-card
                  ):not(.expo):not(.expo *):not([class*="cards"]):not([class*="card-"]):not([class*="card__"]):not([class*="-card-"])
  > :is(h2, h3, h4, strong) {
  margin-block: 0 8px;
  text-wrap: balance;
}

/* ==========================================================================
   PASS 15 - two wrong grounds, both mine.

   The pass-13 accent rule carries three :not() clauses, which pushed it to
   (0,4,4) - above the (0,3,2) dark-ground override written to correct it. So
   the dark cards took the light-ground orange:

     .solution.featured   #C8420F on #16324E   2.65:1
     .launch              #C8420F on #172A3F   2.95:1
     .industry-card.anchor #C8420F on #0F2238  3.25:1

   And in the other direction, pass 12 keyed the step markers on the SECTION.
   .svc-section-dark is navy but the .svc-step card inside it is white, so the
   marker took the on-navy orange against white at 1.76:1.

   Ground is a property of the nearest painted surface, not the section.
   ========================================================================== */

html body main :is(.section.dark, .systems, .final, .sx-section--navy, .abt-process,
                   .cr-expect, .pw-readiness, .conversion-panel, .site-cta,
                   .solution.featured, .solution.anchor, .launch,
                   .industry-card.anchor, [class*="--navy"], [class*="-dark"])
  :is(.more, .product-more, .ind-link, .launch-link, .arp-go, .sim-explore,
      [class*="-more"], [class*="-explore"], [class*="-go"]
     ):not(.expo *):not([class*="btn"]):not([class*="button"]) {
  color: var(--p-orange-light) !important;
}

/* the step marker reads the card it sits on, not the band behind it */
html body main .svc-step .svc-step-num.svc-step-num {
  color: var(--p-orange-readable) !important;
  border-color: var(--p-orange-readable) !important;
}
html body main .abt-step .abt-step-num.abt-step-num {
  color: var(--p-orange-light) !important;
  border-color: var(--p-orange-light) !important;
}

/* ==========================================================================
   PASS 16 - process-chain arrows.

   Four page families draw the same circular step arrow from one rule in
   automation-partner-premium.css:

     :where(.pz-chain article,.sft-node,.ifp-node,.nv-node):not(:last-child)::after
       { width:32px; right:-24px; top:34px; }

   One offset, four different container gaps:

     .sft-architecture   gap 10px   32px marker  ->  22px of it lands on the card
     .nv-architecture    gap 10px   32px marker  ->  22px on the card
     .ifp-architecture   gap 24px   32px marker  ->   8px on the card
     .pz-chain           gap 30px   32px marker  ->   8px on the card

   So every arrow sat partly on top of a card, half its ring reading against
   white and half against the section - which is why they read as cut in half
   rather than as markers.

   One gap (30px), one marker (26px) centred in it with 2px of clearance on
   each side, vertically centred rather than pinned 34px from the top, and in
   the readable orange so the white glyph clears AA at 4.9:1.
   ========================================================================== */

html body main :is(.pz-chain, .sft-architecture, .ifp-architecture,
                   .nv-architecture):not(.expo *) {
  gap: 30px !important;
}

html body main :is(.pz-chain article, .sft-node, .ifp-node,
                   .nv-node):not(:last-child):not(.expo *)::after {
  top: 50% !important;
  right: -28px !important;
  width: 26px !important;
  height: 26px !important;
  transform: translateY(-50%) !important;
  background: var(--p-orange-readable) !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

/* the vertical step marker used inside the feature diagrams takes the same
   fill, size and weight, so a chain reads the same whichever way it runs */
html body main :is(.pz-feature__diagram i, [class*="diagram"] > i,
                   .di-flow-arrow, .arch-arrow-node):not(.expo *) {
  width: 26px !important;
  height: 26px !important;
  background: var(--p-orange-readable) !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

/* below the breakpoint where the row becomes a column the horizontal arrow is
   hidden by the page sheet; nothing to re-point */

/* ==========================================================================
   PASS 17 - the industry route table.

   "Industry -> solution -> technology" is a five-cell row: need, arrow,
   solution, arrow, technology, under a header row of column labels. It was
   being flipped to a flex column by the card rule above, which stacked all
   five cells and made each row 148px tall instead of 75px. The row also
   carried 26px of card padding against the header's 24px, so the columns sat
   3px out of register.
   ========================================================================== */

html body main :is(.industry-route-head, .industry-route-card) {
  display: grid !important;
  grid-template-columns: minmax(150px, 1fr) 32px minmax(160px, 1fr) 32px minmax(170px, 1.15fr);
  align-items: center;
  gap: 0 16px;
}

/* the row carries a 1px border and 26px of card padding; the header carried
   neither. The header takes the same box so the two share one set of edges. */
html body main .industry-route-head {
  border: 1px solid transparent !important;
  padding-inline: 26px !important;
}

html body main .industry-route-card { padding-block: 16px !important; min-width: 0; }

/* the solution cell is the row's action, so it carries the accent */
html body main a.ix-route-link { color: var(--p-orange-readable) !important; font-weight: 700; }
html body main a.ix-route-link:hover { color: var(--p-orange-dark) !important; }

@media (max-width: 900px) {
  html body main .industry-route-head { display: none !important; }
  html body main .industry-route-card { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  html body main .industry-route-card > .industry-route-arrow { display: none; }
}

/* ==========================================================================
   PASS 18 - five automation heroes without their image.

   Each of these heroes was a two-column grid: copy on the left, a visual on
   the right. The visual has been removed from the markup on

     control-hmi-motion-safety.html                     .cdy-stage
     machine-safety-safe-automation.html                .pz-hero__visual
     industrial-communication-gateways-edge-connectivity.html  .sft-collage
     industrial-sensors-io-link-machine-diagnostics.html       .ifp-hero__visual
     process-monitoring-data-logging-dashboards.html    .aw-hero__image

   so the grid collapses to one column rather than leaving a 530px hole, and
   the copy takes the reading measure instead of running the full width.
   ========================================================================== */

html body main :is(.cdy-hero__grid, .pz-hero__grid, .sft-hero__grid,
                   .ifp-hero__grid, .aw-hero__grid, .wg-hero__grid, .ecs-hero__grid):not(:has(img)) {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
}

html body main :is(.cdy-hero__grid, .pz-hero__grid, .sft-hero__grid,
                   .ifp-hero__grid, .aw-hero__grid, .wg-hero__grid, .ecs-hero__grid):not(:has(img)) > *:first-child {
  max-width: 920px;
}

html body main :is(.cdy-hero__grid, .pz-hero__grid, .sft-hero__grid,
                   .ifp-hero__grid, .aw-hero__grid, .wg-hero__grid, .ecs-hero__grid):not(:has(img)) :is(h1, .ifp-hero__lead, p) {
  max-width: 30ch;
}
html body main :is(.cdy-hero__grid, .pz-hero__grid, .sft-hero__grid,
                   .ifp-hero__grid, .aw-hero__grid, .wg-hero__grid, .ecs-hero__grid):not(:has(img)) p { max-width: 68ch; }

/* the process page sets its hero grid from a rule that also carries the
   container class, so the single-column collapse needs the same weight */
html body main .aw-hero .aw-container.aw-hero__grid:not(:has(img)),
html body main .cdy-hero .cdy-wrap.cdy-hero__grid:not(:has(img)),
html body main .pz-hero .pz-wrap.pz-hero__grid:not(:has(img)),
html body main .sft-hero .sft-wrap.sft-hero__grid:not(:has(img)),
html body main .ifp-hero .ifp-wrap.ifp-hero__grid:not(:has(img)) {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
}

/* automation-elegant-v3.css sets this hero grid from a four-class selector
   (.automation-page.aw-detail.aw-elegant .aw-hero__grid) with !important, so
   the collapse needs to clear four classes rather than three. */
html body.automation-page main .aw-hero .aw-container.aw-hero__grid.aw-hero__grid:not(:has(img)) {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
}

/* ==========================================================================
   PASS 19 - card interiors: images that overflow, and space that reads empty.

   Measured on the pages named in the brief:

     .pe-ia-row__media   390x178 well holding a 390x244 image  -> 66px clipped
     .pe-ia-row          action block carried 23px margin + 20px padding at the
                         foot, which is what made the cards look stretched
     .dph-app-grid       292x245 cards holding 108-189px of content -> up to
                         93px of dead space under the copy
     .arch-choice-guide  412x130 cards holding 150px of content -> clipped
   ========================================================================== */

/* ---- 1. media wells hold their image, at one ratio ---------------------- */
html body main :is(.pe-ia-row__media, .cq-ia-row__media):not(.expo *) {
  display: block;
  aspect-ratio: 16 / 10;
  height: auto !important;
  overflow: hidden;
  background: var(--p-surface);
}
html body main :is(.pe-ia-row__media, .cq-ia-row__media):not(.expo *) img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  padding: 0 !important;
}
/* diagrams and equipment shots are contained, not cropped */
html body main :is(.pe-ia-row__media--contain, .cq-ia-row__media--contain):not(.expo *) img {
  object-fit: contain !important;
  padding: 14px !important;
  background: var(--p-surface);
}

/* the action sits at the foot without a stack of margin above it */
html body main :is(.pe-ia-row, .cq-ia-row):not(.expo *) > b {
  margin-top: auto !important;
  padding: 14px 20px 20px !important;
}

/* ---- 2. cards hug their content ----------------------------------------
   A four-up grid of short text cards forced every card to the height of the
   longest, leaving up to 93px empty under the shorter ones. */
html body main :is(.dph-app-grid, .arch-choice-guide, .ix-support-list,
                   .dph-capability-grid):not(.expo *) {
  align-items: start;
}
html body main :is(.arch-choice-guide > *, .dph-app-grid > *):not(.expo *) {
  height: auto !important;
  min-height: 0 !important;
}

/* ---- 3. numbering only where there is a sequence ------------------------
   A choice guide and a set of parallel technology domains are not ordered, so
   the 01/02/03 markers were structure that encoded nothing. The process steps
   on About and Engineering Support keep theirs - those genuinely run in order. */
html body main :is(.arch-choice-guide__number, .solution .number,
                   .pm-wing-num, .ecs-domain-num):not(.expo *) {
  display: none !important;
}
html body main .arch-choice-guide > *:not(.expo *) { padding-left: 24px !important; }

/* ---- 4. product cards answer the pointer with the accent ---------------- */
@media (hover: hover) and (pointer: fine) {
  html body main :is(.product-card, .pcard, .dp-card, .sim-card, .arp-card,
                     .apx-card, .nv-card, [class*="product-card"],
                     [class*="-product"]):not(.expo):not(.expo *):hover {
    border-color: var(--p-orange-readable) !important;
    box-shadow: var(--p-shadow) !important;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  }
}

/* ---- 5. a card whose action is a link is clickable across its whole face -
   The stretched-link pattern: the card becomes the positioning context and the
   action's ::after covers it. Only applied where the card is not itself an <a>
   and carries exactly one action, so no link is swallowed. */
html body main :is([class*="card"], .solution, .launch, .resource, .next-step
                  ):not(a):not(.expo):not(.expo *):not([class*="cards"]):not([class*="card-"]):not([class*="card__"]):not([class*="-card-"]) {
  position: relative;
}
html body main :is([class*="card"], .solution, .launch, .resource, .next-step
                  ):not(a):not(.expo):not(.expo *):not([class*="cards"]):not([class*="card-"]):not([class*="card__"]):not([class*="-card-"])
  > a:only-of-type::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

/* Card actions ending in "-link" were left out of the accent rule, so several
   families kept their own orange - .dolphin-card-link renders #D84613, which
   measures 4.37:1 on white and misses AA. Folding them into the token both
   fixes the contrast and finishes the accent's coverage of card actions. */
html body main :is(a[class*="-link"], span[class*="-link"]
                  ):not([class*="btn"]):not([class*="button"]):not([class*="skip"]):not(.expo *) {
  color: var(--p-orange-readable) !important;
}
html body main :is(a[class*="-link"]):not([class*="btn"]):not([class*="skip"]):not(.expo *):hover {
  color: var(--p-orange-dark) !important;
}
html body :is(.section.dark, .systems, .final, .sx-section--navy, .abt-process,
              .cr-expect, .pw-readiness, .conversion-panel, .site-cta,
              .solution.featured, .launch, .industry-card.anchor, [class*="--navy"], [class*="-dark"])
  :is(a[class*="-link"], span[class*="-link"]):not([class*="btn"]):not(.expo *) {
  color: var(--p-orange-light) !important;
}

/* an inline block on the PCIe page paints .dolphin-solution-card a with its own
   #D84613, which measures 4.14:1 on the soft grey band */
html body main :is(.dolphin-solution-card, .dolphin-product-card,
                   [class*="solution-card"], [class*="product-card"]):not(.expo *) a:not([class*="btn"]) {
  color: var(--p-orange-readable) !important;
}
html body main :is(.dolphin-solution-card, .dolphin-product-card,
                   [class*="solution-card"], [class*="product-card"]):not(.expo *) a:not([class*="btn"]):hover {
  color: var(--p-orange-dark) !important;
}

/* the datasheet links on the same page use the same #D84613 from a different
   inline selector; on white that is 4.37:1 */
html body main a[href$=".pdf"]:not([class*="btn"]):not(.expo *),
html body main a[target="_blank"]:not([class*="btn"]):not([class*="social"]):not(.expo *) {
  color: var(--p-orange-readable) !important;
}
html body main a[href$=".pdf"]:not([class*="btn"]):not(.expo *):hover,
html body main a[target="_blank"]:not([class*="btn"]):not([class*="social"]):not(.expo *):hover {
  color: var(--p-orange-dark) !important;
}
html body :is(.section.dark, .systems, .final, .conversion-panel, .site-cta, [class*="-dark"], [class*="--navy"])
  a:is([href$=".pdf"], [target="_blank"]):not([class*="btn"]):not(.expo *) {
  color: var(--p-orange-light) !important;
}

/* BEM children use __link, which the -link selectors above do not match; and a
   link sitting on the #EEF2F6 media ground needs the darker step to clear AA. */
html body main :is(a[class*="__link"], span[class*="__link"]):not([class*="btn"]):not(.expo *) {
  color: var(--p-orange-readable) !important;
}
html body main :is(.dp-spec-source, .sim-img, .arp-media, .ix-product-media,
                   .abt-person-media, .sx-solution-card__media, .pe-ia-row__media,
                   [class*="-source"], [class*="-reference"]):not(.expo *) a {
  /* NOTE: this used to also match `main a[href^="http"]:not([class])`, which
     is every unclassed absolute link - including the "Home" breadcrumb on
     About and Engineering Support, painting it orange on navy at 2.79:1.
     Outbound links are covered by the [target="_blank"] rule above. */
  color: var(--p-orange-dark) !important;
}

/* the outbound-link rule above carries three :not() clauses, so the media-ground
   override has to match that weight to win on #EEF2F6 */
html body main :is(.dp-spec-source, [class*="-source"], [class*="-reference"])
  a[target="_blank"]:not([class*="btn"]):not([class*="social"]):not(.expo *) {
  color: var(--p-orange-dark) !important;
}

/* ==========================================================================
   PASS 20 - Leadership portraits, company-page cards, partner-page rhythm.

   Measured:
     .abt-person-media   576x260 well, overflow:visible, holding a 576x365
                         image - 105px of every portrait spilled over the name
                         and role beneath it
     .cr-value           262x399 card holding 297px of content   102px empty
     .svc-service-card   578x380 holding 294px                    86px empty
     .contact-path       217x152 holding 102px                    50px empty
     .pp-section         80px top + 80px bottom PLUS a 40px gap between
                         section boxes - 200px between every content block
   ========================================================================== */

/* ---- 1. portraits fit their frame -------------------------------------- */
html body main :is(.abt-person-media, .cr-person-media, [class*="person-media"],
                   [class*="portrait"]):not(.expo *) {
  display: block;
  overflow: hidden !important;
  aspect-ratio: 4 / 3;
  height: auto !important;
  border-radius: var(--p-radius) var(--p-radius) 0 0;
  background: var(--p-surface-soft-2);
}
html body main :is(.abt-person-media, .cr-person-media, [class*="person-media"],
                   [class*="portrait"]):not(.expo *) img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  /* bias to the upper third so a face is never cropped at the chin */
  object-position: 50% 22% !important;
}

/* ---- 2. cards hug their content ----------------------------------------
   A grid of short text cards stretched every card to the tallest, which is
   what left 50-102px of empty white under the shorter ones. */
html body main :is(.cr-value-grid, .svc-service-grid, .svc-value-grid,
                   .svc-app-grid, .pw-offer-grid, .contact-path-grid,
                   .pp-tech-grid, .pp-related-grid, .pp-overview-grid,
                   .abt-domain-grid, .abt-model-grid):not(.expo *) {
  align-items: start !important;
}

/* ---- 3. one card interior, quietly graded -------------------------------
   The cards were not wrong, they were undifferentiated: same white, same
   hairline, same radius, and no internal hierarchy. This grades the three
   text roles and separates the action with a rule rather than a colour. */
html body main :is(.svc-service-card, .svc-value-card, .svc-app-card,
                   .cr-value, .pw-offer-card, .pw-party, .contact-path,
                   .pp-intro-card, .pp-tech-card, .pp-related-card,
                   .abt-domain-card, .abt-model-card):not(.expo *) {
  padding: 28px !important;
  border-radius: var(--p-radius) !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

html body main :is(.svc-service-card, .svc-value-card, .svc-app-card,
                   .cr-value, .pw-offer-card, .pw-party, .contact-path,
                   .pp-intro-card, .pp-tech-card, .pp-related-card,
                   .abt-domain-card, .abt-model-card):not(.expo *) > :is(h3, strong) {
  margin: 0 0 9px !important;
  font-size: var(--p-h3) !important;
  line-height: 1.28 !important;
  letter-spacing: -.014em !important;
  text-wrap: balance;
}

html body main :is(.svc-service-card, .svc-value-card, .svc-app-card,
                   .cr-value, .pw-offer-card, .pw-party, .contact-path,
                   .pp-intro-card, .pp-tech-card, .pp-related-card,
                   .abt-domain-card, .abt-model-card):not(.expo *) > :is(p, span:not([class*="tag"]):not([class*="label"]):not([class*="icon"]):not([class*="index"])) {
  margin: 0 !important;
  font-size: var(--p-small) !important;
  line-height: 1.62 !important;
  color: var(--p-text-2) !important;
}

/* the label above the title is a quiet mono mark, not a second heading */
html body main :is(.svc-app-label, .pw-party-tag, .pw-offer-index,
                   .contact-path__icon, .svc-card-type):not(.expo *) {
  display: block;
  margin: 0 0 12px !important;
  font-family: var(--p-font-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase;
  color: var(--p-text-muted) !important;
}

/* the action is separated by a hairline, not by empty space */
html body main :is(.svc-service-card, .pp-tech-card, .pp-related-card,
                   .pw-offer-card):not(.expo *) > a:last-child {
  margin-top: 18px !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--p-border);
  width: 100%;
}

/* ---- 4. the pointer is answered by the edge ----------------------------- */
@media (hover: hover) and (pointer: fine) {
  html body main :is(.svc-service-card, .svc-value-card, .svc-app-card,
                     .cr-value, .pw-offer-card, .pw-party, .contact-path,
                     .pp-intro-card, .pp-tech-card, .pp-related-card,
                     .abt-domain-card, .abt-model-card):not(.expo *):hover {
    border-color: var(--p-orange-light) !important;
    box-shadow: var(--p-shadow) !important;
    transform: translateY(-2px);
  }
}

/* ---- 5. partner-page rhythm --------------------------------------------
   80px of padding on both sides of a 40px gap put 200px between every block.
   The padding does the work; the gap is removed and the section steps down to
   the compact rhythm, giving 112px. */
html body main .pp-section:not(.expo *) {
  padding-block: var(--p-sec-compact) !important;
  margin-block: 0 !important;
}
html body main .pp-section + .pp-section:not(.expo *) { margin-top: 0 !important; }
html body main :is(.pp-section, .pp-section-soft):not(.expo *) + :is(.pp-section, .pp-section-soft) {
  margin-top: 0 !important;
}

/* A text card must not clip its own copy. .svc-service-card measured a 408px
   box around 454px of content with overflow:hidden, losing the last two lines.
   Cards that hold no media have nothing to clip, so they size to content. */
html body main :is(.svc-service-card, .svc-value-card, .svc-app-card,
                   .cr-value, .pw-offer-card, .pw-party, .contact-path,
                   .pp-intro-card, .pp-tech-card, .pp-related-card,
                   .abt-domain-card, .abt-model-card):not(:has(img)):not(.expo *) {
  overflow: visible !important;
  height: auto !important;
  min-height: 0 !important;
}

/* Two grounds the earlier passes did not reach, both measured just under AA:
     .svc-breadcrumb a   #B83A0B on navy         2.79:1
     .pw-eyebrow         #C8420F on #EEF2F8      4.41:1
   The breadcrumb rule needs the same three-class weight as the About one; the
   eyebrow's ground is a tinted blue-grey, so it takes the darker orange. */
html body main.svc-page .svc-hero .svc-breadcrumb.svc-breadcrumb a {
  color: var(--p-text-on-dark-2) !important;
}
html body main.svc-page .svc-hero .svc-breadcrumb.svc-breadcrumb a:hover {
  color: var(--p-text-on-dark) !important;
}
html body main.pw-page :is(.pw-readiness, .pw-section-soft, [class*="-soft"]) .pw-eyebrow.pw-eyebrow,
html body main .pw-eyebrow.pw-eyebrow {
  color: var(--p-orange-dark) !important;
}
html body :is(.pw-hero, .section.dark, [class*="-dark"], [class*="--navy"]) .pw-eyebrow.pw-eyebrow {
  color: var(--p-orange-light) !important;
}

/* company-page-integration.css paints every unclassed link on these five pages
   #B83A0B, which is 2.79:1 against the navy hero. Scoping by hero + breadcrumb
   at matching weight did not settle it, so this repeats the page class to sit
   clearly above that rule for the breadcrumb only. */
html body main.abt-page.abt-page.abt-page .abt-breadcrumb a:not([class]),
html body main.svc-page.svc-page.svc-page .svc-breadcrumb a:not([class]),
html body main.cr-page.cr-page.cr-page [class*="breadcrumb"] a:not([class]),
html body main.pw-page.pw-page.pw-page [class*="breadcrumb"] a:not([class]),
html body main.contact-page.contact-page.contact-page [class*="breadcrumb"] a:not([class]) {
  color: var(--p-text-on-dark-2) !important;
}
html body main.abt-page.abt-page.abt-page .abt-breadcrumb a:not([class]):hover,
html body main.svc-page.svc-page.svc-page .svc-breadcrumb a:not([class]):hover {
  color: var(--p-text-on-dark) !important;
}

/* ==========================================================================
   PASS 21 - the two catalogue listings (?cat=all-products).

   Both wing gateways render a product grid whose media well does not clip:

     test-measurement   .tv-media  284x190, overflow:visible
                        10 of 18 images overflowed, worst by 50px
                        (a 589x600 square source rendering 236x240)
     precision-environment  .pe-card-media  225x190, overflow:visible

   The well now clips and holds a stable 3:2 frame with the image contained
   inside it, so a square source and a wide one occupy the same box.

   The card text was also running at two extremes: the test-measurement brand
   line measured 9px and its role/match labels 10px, while the description ran
   at 16px - body scale inside a 286px card, which is what made the cards tall.
   ========================================================================== */

/* ---- 1. the media well holds its image --------------------------------- */
html body main :is(.tv-media, .pe-card-media):not(.expo *) {
  display: block;
  overflow: hidden !important;
  aspect-ratio: 3 / 2;
  height: auto !important;
  background: var(--p-surface);
  border-bottom: 1px solid var(--p-border);
}
html body main :is(.tv-media, .pe-card-media):not(.expo *) img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 14px !important;
}

/* ---- 2. one text hierarchy inside the card ----------------------------- */
html body main :is(.tv-row, .pe-card):not(.expo *) :is(h2, h3) {
  font-size: var(--p-h3) !important;
  line-height: 1.28 !important;
  letter-spacing: -.014em !important;
  margin: 0 0 8px !important;
  text-wrap: balance;
}

html body main :is(.tv-row, .pe-card):not(.expo *) p {
  font-size: var(--p-small) !important;
  line-height: 1.6 !important;
  color: var(--p-text-2) !important;
  margin: 0 !important;
}

/* the brand and the small qualifier labels sat at 9-10px */
html body main :is(.tv-brand, .tv-type, .tv-role, .tv-match,
                   .pe-card-meta):not(.expo *) {
  font-family: var(--p-font-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase;
  color: var(--p-text-muted) !important;
}

html body main :is(.tv-specs, .pe-specs):not(.expo *) {
  font-size: var(--p-micro) !important;
  line-height: 1.55 !important;
  color: var(--p-text-muted) !important;
}

/* ---- 3. the action sits at the foot, behind a hairline ----------------- */
html body main :is(.tv-row, .pe-card):not(.expo *) {
  display: flex;
  flex-direction: column;
}
html body main :is(.tv-body, .pe-card-body):not(.expo *) { flex: 1 1 auto; }
html body main :is(.tv-actions, .pe-card-actions):not(.expo *) {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--p-border);
}
html body main :is(.tv-actions, .pe-card-actions):not(.expo *) a:not([class*="btn"]) {
  color: var(--p-orange-readable) !important;
  font-weight: 700;
}

/* ---- 4. equal heights per row, and an accent on hover ------------------ */
html body main :is(.tv-results, .pe-results-grid):not(.expo *) { align-items: stretch !important; }

@media (hover: hover) and (pointer: fine) {
  html body main :is(.tv-row, .pe-card):not(.expo *):hover {
    border-color: var(--p-orange-readable) !important;
    box-shadow: var(--p-shadow) !important;
    transform: translateY(-2px);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  }
}

/* the catalogue card's own action and compare control were rendering at 10px
   and 9px - below the label floor, and the action is the card's affordance */
html body main :is(.tv-actions, .pe-card-actions):not(.expo *) a,
html body main :is(.tv-actions, .pe-card-actions):not(.expo *) a span {
  font-family: var(--p-font-display) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}
html body main :is(.pe-compare-choice, .tv-compare-choice, [class*="compare-choice"]):not(.expo *),
html body main :is(.pe-compare-choice, .tv-compare-choice, [class*="compare-choice"]):not(.expo *) span {
  font-size: 11px !important;
  letter-spacing: .1em !important;
}

/* ==========================================================================
   PASS 22 - the catalogue filter bar.

   The two ?cat=all-products listings were never in the audit set, and their
   filter UI carries three colours that miss AA:

     small / chip labels  #8195A6 on white          3.10:1  (x22)
     muted spans          #6A7F91, #637B8B, #71869A 3.57-4.29:1
     orange controls      #E5551A ground, white text        3.72:1
                          #E5551A text on #F7F9FC           3.53:1

   All three resolve to tokens that already clear AA on those grounds.
   ========================================================================== */

html body main :is(.wg-catalogue, .tv-catalogue, .pe-catalogue, [class*="-filters"],
                   [class*="-filterbar"], .tv-results, .pe-results-grid,
                   .tv-row, .pe-card):not(.expo *) :is(small, [class*="-label"],
                   [class*="-count"], [class*="-note"], [class*="chip-label"]) {
  color: var(--p-text-muted) !important;
}

/* a muted grey lighter than #5A6B7F does not clear AA on white */
html body main :is(.wg-catalogue, .tv-catalogue, .pe-catalogue, .tv-row, .pe-card,
                   [class*="-filters"], [class*="-filterbar"]):not(.expo *) small {
  color: var(--p-text-muted) !important;
}

/* orange controls: the brand orange is a large-area colour, not a text ground */
html body main :is(.wg-catalogue, .tv-catalogue, .pe-catalogue,
                   [class*="-filters"], [class*="-filterbar"]):not(.expo *)
  :is(button, a)[class*="clear"],
html body main :is(.pe-clear-all, .tv-clear-all, [class*="clear-all"]):not(.expo *) {
  color: var(--p-orange-readable) !important;
}

/* NOTE: a rule here used to set background-color on any element carrying an
   inline background or an "active chip" class. It hit a chip whose text was
   already orange, giving orange on orange at 1:1. The search control is
   named directly below instead. */

/* the remaining filter-bar elements carry no class of their own, so they are
   reached through the containers that do */
html body main :is(.pe-results-head, .tv-results-head, [class*="results-head"],
                   [class*="-filterbar"], [class*="-filters"]):not(.expo *),
html body main :is(.pe-results-head, .tv-results-head, [class*="results-head"],
                   [class*="-filterbar"], [class*="-filters"]):not(.expo *) :is(span, div, small, label) {
  color: var(--p-text-muted) !important;
}

/* the search control: white on #E5551A is 3.72:1 */
html body main :is([class*="-filterbar"], [class*="-filters"], [class*="-search"],
                   .wg-catalogue, .tv-catalogue, .pe-catalogue):not(.expo *)
  button:not([class*="clear"]):not([class*="chip"]) {
  background-color: var(--p-orange-readable) !important;
  color: #fff !important;
}

/* a specification value is information, not an action: it reads in ink, which
   also removes the 4.44:1 orange-on-tint measurement */
html body main :is(.pe-specs, .tv-specs):not(.expo *),
html body main :is(.pe-specs, .tv-specs):not(.expo *) :is(span, b, strong) {
  color: var(--p-text-2) !important;
  background: transparent !important;
}

/* ==========================================================================
   PASS 23 - the brand mark, the float bar, partner logos, dark-ground text.
   ========================================================================== */

/* ---- 1. one wordmark: PRIMIONICS, in the brand orange ------------------- */
html body :is(.nav-logo, .pm-nav-logo) .nav-logo-name,
html body .pm-footer-logo {
  font-family: var(--p-font-display) !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  color: var(--p-orange-readable) !important;
  text-transform: none;
}
html body :is(.nav-logo, .pm-nav-logo) .nav-logo-name { font-size: 21px !important; line-height: 1 !important; }
html body :is(.nav-logo, .pm-nav-logo) { display: inline-flex !important; align-items: center; gap: 0 !important; }
html body :is(.nav-logo, .pm-nav-logo) .nav-logo-tag { display: none !important; }

/* on the navy footer the mark takes the on-dark orange */
html body .pm-footer .pm-footer-logo {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 26px;
  color: var(--p-orange-light) !important;
  text-decoration: none;
}

/* ---- 2. the floating contact bar was invisible --------------------------
   design-system.css hides .float-bar while the consent banner is open, which
   is correct - but once dismissed, .fb-wa and .fb-li rendered as transparent
   inline boxes carrying a white glyph, so the icons sat white-on-white. */
html body .float-bar {
  display: grid !important;
  gap: 10px;
  justify-items: center;
}
html body:has(.consent-banner.open) .float-bar { display: none !important; }

html body .float-bar .float-btn {
  display: grid !important;
  place-items: center;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50%;
  border: 0;
  box-shadow: 0 6px 18px rgba(15, 34, 56, .18);
  color: #fff;
  transition: transform .18s ease, box-shadow .18s ease;
}
html body .float-bar .float-btn svg { width: 21px; height: 21px; fill: #fff; }
html body .float-bar .fb-wa { background: #25d366 !important; }
html body .float-bar .fb-li { background: #0a66c2 !important; }
html body .float-bar .fb-top { background: var(--p-navy-900) !important; }
html body .float-bar .fb-top svg { fill: none; stroke: #fff; }
@media (hover: hover) and (pointer: fine) {
  html body .float-bar .float-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15, 34, 56, .24); }
}
html body .float-social { display: grid; gap: 10px; justify-items: center; }

/* ---- 3. partner marks keep their own colour ---------------------------- */
html body :is(.pm-trust-logos, .brandrow, .trust, .partner-card-logo,
              .pp-logo-panel, [class*="logo"]) img {
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

/* ---- 4. the footer brand column ---------------------------------------- */
html body .pm-footer .pm-footer-grid { align-items: start; }
html body .pm-footer .pm-footer-brand { max-width: 340px; }
html body .pm-footer .pm-footer-blurb {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.62;
  color: var(--p-text-on-dark-2) !important;
}
html body .pm-footer .pm-footer-social { display: flex; gap: 10px; margin-bottom: 22px; }
html body .pm-footer .pm-footer-social a {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--p-radius-sm);
  color: var(--p-text-on-dark-2) !important;
  transition: border-color .18s ease, color .18s ease;
}
html body .pm-footer .pm-footer-social a:hover {
  border-color: var(--p-orange-light);
  color: var(--p-orange-light) !important;
}

html body .pm-footer .pm-newsletter-label {
  display: block;
  margin-bottom: 9px;
  font-family: var(--p-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--p-text-on-dark-2) !important;
}
html body .pm-footer .pm-newsletter-row { display: flex; gap: 8px; }
html body .pm-footer .pm-newsletter-row input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 42px;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: var(--p-radius-sm);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-family: var(--p-font-body);
  font-size: 14px;
}
html body .pm-footer .pm-newsletter-row input::placeholder { color: rgba(255, 255, 255, .55); }
html body .pm-footer .pm-newsletter-row input:focus-visible {
  outline: 0;
  border-color: var(--p-orange-light);
  box-shadow: 0 0 0 3px rgba(255, 177, 141, .22);
}
html body .pm-footer .pm-newsletter-row button {
  flex: none;
  min-height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--p-radius-sm);
  background: var(--p-orange-readable);
  color: #fff;
  font-family: var(--p-font-display);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .18s ease;
}
html body .pm-footer .pm-newsletter-row button:hover { background: var(--p-orange-dark); }
html body .pm-footer .pm-newsletter-note {
  margin: 9px 0 0;
  font-size: 12px;
  color: var(--p-text-on-dark-muted) !important;
}
html body .pm-footer .pm-newsletter-note a {
  color: var(--p-orange-light) !important;
}
html body .pm-footer .pm-newsletter-status {
  min-height: 1.45em;
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--p-text-on-dark-2) !important;
}
html body .pm-footer .pm-newsletter-status[data-state="success"] {
  color: #bfe8d3 !important;
}
html body .pm-footer .pm-newsletter-status[data-state="error"] {
  color: #ffd0d0 !important;
}

@media (max-width: 900px) {
  html body .pm-footer .pm-footer-brand { max-width: none; }
}

/* ==========================================================================
   PASS 24 - text on dark grounds, site-wide.

   A compositing sweep of 16 pages found 19 instances of ink-coloured text on a
   dark band. All but one were on embedded-systems-computing.html, where the
   .ecs-section--dark workflow steps painted:

     strong  #0F2238 on #0D2239   1.06:1   (invisible)
     small   #5A7494 on #0D2239   3.14:1

   The cause is the same every time: a global sets strong/small in ink, and the
   page authored its dark band afterwards. This names the dark containers once
   and gives every inline text role its on-dark value.
   ========================================================================== */

html body :is(
  .section.dark, .systems, .final, .conversion-panel, .site-cta,
  .sx-section--navy, .pz-section--navy, .ecs-section--dark, .svc-section-dark,
  .ax-section-dark, .ix-section-dark, .pp-section-dark, .abt-section-dark,
  .abt-process, .cr-expect, .pw-readiness, .ifm-darkgrid,
  [class*="--dark"], [class*="-dark"], [class*="--navy"], [class*="-navy"]
):not(.expo):not(.expo *) :is(p, li, dd, dt, span, small, strong, b, em, i, td, th, figcaption) {
  color: var(--p-text-on-dark-2) !important;
}

html body :is(
  .section.dark, .systems, .final, .conversion-panel, .site-cta,
  .sx-section--navy, .pz-section--navy, .ecs-section--dark, .svc-section-dark,
  .ax-section-dark, .ix-section-dark, .pp-section-dark, .abt-section-dark,
  .abt-process, .cr-expect, .pw-readiness, .ifm-darkgrid,
  [class*="--dark"], [class*="-dark"], [class*="--navy"], [class*="-navy"]
):not(.expo):not(.expo *) :is(h1, h2, h3, h4, h5, strong, b) {
  color: var(--p-text-on-dark) !important;
}

/* metadata and captions stay one step quieter, but still legible */
html body :is(
  .section.dark, .systems, .final, .conversion-panel, .site-cta,
  .sx-section--navy, .pz-section--navy, .ecs-section--dark, .svc-section-dark,
  .ax-section-dark, .ix-section-dark, .pp-section-dark, .abt-section-dark,
  .abt-process, .cr-expect, .pw-readiness, .ifm-darkgrid,
  [class*="--dark"], [class*="-dark"], [class*="--navy"], [class*="-navy"]
):not(.expo):not(.expo *) :is(small, figcaption, [class*="-meta"], [class*="-note"], [class*="-caption"]) {
  color: var(--p-text-on-dark-muted) !important;
}

/* a card sitting inside a dark band keeps a light edge, not an ink one */
html body :is(.ecs-section--dark, .svc-section-dark, .ax-section-dark,
              .ix-section-dark, .pp-section-dark, .abt-section-dark,
              .section.dark, .sx-section--navy, .pz-section--navy)
  :is([class*="card"], [class*="step"], [class*="panel"], [class*="node"]):not([class*="card-"]) {
  border-color: rgba(255, 255, 255, .14) !important;
}

/* ==========================================================================
   PASS 25 - light cards sitting inside dark bands.

   Pass 24 gave every text role inside a dark container its on-dark value. That
   is right for text on the band, but wrong for a card that paints its own light
   surface inside it. A gradient-aware sweep found 33 such instances:

     .conversion-resource   strong #FFF on #EEF4FA      1.11:1   (8 pages)
                            span   #C6D5E1 on #EEF4FA   1.35:1
                            PDF    #C6D5E1 on #FEF2EC   1.37:1
     .svc-step              h3     #FFF on #FFF         1.00:1   (13 on one page)
                            p      #C6D5E1 on #FFF      1.50:1

   Ground is the nearest painted surface, not the section. These are the light
   surfaces that live inside dark bands.
   ========================================================================== */

html body :is(.conversion-resource, .svc-step, .ecs-finder-results,
              .ecs-finder-results__empty, [class*="--on-light"]),
html body :is(.section.dark, .systems, .final, .conversion-panel, .site-cta,
              .svc-section-dark, .ecs-section--dark, .ax-section-dark,
              [class*="--dark"], [class*="-dark"], [class*="--navy"])
  :is(.conversion-resource, .svc-step, .ecs-finder-results, .ecs-finder-results__empty) {
  color: var(--p-text) !important;
}

html body :is(.conversion-resource, .svc-step, .ecs-finder-results,
              .ecs-finder-results__empty):not(.expo *) :is(p, li, span, small, em, i, td) {
  color: var(--p-text-2) !important;
}
html body :is(.conversion-resource, .svc-step, .ecs-finder-results,
              .ecs-finder-results__empty):not(.expo *) :is(h1, h2, h3, h4, strong, b) {
  color: var(--p-text) !important;
}

/* the requirement-form card: the format mark reads as an orange chip, the
   title in ink and the supporting line in secondary ink */
html body .conversion-resource .conversion-resource__icon {
  color: var(--p-orange-readable) !important;
  background: var(--p-orange-soft) !important;
  border: 1px solid rgba(200, 66, 15, .2);
  border-radius: var(--p-radius-sm);
  font-family: var(--p-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  padding: 6px 8px;
}
html body .conversion-resource {
  background: var(--p-surface) !important;
  border: 1px solid var(--p-border-strong) !important;
  border-radius: var(--p-radius) !important;
}
@media (hover: hover) and (pointer: fine) {
  html body .conversion-resource:hover {
    border-color: var(--p-orange-readable) !important;
    box-shadow: var(--p-shadow) !important;
  }
}

/* Pass 24's dark-ground rule weighs four classes; these light surfaces have to
   clear it, so the class is repeated rather than the rule broadened. */
html body .conversion-resource.conversion-resource.conversion-resource.conversion-resource,
html body .svc-step.svc-step.svc-step.svc-step,
html body .ecs-finder-results.ecs-finder-results.ecs-finder-results.ecs-finder-results {
  background: var(--p-surface) !important;
  border: 1px solid var(--p-border-strong) !important;
  color: var(--p-text) !important;
}

html body .conversion-resource.conversion-resource.conversion-resource.conversion-resource :is(p, span, small, li, em, i),
html body .svc-step.svc-step.svc-step.svc-step :is(p, span, small, li, em, i),
html body .ecs-finder-results.ecs-finder-results.ecs-finder-results.ecs-finder-results :is(p, span, small, li) {
  color: var(--p-text-2) !important;
}

html body .conversion-resource.conversion-resource.conversion-resource.conversion-resource :is(h1, h2, h3, h4, strong, b),
html body .svc-step.svc-step.svc-step.svc-step :is(h1, h2, h3, h4, strong, b),
html body .ecs-finder-results.ecs-finder-results.ecs-finder-results.ecs-finder-results :is(h3, strong, b) {
  color: var(--p-text) !important;
}

html body .conversion-resource.conversion-resource.conversion-resource.conversion-resource .conversion-resource__icon {
  color: var(--p-orange-readable) !important;
  background: var(--p-orange-soft) !important;
}
html body .ecs-finder-results__empty.ecs-finder-results__empty.ecs-finder-results__empty {
  color: var(--p-text-2) !important;
}

/* ==========================================================================
   PASS 26 - the forms.

   Measured on pages/contact.html: 96 visible fields, of which 86 carried a
   <label> that was never associated with its control - no `for`, and the
   control outside the label. The labels were there; the wiring was not. They
   are paired now, so a click on the label focuses the field and a screen
   reader announces it. The one that stays unlabelled is the spam honeypot,
   which is correct.

   What follows is the visual half: one field rhythm, a legible required mark,
   a focus ring that uses the accent, and real error and success states.
   ========================================================================== */

html body :is(.contact-field, .cr-field, .pw-field, .svc-input, .form-field) {
  display: grid;
  gap: 7px;
  min-width: 0;
}

html body :is(.contact-field, .cr-field, .pw-field, .svc-input, .form-field) > label,
html body :is(form label):not(.pm-newsletter-label):not([class*="check"]):not([class*="consent"]) {
  font-family: var(--p-font-body) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
  color: var(--p-text-2) !important;
  text-transform: none !important;
}

/* the required mark reads as an accent, not as body text */
html body form label abbr[title="required"],
html body form label .req { color: var(--p-orange-readable); text-decoration: none; }

html body :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
  width: 100%;
  min-height: var(--p-btn-h);
  padding: 11px 14px;
  border: 1px solid var(--p-border-strong);
  border-radius: var(--p-radius-sm);
  background: var(--p-surface);
  color: var(--p-text);
  font-family: var(--p-font-body);
  font-size: var(--p-body);
  line-height: 1.4;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
html body textarea { min-height: 132px; padding-block: 12px; resize: vertical; }
html body select:not([multiple]) { appearance: none; padding-right: 38px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--p-text-muted) 50%),
                    linear-gradient(135deg, var(--p-text-muted) 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 13px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat; }

html body :is(input, select, textarea)::placeholder { color: var(--p-text-muted); opacity: 1; }

html body :is(input, select, textarea):hover:not(:disabled):not(:focus) { border-color: var(--p-text-muted); }

html body :is(input, select, textarea):focus-visible {
  outline: 0;
  border-color: var(--p-orange-readable);
  box-shadow: 0 0 0 3px rgba(200, 66, 15, .15);
}

html body :is(input, select, textarea):disabled {
  background: var(--p-surface-soft);
  color: var(--p-text-muted);
  cursor: not-allowed;
}

/* validation only speaks once the field has been filled and left */
html body :is(input, textarea):not(:placeholder-shown):user-invalid,
html body select:user-invalid {
  border-color: #b3261e;
  box-shadow: 0 0 0 3px rgba(179, 38, 30, .12);
}
html body :is(input, textarea):not(:placeholder-shown):user-valid:required { border-color: #0f6f4c; }

/* consent and checkbox rows read as one line, not a stack */
html body form :is(label[class*="check"], label[class*="consent"], .contact-consent, .form-consent) {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--p-text-2);
}
html body form input[type="checkbox"] {
  width: 18px; height: 18px; margin: 2px 0 0;
  accent-color: var(--p-orange-readable);
}

/* the field grid: two columns on desktop, one on mobile, full-width rows kept */
html body :is(.contact-fields, .cr-form-grid, .pw-form-grid) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--p-space-3) var(--p-gap-lg);
}
html body :is(.contact-field, .cr-field, .pw-field).full,
html body :is(.contact-field, .cr-field, .pw-field)[class*="full"] { grid-column: 1 / -1; }

/* a section inside the form is separated by a rule, not by a colour */
html body .contact-form-section + .contact-form-section {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--p-border);
}

/* status region */
html body :is(.form-status, [role="status"]) {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.55;
}
html body :is(.form-status, [role="status"])[data-state="error"] { color: #b3261e; }
html body :is(.form-status, [role="status"])[data-state="ok"] { color: #0f6f4c; }

/* the honeypot never renders */
html body input[name="_company_fax"] {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none;
}

/* Two measured just under AA:
     .conversion-resource__icon  #C8420F on the #FDF0EB tint   4.44:1
     .ecs-application span       #EF4F16 on white at 9px       3.62:1
   The tinted chip takes the darker orange; the ECS page's own #EF4F16 resolves
   to the token, and its 9px labels come up to the 11px floor. */
html body .conversion-resource .conversion-resource__icon,
html body .conversion-resource.conversion-resource.conversion-resource.conversion-resource .conversion-resource__icon {
  color: var(--p-orange-dark) !important;
}

html body main :is(.ecs-application, .ecs-card, .ecs-partner, .ecs-pillar,
                   .ecs-resource, .ecs-domain-card):not(.expo *) :is(span, small)[class=""],
html body main .ecs-application:not(.expo *) span,
html body main :is([class^="ecs-"], [class*=" ecs-"]):not(.expo *) :is(.ecs-tag, .ecs-label, .ecs-meta) {
  color: var(--p-text-muted) !important;
  font-size: 11px !important;
  letter-spacing: .1em !important;
}

/* ==========================================================================
   PASS 27 - Leadership portraits, and the company-page card family.

   1. The portraits are placeholder graphics at 1200x760 (16:10) carrying a
      centred silhouette. A 4:3 well with object-position 50% 22% cropped the
      figure out of frame, so each card read as a large empty block. Matching
      the well to the source ratio removes the crop entirely.

   2. Seventeen card families across About, Careers, Partner With Us, Contact
      and Engineering Support measured as the same plain rectangle - white,
      1px, 10px radius - but with drifting padding (20 / 23 / 26 / 28px) and a
      resting shadow on most of them. The design system says most cards carry a
      border and no shadow; elevation is for hover. That, one padding, and a
      single structural mark is what separates them from a plain box.
   ========================================================================== */

/* ---- 1. portraits ------------------------------------------------------- */
html body main :is(.abt-person-media, [class*="person-media"]):not(.expo *) {
  aspect-ratio: 16 / 10 !important;
}
html body main :is(.abt-person-media, [class*="person-media"]):not(.expo *) img {
  object-position: 50% 50% !important;
}

/* ---- 2. one company-page card ------------------------------------------ */
html body main :is(
  .abt-model-card, .abt-domain-card, .abt-step, .abt-audience-card, .abt-office-card,
  .cr-value, .cr-role, .cr-form-card,
  .pw-offer-card, .pw-party, .pw-form-card,
  .contact-path, .contact-form-card, .contact-side-card,
  .svc-service-card, .svc-step, .svc-value-card, .svc-app-card
):not(.expo *) {
  /* padding and the resting shadow are settled by the card rules above at nine
     classes of weight; re-declaring them here only produced an inconsistent
     mix (26/28px, shadow on some cards and not others). */
  border: 1px solid var(--p-border) !important;
  border-radius: var(--p-radius) !important;
  background: var(--p-surface) !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

/* the form cards are the one place elevation is earned - they hold the task */
html body main :is(.cr-form-card, .pw-form-card, .contact-form-card):not(.expo *) {
  box-shadow: var(--p-shadow) !important;
  padding: 32px !important;
}

/* a single structural mark: a short rule above the card's label, so the eye
   finds the start of each card without a box or a colour block */
html body main :is(
  .abt-model-card, .abt-audience-card, .abt-office-card,
  .cr-value, .pw-offer-card, .pw-party,
  .contact-path, .svc-value-card, .svc-app-card
):not(.expo *)::before {
  content: "";
  display: block;
  width: 26px;
  height: 2px;
  margin-bottom: 18px;
  background: var(--p-orange-readable);
  opacity: .85;
}

/* the step cards already carry a numbered marker, so they take the rule at the
   marker instead of above it */
html body main :is(.abt-step, .svc-step):not(.expo *)::before { content: none; }

/* ---- 3. the pointer is answered by the edge ---------------------------- */
@media (hover: hover) and (pointer: fine) {
  html body main :is(
    .abt-model-card, .abt-domain-card, .abt-audience-card, .abt-office-card,
    .cr-value, .cr-role, .pw-offer-card, .pw-party,
    .contact-path, .contact-side-card,
    .svc-service-card, .svc-value-card, .svc-app-card
  ):not(.expo *):hover {
    border-color: var(--p-orange-light) !important;
    box-shadow: var(--p-shadow) !important;
    transform: translateY(-2px);
  }
}

/* ---- 4. the card's three text roles, one rhythm ------------------------ */
html body main :is(
  .abt-model-card, .abt-domain-card, .abt-audience-card, .abt-office-card,
  .cr-value, .pw-offer-card, .pw-party,
  .contact-path, .contact-side-card,
  .svc-service-card, .svc-value-card, .svc-app-card
):not(.expo *) > :is(h2, h3, h4, strong) {
  margin: 0 0 9px !important;
  font-size: var(--p-h3) !important;
  line-height: 1.28 !important;
  letter-spacing: -.014em !important;
  color: var(--p-text) !important;
  text-wrap: balance;
}

html body main :is(
  .abt-model-card, .abt-domain-card, .abt-audience-card, .abt-office-card,
  .cr-value, .pw-offer-card, .pw-party,
  .contact-path, .contact-side-card,
  .svc-service-card, .svc-value-card, .svc-app-card
):not(.expo *) > p {
  margin: 0 !important;
  font-size: var(--p-small) !important;
  line-height: 1.62 !important;
  color: var(--p-text-2) !important;
}

/* PASS 27 gave .abt-step a white ground, but it sits inside .abt-process - a
   dark band - so pass 24 had already painted its text light. White on white,
   1:1. It joins the light-surface list, which is where a card that paints its
   own light ground belongs. */
html body .abt-step.abt-step.abt-step.abt-step {
  background: var(--p-surface) !important;
  border: 1px solid var(--p-border) !important;
  color: var(--p-text) !important;
}
html body .abt-step.abt-step.abt-step.abt-step :is(p, span, small, li, em, i) {
  color: var(--p-text-2) !important;
}
html body .abt-step.abt-step.abt-step.abt-step :is(h1, h2, h3, h4, strong, b) {
  color: var(--p-text) !important;
}
html body .abt-step.abt-step.abt-step.abt-step .abt-step-num {
  color: var(--p-orange-readable) !important;
  border-color: var(--p-orange-readable) !important;
  background: transparent !important;
}

/* ==========================================================================
   PASS 28 - numbered markers removed, and one section rhythm.

   Measured before:
     numbered markers   .abt-step-num x5, .svc-step-num x5, .next-step__n x4,
                        plus bare <b> counters on index and contact
     block-to-block     about 200px · careers 160 · parasoft 112 · contact 104
   ========================================================================== */

/* ---- 1. no counters on cards ------------------------------------------- */
html body main :is(.abt-step-num, .svc-step-num, .next-step__n, .cr-value-num,
                   .ax-stack-num, .pw-offer-index, .arch-choice-guide__number,
                   .ecs-pillar__icon, [class*="step-num"], [class*="-num"],
                   [class*="__n"]):not(.expo *):not([class*="number-"]) {
  display: none !important;
}

/* the space the marker occupied goes back to the card */
html body main :is(.abt-step, .svc-step, .next-step, .cr-value,
                   .pw-offer-card):not(.expo *) > :first-child { margin-top: 0 !important; }

/* ---- 2. one rhythm between sections ------------------------------------
   Sections carry their spacing as padding; nothing adds a margin on top of
   it, so every page reads at the same cadence. */
:root {
  --p-sec-major: 80px;
  --p-sec-standard: 64px;
  --p-sec-compact: 48px;
}
@media (max-width: 1024px) { :root { --p-sec-major: 64px; --p-sec-standard: 52px; --p-sec-compact: 40px; } }
@media (max-width: 640px)  { :root { --p-sec-major: 52px; --p-sec-standard: 44px; --p-sec-compact: 34px; } }

html body main > section:not(.expo):not([class*="hero"]),
html body main > div > section:not(.expo):not([class*="hero"]) {
  margin-block: 0 !important;
}
html body main section + section:not(.expo) { margin-top: 0 !important; }

/* The remaining counters are unclassed <b> elements at the head of each
   .contact-side-item. Scoped to that container, because the other bare <b>
   digits on the site are exhibition hall numbers ("Hall 5"), not counters. */
html body main .contact-side-item > b:first-child { display: none !important; }

/* ========================================================================== 
   PASS 29 - visibility, card rhythm, tables, navigation and footer.

   Generic class-substring suppression is deliberately avoided here. An
   "index" can be a complete page, a navigation link or a card marker; hiding
   all three caused the partner directory to collapse to zero height.
   ========================================================================== */

/* Non-sequential decision cards do not need a number, but their content must
   reclaim the marker column when that number is removed. */
html body main .sx-decision-index { display: none !important; }
html body main .sx-decision {
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: start !important;
}

/* Partner directory and dedicated-page navigation are content, not counters. */
html body main .partner-index { display: block !important; }
html body main .pp-index-link { display: inline-flex !important; }

/* A consistent, readable space between a card heading and its supporting
   copy. This is limited to real card/article interiors so it cannot disturb
   hero or section-heading composition. */
html body main :is(article, [class*="-card"], [class*="__card"])
  :is(h2, h3, h4, .partner-card-name, [class*="-card-name"], [class*="__title"])
  + :is(p, [class*="-desc"], [class*="__desc"], [class*="-copy"], [class*="__copy"]) {
  margin-top: 10px !important;
}
html body main .partner-card-body { gap: 9px !important; }
html body main :is(.partner-card, .pp-tech-card, .pp-intro-card, .pp-related-card,
                   .sx-decision, .sx-discipline, .sx-platform, .sx-context-card) {
  min-width: 0 !important;
  height: 100% !important;
}

/* Table geometry: wrappers scroll instead of compressing columns into
   word-by-word stacks; cell content keeps normal word boundaries. Existing
   component-level numeric alignment remains intact. */
html body main :is(.table-scroll, .table-wrap, [class*="table-wrap"],
                   [class*="tablewrap"], [class*="-table-wrap"],
                   .dp-spec-wrap, .dp-models, .dp-models-wrap, .dp-acc-wrap,
                   .pd2-model-table-wrap, .pd3-model-table-wrap,
                   .pd3-acc-wrap, .topas-spec-wrap, .p3-compare-wrap):not(.expo *) {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
}
html body main table:not(.expo *) {
  width: 100% !important;
  max-width: none !important;
  border-collapse: collapse !important;
}
html body main table:not(.expo *) :is(th, td),
html body main table:not(.expo *) :is(th, td) * {
  min-width: 0;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: manual !important;
}
html body main table:not(.expo *) :is(th, td) {
  padding: 13px 16px !important;
  line-height: 1.5 !important;
}
html body main table:not(.expo *) th {
  vertical-align: middle !important;
}
html body main table:not(.expo *) td {
  vertical-align: top !important;
}
html body main :is(.spec-table, .dp-spec-table, .dp-models-table,
                   .pd2-model-table, .pd3-model-table, .topas-spec-table,
                   .p3-compare, .cdy-table, .sft-table, .ifm-table,
                   .di-table, .cq-table):not(.expo *) > :is(thead, tbody) > tr > :first-child {
  min-width: 170px !important;
}

/* Company navigation uses six equal information cards, with a clear heading
   and a short descriptor rather than six visually unrelated text links. */
html body .pm-nav .pm-company-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  padding-top: 20px !important;
}
html body .pm-nav .pm-company-grid a {
  display: flex !important;
  min-height: 92px !important;
  min-width: 0 !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  padding: 16px 17px !important;
  border: 1px solid var(--p-border) !important;
  border-radius: 10px !important;
  background: var(--p-surface) !important;
  box-shadow: 0 8px 22px rgba(15, 34, 56, .045) !important;
}
html body .pm-nav .pm-company-grid a:hover {
  border-color: var(--p-orange-readable) !important;
  background: var(--p-orange-soft) !important;
  transform: translateY(-1px);
}
html body .pm-nav .pm-company-grid strong {
  display: block !important;
  color: var(--p-text) !important;
  font-family: var(--p-font-head) !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  line-height: 1.3 !important;
}
html body .pm-nav .pm-company-grid span {
  display: block !important;
  margin-top: 7px !important;
  color: var(--p-text-2) !important;
  font-family: var(--p-font-body) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
}

/* The footer blurb previously inherited the brand wordmark's weight and
   tracking. Restore normal body typography while retaining the logo style. */
html body .pm-footer .pm-footer-blurb {
  max-width: 33ch !important;
  margin: 18px 0 20px !important;
  color: var(--p-text-on-dark-2) !important;
  font-family: var(--p-font-body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.68 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* One measured page cadence, with deliberately compact utility bands. */
:root { --p-sec-major: 72px; --p-sec-standard: 64px; --p-sec-compact: 48px; }
html body main > section:not(.expo):not([class*="hero"]):not(.site-cta):not(.conversion-panel),
html body main > div > section:not(.expo):not([class*="hero"]):not(.site-cta):not(.conversion-panel) {
  padding-block: var(--p-sec-standard) !important;
}
html body main > section.pp-section.pp-relationship.pp-relationship.pp-relationship.pp-relationship,
html body main :is(.pm-trust, [class*="subnav"], [class*="local-nav"]) {
  padding-block: var(--p-sec-compact) !important;
}

@media (max-width: 900px) {
  html body .pm-nav .pm-company-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html body main table:not(.expo *) :is(th, td) { padding: 12px 14px !important; }
}
@media (max-width: 640px) {
  :root { --p-sec-major: 52px; --p-sec-standard: 44px; --p-sec-compact: 34px; }
  html body .pm-nav .pm-company-grid { grid-template-columns: 1fr !important; }
  html body main table:not(.expo *) :is(th, td) { padding: 11px 13px !important; }
}

/* ==========================================================================
   PASS 32 - compact Company page section navigation.
   The generic section-rhythm selector treated these utility navigators as
   full content sections. Keep them as concise, useful navigation strips.
   ========================================================================== */
html body main .company-page-subnav {
  min-height: 0 !important;
  padding-block: 0 !important;
  margin: 0 !important;
  background: #fff !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--p-border) !important;
  box-shadow: 0 7px 18px rgba(15, 34, 56, 0.035);
}

html body main .company-page-subnav > :is(.rail, [class*="inner"]) {
  min-height: 58px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}

html body main .company-page-subnav > :is(.rail, [class*="inner"])::-webkit-scrollbar {
  display: none;
}

html body main .company-page-subnav a {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center;
  min-height: 38px;
  padding: 9px 11px !important;
  border-radius: 7px;
  color: var(--p-text-2) !important;
  font-family: var(--p-font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background-color 160ms ease, color 160ms ease;
}

html body main .company-page-subnav a:hover,
html body main .company-page-subnav a:focus-visible {
  color: var(--p-orange-dark) !important;
  background: var(--p-orange-soft) !important;
}

html body main .company-page-subnav a:focus-visible {
  outline: 2px solid var(--p-orange) !important;
  outline-offset: 1px;
}

@media (max-width: 640px) {
  html body main .company-page-subnav > :is(.rail, [class*="inner"]) {
    min-height: 54px !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }

  html body main .company-page-subnav a {
    min-height: 36px;
    padding: 8px 10px !important;
    font-size: 11px !important;
  }
}

/* ========================================================================== 
   PASS 30 - Embedded Boards & Modules, text-only presentation.

   These six pages intentionally contain no product imagery. Collapse the
   former media columns at the final cascade layer so their content does not
   remain constrained to the first track of a two-column hero.
   ========================================================================== */
html body.embedded-board-visual-free main .hero-grid {
  grid-template-columns: minmax(0, 1fr) !important;
}
html body.embedded-board-visual-free main .hero-grid > .hero-copy {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 940px !important;
}
html body.embedded-board-visual-free.product-catalogue-v2[data-category="embedded-computing"] main .dp-shell .dp-hero {
  grid-template-columns: minmax(0, 1fr) !important;
}
html body.embedded-board-visual-free.product-catalogue-v2[data-category="embedded-computing"] main .dp-shell .dp-hero > .dp-info-col {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  max-width: none !important;
}
html body.embedded-board-visual-free main #products .dph-grid {
  grid-auto-rows: 1fr;
  align-items: stretch !important;
}
html body.embedded-board-visual-free main #products .dph-card--text {
  height: 100% !important;
}

/* ========================================================================== 
   PASS 31 - equal-height card rows on internal pages.

   Home keeps its editorial, staggered composition. Everywhere else, sibling
   cards within the same grid share one row height and every implicit row uses
   the tallest card as its measure. The :has() guard limits this to containers
   whose direct children are recognisable cards rather than ordinary layout
   grids, forms or section headings.
   ========================================================================== */
html body:not([data-page-type="home"]) main :is(
  [class$="-grid"], [class$="__grid"], [class$="-list"], [class$="__list"],
  [class*="-card-grid"], [class*="__card-grid"], .solutions-grid,
  .featured-products, .launches, .applications, .sim-track,
  .portfolio-grid, .product-grid, .tech-grid, .model-grid,
  .sx-decisions, .sx-context, .sx-related, .dp-feats, .dp-apps,
  .pw-model, .pw-output-row, .pw-balance, .abt-process, .svc-process,
  .cr-snapshot, .svc-hero-meta, .abt-hero-proof, .pw-trust-line,
  .arch-choice-guide
):has(> :is(
  article, [class*="-card"], [class*="__card"], .contact-path,
  .next-step, .svc-step, .cr-value, .cr-expect, .pw-party, .pw-output,
  .pw-model-step, .dph-app, .dp-feat, .dp-app, .solution, .launch,
  .pm-application, .pm-wing, .pm-industry, .pm-resource,
  .sx-decision, .sx-discipline, .sx-platform, .sx-product
)) {
  align-items: stretch !important;
  grid-auto-rows: 1fr !important;
}
html body:not([data-page-type="home"]) main :is(
  [class$="-grid"], [class$="__grid"], [class$="-list"], [class$="__list"],
  [class*="-card-grid"], [class*="__card-grid"], .solutions-grid,
  .featured-products, .launches, .applications, .sim-track,
  .portfolio-grid, .product-grid, .tech-grid, .model-grid,
  .sx-decisions, .sx-context, .sx-related, .dp-feats, .dp-apps,
  .pw-model, .pw-output-row, .pw-balance, .abt-process, .svc-process,
  .cr-snapshot, .svc-hero-meta, .abt-hero-proof, .pw-trust-line,
  .arch-choice-guide
) > :is(
  article, [class*="-card"], [class*="__card"], .contact-path,
  .next-step, .svc-step, .cr-value, .cr-expect, .pw-party, .pw-output,
  .pw-model-step, .dph-app, .dp-feat, .dp-app, .solution, .launch,
  .pm-application, .pm-wing, .pm-industry, .pm-resource,
  .sx-decision, .sx-discipline, .sx-platform, .sx-product
) {
  align-self: stretch !important;
  height: 100% !important;
}

/* ==========================================================================
   PASS 33 - homepage capability cards.

   This band previously inherited full section padding while its three items
   were only separated by hairlines. Give the capabilities a deliberate card
   surface, a clearer reading hierarchy and a compact, balanced section frame.
   ========================================================================== */
html body.home-2026[data-page-type="home"] main > section.capability-strip.capability-strip.capability-strip.capability-strip.capability-strip.capability-strip {
  padding-block: 36px !important;
  background: linear-gradient(180deg, #f8fafb 0%, #f5f8fa 100%) !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--p-border) !important;
}

html body.home-2026 main .capability-strip > .wrap {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 16px !important;
}

html body.home-2026 main .capability-strip .capability {
  position: relative;
  min-width: 0;
  min-height: 156px;
  padding: 28px 28px 26px !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid var(--p-border) !important;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(15, 34, 56, 0.055);
}

html body.home-2026 main .capability-strip .capability::before {
  content: "";
  width: 30px;
  height: 3px;
  margin-bottom: 18px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--p-orange);
}

html body.home-2026 main .capability-strip .capability strong {
  display: block;
  margin: 0 0 10px !important;
  color: var(--p-navy) !important;
  font-family: var(--p-font-display) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.015em;
}

html body.home-2026 main .capability-strip .capability span {
  display: block;
  margin: 0 !important;
  color: var(--p-text-2) !important;
  font-family: var(--p-font-body) !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  line-height: 1.62 !important;
}

@media (hover: hover) and (pointer: fine) {
  html body.home-2026 main .capability-strip .capability {
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  }

  html body.home-2026 main .capability-strip .capability:hover {
    transform: translateY(-2px);
    border-color: var(--p-orange-light) !important;
    box-shadow: 0 16px 36px rgba(15, 34, 56, 0.085);
  }
}

@media (max-width: 820px) {
  html body.home-2026[data-page-type="home"] main > section.capability-strip.capability-strip.capability-strip.capability-strip.capability-strip.capability-strip {
    padding-block: 28px !important;
  }

  html body.home-2026 main .capability-strip > .wrap {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    padding-inline: 0 !important;
  }

  html body.home-2026 main .capability-strip .capability {
    min-height: 0;
    padding: 22px 22px 21px !important;
  }

  html body.home-2026 main .capability-strip .capability::before {
    margin-bottom: 14px;
  }
}

/* ==========================================================================
   PASS 34 - Technologies page section navigation.

   The generic section-rhythm pass treated Automation local navigation as a
   content section and added 48px above and below it. All three Automation
   technology indexes now use the same compact navigation language as the
   other Technologies families.
   ========================================================================== */
html body.automation-page main > nav.aw-local-nav.technology-page-subnav.technology-page-subnav.technology-page-subnav.technology-page-subnav.technology-page-subnav.technology-page-subnav {
  min-height: 0 !important;
  margin-block: 0 !important;
  padding-block: 0 !important;
  overflow: hidden !important;
  background: rgba(255, 255, 255, 0.98) !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--p-border) !important;
  box-shadow: 0 7px 18px rgba(15, 34, 56, 0.04) !important;
}

html body.automation-page main > nav.technology-page-subnav > .aw-local-nav__inner {
  width: min(1180px, calc(100% - 40px)) !important;
  min-height: 58px !important;
  margin-inline: auto !important;
  padding: 8px 0 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  overflow-x: auto !important;
  overscroll-behavior-inline: contain;
  scrollbar-width: none !important;
}

html body.automation-page main > nav.technology-page-subnav > .aw-local-nav__inner::-webkit-scrollbar {
  display: none;
}

html body.automation-page main > nav.technology-page-subnav > .aw-local-nav__inner::before {
  content: "On this page" !important;
  margin-right: 4px !important;
  padding-right: 12px !important;
  color: var(--p-text-3) !important;
  border-right: 1px solid var(--p-border) !important;
  font-family: var(--p-font-mono) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.11em !important;
  white-space: nowrap;
}

html body.automation-page main > nav.technology-page-subnav :is(a, .ecs-product-menu-trigger) {
  flex: 0 0 auto !important;
  min-height: 38px !important;
  padding: 9px 11px !important;
  display: inline-flex !important;
  align-items: center !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: var(--p-text-2) !important;
  font-family: var(--p-font-body) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  white-space: nowrap;
}

html body.automation-page main > nav.technology-page-subnav .ecs-product-menu-trigger {
  margin-right: 4px !important;
  color: var(--p-navy) !important;
  font-weight: 700 !important;
}

html body.automation-page main > nav.technology-page-subnav :is(a, .ecs-product-menu-trigger):is(:hover, :focus-visible),
html body.automation-page main > nav.technology-page-subnav a.is-active {
  color: var(--p-orange-dark) !important;
  background: var(--p-orange-soft) !important;
  border-bottom-color: var(--p-orange) !important;
}

html body.automation-page main > nav.technology-page-subnav :is(a, .ecs-product-menu-trigger):focus-visible {
  outline: 2px solid var(--p-orange) !important;
  outline-offset: 1px;
}

@media (max-width: 640px) {
  html body.automation-page main > nav.technology-page-subnav > .aw-local-nav__inner {
    width: 100% !important;
    min-height: 54px !important;
    padding: 7px 12px !important;
  }

  html body.automation-page main > nav.technology-page-subnav > .aw-local-nav__inner::before {
    display: none !important;
  }

  html body.automation-page main > nav.technology-page-subnav :is(a, .ecs-product-menu-trigger) {
    min-height: 36px !important;
    padding: 8px 10px !important;
    font-size: 11px !important;
  }
}

/* Contact has six enquiry routes, so three readable columns produce two
   complete rows instead of a five-card row followed by one orphan card. */
html body[data-page-type="contact"] main .contact-path-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  grid-auto-rows: 1fr !important;
}
html body[data-page-type="contact"] main .contact-path-grid > .contact-path {
  align-self: stretch !important;
  height: 100% !important;
}

/* The numbered markers were removed in pass 28. Reclaim their grid column so
   the requirement guidance uses the full sidebar width. */
html body[data-page-type="contact"] main .contact-side-item {
  display: block !important;
  min-width: 0 !important;
  padding-block: 2px 13px !important;
  border-bottom: 1px solid var(--p-border-soft) !important;
}
html body[data-page-type="contact"] main .contact-side-item:last-child {
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
}
html body[data-page-type="contact"] main .contact-side-item > div {
  width: 100% !important;
  min-width: 0 !important;
}
html body[data-page-type="contact"] main .contact-side-item strong {
  margin-bottom: 5px !important;
}
html body[data-page-type="contact"] main .contact-side-item span {
  display: block !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

@media (max-width: 900px) {
  html body[data-page-type="contact"] main .contact-path-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 640px) {
  html body[data-page-type="contact"] main .contact-path-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ========================================================================== 
   PASS 35 - solution context cards, embedded-platform clarity and shared UI.
   ========================================================================== */

/* Application-context cards share one restrained, equal-height treatment on
   every solution page rendered by solutions-experience.js. */
html body .sx-page .sx-application-grid > .sx-context-card {
  position: relative !important;
  display: flex !important;
  min-width: 0 !important;
  min-height: 180px !important;
  height: 100% !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  padding: 28px 26px 26px !important;
  overflow: hidden !important;
  border: 1px solid var(--p-border-soft) !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, #fff 72%, #f6f9fb 100%) !important;
  box-shadow: 0 10px 28px rgba(15, 34, 56, .055) !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}
html body .sx-page .sx-application-grid > .sx-context-card::before {
  content: "" !important;
  width: 34px !important;
  height: 3px !important;
  margin-bottom: 20px !important;
  border-radius: 999px !important;
  background: var(--p-orange) !important;
}
html body .sx-page .sx-application-grid > .sx-context-card:hover {
  transform: translateY(-3px) !important;
  border-color: var(--p-border-default) !important;
  box-shadow: 0 17px 38px rgba(15, 34, 56, .09) !important;
}
html body .sx-page .sx-application-grid > .sx-context-card h3 {
  margin: 0 0 12px !important;
  color: var(--p-ink-950) !important;
  font-size: clamp(18px, 1.65vw, 22px) !important;
  line-height: 1.22 !important;
}
html body .sx-page .sx-application-grid > .sx-context-card p {
  margin: 0 !important;
  color: var(--p-text-secondary) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

/* Split section headings should read as decisive headings, without a detached
   paragraph occupying a second column. Only the direct div + paragraph layout
   is targeted, so ordinary section body copy is untouched. */
html body main :is(.section-head, .pm-section-head, .ecs-section-head,
                    .arch-section-head, .ax-section-head, .cr-section-head,
                    .dph-section-head, .pe-workflow-section-head,
                    .pw-section-head, .ss-section-head, .aw-section__head,
                    .svc-head, .ifm-head, .nv-head, .pp-head, .sft-head,
                    .cdy-head, .cq-head, .pz-head, .head):has(> div:first-child + p:last-child) > p:last-child {
  display: none !important;
}
html body main :is(.section-head, .pm-section-head, .ecs-section-head,
                    .arch-section-head, .ax-section-head, .cr-section-head,
                    .dph-section-head, .pe-workflow-section-head,
                    .pw-section-head, .ss-section-head, .aw-section__head,
                    .svc-head, .ifm-head, .nv-head, .pp-head, .sft-head,
                    .cdy-head, .cq-head, .pz-head, .head):has(> div:first-child + p:last-child) {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
}

/* Remove the decorative circular/semicircular flourishes while preserving the
   grid and colour overlays supplied by ::before on dark heroes. */
html body :is(.hero, .ecs-hero, .solution-hero, .tm20-hero,
              .abt-hero, .ax-hero, .cr-hero, .svc-hero)::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  box-shadow: none !important;
  background: none !important;
}

/* The privacy choice is a centred decision dialog at every viewport size. */
html body .consent-banner,
html body .consent-banner.open {
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 24px !important;
  width: min(620px, calc(100% - 32px)) !important;
  max-width: 620px !important;
  margin: 0 !important;
  padding: 22px 24px !important;
  transform: translateX(-50%) !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 70px rgba(8, 22, 38, .28),
              0 0 0 100vmax rgba(8, 20, 34, .42) !important;
  z-index: 9500 !important;
}
html body .consent-banner .consent-inner { align-items: flex-start !important; }
html body .consent-banner .consent-copy { max-width: 360px !important; }

/* Embedded overview: clear linked routes, consistent media wells and a genuine
   logo rail for the OEM ecosystem. */
html body.ecs-v2 .ecs-section-head {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  align-items: start !important;
}
html body.ecs-v2 .ecs-pillars { align-items: stretch !important; }
html body.ecs-v2 .ecs-pillar {
  display: flex !important;
  min-height: 100% !important;
  flex-direction: column !important;
  padding: 30px !important;
  border-radius: 14px !important;
  border-top: 3px solid var(--pillar-color, var(--ecs-blue)) !important;
  box-shadow: 0 12px 34px rgba(15, 39, 61, .07) !important;
}
html body.ecs-v2 .ecs-pillar h3 {
  margin: 14px 0 12px !important;
  padding-right: 72px !important;
}
html body.ecs-v2 .ecs-pillar > p {
  min-height: 0 !important;
  margin-bottom: 20px !important;
}
html body.ecs-v2 .ecs-pillar ul {
  display: grid !important;
  gap: 8px !important;
  margin: 0 0 22px !important;
  padding: 18px 0 0 !important;
}
html body.ecs-v2 .ecs-pillar li + li { margin-top: 0 !important; }
html body.ecs-v2 .ecs-pillar li a {
  display: flex !important;
  min-height: 40px !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 9px 11px !important;
  border: 1px solid #dce5eb !important;
  border-radius: 7px !important;
  background: #f7f9fb !important;
  color: var(--ecs-ink) !important;
  line-height: 1.35 !important;
  transition: border-color .16s ease, background .16s ease, color .16s ease !important;
}
html body.ecs-v2 .ecs-pillar li a::after {
  content: "→" !important;
  margin-left: auto !important;
  color: var(--ecs-orange) !important;
  font-size: 14px !important;
}
html body.ecs-v2 .ecs-pillar li a:hover,
html body.ecs-v2 .ecs-pillar li a:focus-visible {
  border-color: #efb093 !important;
  background: #fff4ee !important;
  color: #b93b0e !important;
}
html body.ecs-v2 .ecs-pillar > .ecs-link { margin-top: auto !important; }

html body.ecs-v2 .ecs-domain-card {
  border-radius: 13px !important;
  box-shadow: 0 10px 28px rgba(15, 39, 61, .055) !important;
}
html body.ecs-v2 .ecs-domain-card__media {
  min-height: 220px !important;
  padding: 30px 20px 20px !important;
  border-right: 1px solid #e0e7ec !important;
  background: linear-gradient(145deg, #f8fafb, #eef3f6) !important;
}
html body.ecs-v2 .ecs-domain-card__media img {
  width: 100% !important;
  height: 100% !important;
  max-height: 185px !important;
  object-fit: contain !important;
  object-position: center !important;
}
html body.ecs-v2 .ecs-domain-card__body {
  display: flex !important;
  min-width: 0 !important;
  flex-direction: column !important;
  padding: 26px !important;
}
html body.ecs-v2 .ecs-domain-card__body > .ecs-link { margin-top: auto !important; }

html body.ecs-v2 .ecs-partner-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-rows: 1fr !important;
  align-items: stretch !important;
  gap: 16px !important;
}
html body.ecs-v2 .ecs-partner {
  display: flex !important;
  min-width: 0 !important;
  min-height: 210px !important;
  height: 100% !important;
  flex-direction: column !important;
  padding: 24px !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 26px rgba(15, 39, 61, .05) !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}
html body.ecs-v2 .ecs-partner:hover {
  transform: translateY(-3px) !important;
  border-color: #aebfce !important;
  box-shadow: 0 16px 34px rgba(15, 39, 61, .09) !important;
}
html body.ecs-v2 .ecs-partner img {
  width: 148px !important;
  height: 52px !important;
  margin-bottom: 22px !important;
  object-fit: contain !important;
  object-position: left center !important;
}
html body.ecs-v2 .ecs-partner strong { margin-top: 0 !important; }

html body.ecs-v2 .ecs-resource {
  position: relative !important;
  min-height: 160px !important;
  padding: 28px 24px 24px !important;
  overflow: hidden !important;
  border-radius: 10px !important;
}
html body.ecs-v2 .ecs-resource::before {
  content: "" !important;
  position: absolute !important;
  left: 24px !important;
  top: 20px !important;
  width: 30px !important;
  height: 2px !important;
  background: var(--ecs-orange) !important;
}
html body.ecs-v2 .ecs-resource h3 { margin: 26px 0 9px !important; }

@media (max-width: 1024px) {
  html body.ecs-v2 .ecs-partner-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 720px) {
  html body .consent-banner,
  html body .consent-banner.open { bottom: 14px !important; }
  html body .consent-banner .consent-inner { display: block !important; }
  html body .consent-banner .consent-copy { max-width: none !important; }
  html body .consent-banner .consent-actions { margin-top: 16px !important; }
  html body.ecs-v2 .ecs-domain-card__media {
    min-height: 190px !important;
    border-right: 0 !important;
    border-bottom: 1px solid #e0e7ec !important;
  }
}

/* Keep the complete desktop navigation available on laptops and smaller PCs.
   The compact mobile menu takes over only when the full set no longer fits. */
@media (min-width: 901px) and (max-width: 1100px) {
  html body .pm-nav .nav-inner {
    width: calc(100% - 24px) !important;
    gap: 0 !important;
  }
  html body .pm-nav .nav-logo {
    margin-right: 10px !important;
  }
  html body .pm-nav .nav-links {
    display: flex !important;
    min-width: 0 !important;
    gap: 0 !important;
  }
  html body .pm-nav .nav-link {
    padding-inline: 7px !important;
    font-size: 12px !important;
  }
  html body .pm-nav .nav-right {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    padding-left: 6px !important;
  }
  html body .pm-nav .pm-nav-quote,
  html body .pm-nav .pm-menu-button {
    display: none !important;
  }
}

@media (max-width: 900px) {
  html body .pm-nav .nav-links,
  html body .pm-nav .pm-nav-quote {
    display: none !important;
  }
  html body .pm-nav .pm-menu-button {
    display: inline-grid !important;
  }
  html body .pm-nav .pm-mobile-nav:not([hidden]) {
    display: block !important;
  }
}
@media (max-width: 640px) {
  html body.ecs-v2 .ecs-partner-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html body.ecs-v2 .ecs-pillar h3 { padding-right: 58px !important; }
}

/* ========================================================================== 
   PASS 36 - Embedded Boards & Modules capability cards.
   ========================================================================== */
html body.embedded-board-visual-free main #outcomes .eps-capability-grid {
  counter-reset: eps-capability !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-rows: 1fr !important;
  align-items: stretch !important;
  gap: 18px !important;
}

html body.embedded-board-visual-free main #outcomes .eps-capability-grid > .dph-app {
  counter-increment: eps-capability !important;
  position: relative !important;
  display: flex !important;
  min-width: 0 !important;
  min-height: 270px !important;
  height: 100% !important;
  flex-direction: column !important;
  padding: 30px 28px 28px !important;
  overflow: hidden !important;
  border: 1px solid var(--p-border-soft) !important;
  border-top: 0 !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, #fff 72%, #f6f9fb 100%) !important;
  box-shadow: 0 12px 30px rgba(15, 34, 56, .06) !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

html body.embedded-board-visual-free main #outcomes .eps-capability-grid > .dph-app::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 auto !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--p-orange) 0 42px, #d9e3ea 42px 100%) !important;
}

html body.embedded-board-visual-free main #outcomes .eps-capability-grid > .dph-app::after {
  content: none !important;
  display: none !important;
}

html body.embedded-board-visual-free main #outcomes .eps-capability-grid > .dph-app h3 {
  position: relative !important;
  z-index: 1 !important;
  max-width: 220px !important;
  margin: 24px 0 15px !important;
  padding-right: 12px !important;
  color: var(--p-ink-950) !important;
  font-size: clamp(19px, 1.55vw, 23px) !important;
  line-height: 1.2 !important;
  letter-spacing: -.025em !important;
}

html body.embedded-board-visual-free main #outcomes .eps-capability-grid > .dph-app p {
  position: relative !important;
  z-index: 1 !important;
  margin: 0 !important;
  color: var(--p-text-secondary) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

html body.embedded-board-visual-free main #outcomes .eps-capability-grid > .dph-app:hover {
  transform: translateY(-3px) !important;
  border-color: var(--p-border-default) !important;
  box-shadow: 0 18px 40px rgba(15, 34, 56, .1) !important;
}

@media (max-width: 1080px) {
  html body.embedded-board-visual-free main #outcomes .eps-capability-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  html body.embedded-board-visual-free main #outcomes .eps-capability-grid > .dph-app {
    min-height: 240px !important;
  }
}

@media (max-width: 680px) {
  html body.embedded-board-visual-free main #outcomes .eps-capability-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html body.embedded-board-visual-free main #outcomes .eps-capability-grid > .dph-app {
    min-height: 0 !important;
    padding: 26px 23px 24px !important;
  }
  html body.embedded-board-visual-free main #outcomes .eps-capability-grid > .dph-app h3 {
    max-width: 100% !important;
    margin-top: 22px !important;
  }
}