/*
 * GO PTO shared desktop role contract
 * -----------------------------------
 * This file owns only roles that must remain identical across the public site:
 * typography, masthead/section-head geometry, focus visibility and interaction
 * timing. Page-specific composition and content imagery remain local.
 */

/* The shared public-site typeface must also be available to the React Newsroom,
   which does not load the static-page i18n stylesheet. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("inter-var.woff2") format("woff2");
}

:root {
  --brand-blue: #0066ff;
  --blue: #0066ff;
  --container-max: 1440px;
  --page-pad: 48px;

  --text-overline: 11px;
  --text-caption: 12px;
  --text-small: 13px;
  --text-meta: 14px;
  --text-body: 16px;
  --text-body-lg: 17px;
  --text-card-title: 20px;
  --text-title: 24px;
  --text-heading: 32px;
  --text-display: 40px;
  --text-page-title: 48px;
  --text-section-title: 56px;
  --text-hero-title: 80px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-display: 800;

  --lh-overline: 1.4;
  --lh-caption: 1.5;
  --lh-body: 1.7;
  --lh-card-title: 1.3;
  --lh-section: 1.06;
  --lh-hero: 1.05;

  --ls-overline: 0.16em;
  --ls-display: -0.02em;
  --ls-section: -0.02em;
  --ls-card: -0.01em;

  --motion-control: 180ms;
  --motion-menu: 180ms;
  --motion-theme: 280ms;
  --motion-media: 480ms;
  --motion-switch: 500ms;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);

  --section-compact: 96px;
  --section-standard: 120px;
  --section-spacious: 136px;
}

html,
body,
button,
input,
select,
textarea {
  font-synthesis: none;
}

figure {
  margin: 0;
}

img,
picture,
video {
  border-radius: 0;
}

a,
button,
input,
select,
textarea,
[tabindex] {
  -webkit-tap-highlight-color: transparent;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 4px;
}

button:active,
.btn:active,
[role="button"]:active {
  transform: translateY(1px);
}

.btn,
.header-cta,
.pdp-panel-btn-primary,
.pdp-panel-btn-download,
.pdp-compare-link,
.catalog-filter button,
.tech-tab,
.apx-btn,
.product-action {
  transition-duration: var(--motion-control) !important;
}

/* Same-role controls expose the same pointer and keyboard feedback. */
.header-cta:hover,
.header-cta:focus-visible,
.pdp-panel-btn-download:hover,
.pdp-panel-btn-download:focus-visible {
  transform: translateY(-1px);
}

.pdp-compare-link:hover,
.pdp-compare-link:focus-visible,
.catalog-filter button:hover,
.catalog-filter button:focus-visible,
.tech-tab:hover,
.tech-tab:focus-visible {
  color: var(--brand-blue) !important;
  border-color: rgba(0, 102, 255, 0.5) !important;
  background: rgba(0, 102, 255, 0.05) !important;
}

.product-action:hover,
.product-action:focus-visible,
.home-tech-link:hover,
.home-tech-link:focus-visible,
.t2-app-link:hover,
.t2-app-link:focus-visible,
.abt-hero-link:hover,
.abt-hero-link:focus-visible {
  opacity: 0.7;
}

.catalog-card:hover .catalog-card-link,
.catalog-card:focus-visible .catalog-card-link {
  color: var(--brand-blue) !important;
  border-color: var(--brand-blue) !important;
}

.site-header {
  background: rgba(3, 4, 5, 0.9) !important;
  background-image: none !important;
  transition:
    color var(--motion-theme) var(--ease-standard),
    background-color var(--motion-theme) var(--ease-standard),
    border-color var(--motion-theme) var(--ease-standard) !important;
}

.site-header[data-theme="light"] {
  background: rgba(255, 255, 255, 0.94) !important;
  background-image: none !important;
}

/* Same-origin page changes keep the shared Header visually continuous instead
   of exposing the dark document canvas between two static routes. */
@view-transition {
  navigation: auto;
}

@supports (view-transition-name: gk-site-header) {
  .site-header {
    view-transition-name: gk-site-header;
  }

  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-group(gk-site-header) {
    animation-duration: var(--motion-control);
    animation-timing-function: var(--ease-standard);
  }
}

.main-nav a {
  font-size: var(--text-meta);
  font-weight: var(--fw-medium);
  line-height: 1.6;
}

.main-nav a,
.main-nav a::after,
.brand,
.lang-globe,
.lang-opt,
.header-cta {
  transition-timing-function: var(--ease-standard) !important;
  transition-duration: var(--motion-control) !important;
}

.main-nav a::after {
  transition-duration: var(--motion-control) !important;
}

.site-footer a,
.footer-grid a,
.footer-bottom a {
  transition:
    color var(--motion-control) var(--ease-standard),
    border-color var(--motion-control) var(--ease-standard);
}

.site-footer a:hover,
.site-footer a:focus-visible,
.footer-grid a:hover,
.footer-grid a:focus-visible,
.footer-bottom a:hover,
.footer-bottom a:focus-visible {
  color: var(--brand-blue);
}

/* Shared keyboard entry point for every server-rendered public route. */
.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  color: #fff;
  background: var(--brand-blue);
  transform: translateY(-160%);
}

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

.btn-primary:not(.header-cta):hover,
.btn-primary:not(.header-cta):focus-visible,
.pdp-panel-btn-primary:hover,
.pdp-panel-btn-primary:focus-visible,
.apx-btn:hover,
.apx-btn:focus-visible,
.inq-btn-submit:hover,
.inq-btn-submit:focus-visible {
  color: #fff;
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0, 102, 255, 0.28);
}

/* Shared text roles */
.hero-eyebrow,
.pdp-eyebrow,
.apx-kicker,
.t2-kicker,
.t2-index,
.res-kicker,
.res-overline,
.abt-overline,
.ctc-kicker,
.ctc-loc-overline,
.feature-meta span,
.update-category {
  font-size: var(--text-overline);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
}

.apx-h1,
.t2-h1,
.res-h1,
.abt-h1,
.ctc-h1 {
  margin: 0;
  font-size: var(--text-hero-title);
  font-weight: var(--fw-display);
  line-height: var(--lh-hero);
  letter-spacing: var(--ls-display);
  text-wrap: initial;
}

.apx-h2,
.t2-h2,
.abt-history-title {
  margin: 0;
  font-size: var(--text-section-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-section);
  letter-spacing: var(--ls-section);
  text-wrap: initial;
}

.catalog-card h3,
.apx-prod-name,
.apx-focus-name,
.update-main strong {
  font-size: var(--text-card-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-card-title);
  letter-spacing: var(--ls-card);
}

/* Product-detail roles are shared by the canonical page, generic loader,
   comparison shell and workbench template. */
.pdp-card-specs .pdp-card-title,
.pdp-card-apps .pdp-card-title {
  font-size: var(--text-title) !important;
  font-weight: var(--fw-semibold) !important;
  line-height: 1.2 !important;
  letter-spacing: var(--ls-card) !important;
}

.pdp-panel h3 {
  font-size: var(--text-card-title) !important;
  font-weight: var(--fw-semibold) !important;
  line-height: var(--lh-card-title) !important;
  letter-spacing: var(--ls-card) !important;
}

.cmp-eyebrow {
  font-size: var(--text-overline) !important;
  font-weight: var(--fw-semibold) !important;
  line-height: var(--lh-overline) !important;
  letter-spacing: var(--ls-overline) !important;
}

.cmp-sub {
  line-height: var(--lh-body) !important;
}

.catalog-card,
.apx-prod-link,
.apx-area,
.res-specrow,
.ctc-site-card {
  border-radius: 0;
}

.catalog-card,
.catalog-filter button,
.tech-tab,
.t2-chain-tab,
.apx-prod-link,
.apx-area,
.res-specrow,
.ctc-site-card,
.update-row {
  transition-timing-function: var(--ease-standard) !important;
}

.home-tech-link,
.t2-app-link,
.abt-hero-link,
.ctc-row dd a {
  transition:
    color var(--motion-control) var(--ease-standard),
    background-color var(--motion-control) var(--ease-standard),
    border-color var(--motion-control) var(--ease-standard),
    opacity var(--motion-control) var(--ease-standard);
}

.t2-chain-tab[id],
.t2-product-story[id] {
  scroll-margin-top: 88px;
}

.catalog-card:focus-visible,
.catalog-card-link:focus-visible,
.apx-prod-link:focus-visible,
.apx-area:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 4px;
}

html[lang^="zh"] .apx-h1,
html[lang^="zh"] .t2-h1,
html[lang^="zh"] .res-h1,
html[lang^="zh"] .abt-h1,
html[lang^="zh"] .ctc-h1,
html[lang^="zh"] .apx-h2,
html[lang^="zh"] .t2-h2,
html[lang^="zh"] .abt-history-title,
html[lang^="zh"] .catalog-card h3,
html[lang^="zh"] .update-main strong {
  letter-spacing: 0;
}

/* Shared desktop page geometry. */
@media (min-width: 1180px) {
  /* Keep short routes and long routes on the same desktop grid. */
  html {
    scrollbar-gutter: stable;
  }

  /* The complete desktop Header uses one 61px frame on every rendering stack.
     Static pages and the React Newsroom keep their local markup, but the shared
     geometry below prevents route-to-route shifts in height and control rhythm. */
  .site-header {
    min-height: 61px !important;
  }

  .site-header .nav-wrap,
  .site-header .header-inner {
    height: 60px !important;
    min-height: 60px !important;
  }

  .site-header .main-nav {
    height: 60px !important;
    align-items: stretch !important;
  }

  .site-header .main-nav > a {
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    padding-top: 0 !important;
    padding-bottom: 1px !important;
    line-height: 1.6 !important;
  }

  /* Newsroom is the accepted language-control baseline. The static switch uses
     the same dimensions, label, menu width and selected-state language. */
  .site-header .lang-switch {
    margin-left: 0 !important;
  }

  .site-header :is(.lang-globe, .language-trigger) {
    height: 36px !important;
    min-height: 36px !important;
    gap: 7px !important;
    padding: 0 12px !important;
    font-size: var(--text-caption) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: 1 !important;
  }

  .site-header .lang-globe::after {
    content: "EN";
    order: 2;
    text-align: center;
  }

  html[lang="zh-CN"] .site-header .lang-globe::after {
    content: "中文";
    min-width: 24px;
  }

  .site-header .lang-globe .lc-globe {
    order: 1;
  }

  .site-header .lang-globe .lc-caret {
    order: 3;
    width: 12px !important;
    height: 12px !important;
  }

  .site-header :is(.lang-menu, .language-menu) {
    top: calc(100% + 10px) !important;
    right: 0 !important;
    width: 132px !important;
    min-width: 132px !important;
    padding: 7px !important;
    border: 1px solid rgba(8, 11, 16, 0.11) !important;
    background: #fff !important;
    box-shadow: 0 16px 40px rgba(8, 11, 16, 0.12) !important;
  }

  .site-header[data-theme="dark"] :is(.lang-menu, .language-menu) {
    color: rgba(255, 255, 255, 0.82) !important;
    border-color: rgba(255, 255, 255, 0.11) !important;
    background: rgba(3, 4, 5, 0.96) !important;
  }

  .site-header :is(.lang-opt, .language-menu button) {
    width: 100% !important;
    min-height: 0 !important;
    padding: 10px 12px !important;
    border: 0 !important;
    font-size: var(--text-small) !important;
    font-weight: var(--fw-regular) !important;
    line-height: 1.35 !important;
    text-align: left !important;
  }

  .site-header .lang-opt::before {
    content: none !important;
  }

  .site-header :is(.lang-opt.is-active, .language-menu button.is-selected) {
    color: var(--brand-blue) !important;
    background: rgba(0, 102, 255, 0.06) !important;
    font-weight: var(--fw-regular) !important;
  }

  /* Newsroom owns the accepted navigation feedback: a calm 1px underline,
     180ms scale transition and semibold active item. Static pages inherit it. */
  .main-nav > a::after {
    bottom: 9px !important;
    opacity: 1 !important;
    clip-path: none !important;
    transform: scaleX(0) !important;
    transform-origin: center !important;
    transition: transform var(--motion-control) var(--ease-standard) !important;
  }

  .main-nav > a:hover::after,
  .main-nav > a:focus-visible::after,
  .main-nav > a[aria-current="page"]::after,
  .main-nav > a.is-active::after {
    transform: scaleX(1) !important;
  }

  .main-nav > a[aria-current="page"],
  .main-nav > a.is-active {
    font-weight: var(--fw-semibold) !important;
  }

  .product-list-hero {
    padding-top: 75px !important;
  }

  .apx-hero-grid,
  .t2-hero-head,
  .res-hero-grid,
  .abt-hero-head,
  .ctc-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.66fr);
    gap: 48px;
    align-items: start;
  }

  .apx-hero-copy,
  .t2-hero-lead,
  .res-hero-copy,
  .abt-hero-copy,
  .ctc-hero-copy {
    width: 100%;
    max-width: 38ch;
    margin: 40px 0 0 auto;
    padding-top: 0;
    font-size: var(--text-body-lg);
    line-height: var(--lh-body);
    text-wrap: initial;
  }

  .t2-section-head,
  .apx-app-head,
  .abt-history-head {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.66fr);
    gap: 48px;
    align-items: start;
    margin-bottom: 64px;
  }

  .t2-section-lead,
  .apx-lead,
  .abt-history-lead {
    width: 100%;
    max-width: 38ch;
    margin: 40px 0 0 auto;
    font-size: var(--text-body-lg);
    line-height: var(--lh-body);
    text-wrap: initial;
  }

  .apx-application {
    padding-top: var(--section-standard);
    padding-bottom: var(--section-standard);
    border-bottom: 0 !important;
  }

  .res-hero-copy {
    padding-top: 0 !important;
  }

  .capability-section .capability-showcase {
    padding-left: 0 !important;
  }

  .capability-section .capability-panel {
    padding-left: 34px !important;
  }

  .ctc-row dd a {
    color: var(--brand-blue) !important;
  }

  .res-hero {
    padding-bottom: 24px;
  }

  .ctc-hero {
    padding-bottom: 48px;
  }

  .ctc-section {
    padding-top: 72px;
  }
}

/* --------------------------------------------------------------------------
   Shared responsive contract
   --------------------------------------------------------------------------
   The accepted desktop compositions remain untouched above 1179px. The rules
   below make every later page family enter the same tablet/mobile system as the
   original homepage instead of relying on unrelated legacy selectors. */
@media (max-width: 1179px) {
  :root {
    --page-pad: 32px;
    --section-compact: 80px;
    --section-standard: 96px;
    --section-spacious: 112px;
  }

  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  /* News owns the accepted compact Header. Static routes now use the same
     64px frame, 44px circular controls and visible language label. */
  .site-header {
    min-height: 64px !important;
  }

  .site-header .nav-wrap,
  .site-header .header-inner {
    height: 64px !important;
    min-height: 64px !important;
  }

  .site-header :is(.lang-globe, .language-trigger, .menu-toggle, .news-menu-toggle) {
    width: auto !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 999px !important;
  }

  .site-header :is(.lang-globe, .language-trigger) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 0 10px !important;
    font-size: var(--text-caption) !important;
    font-weight: var(--fw-semibold) !important;
  }

  .site-header .lang-globe::after {
    content: "EN";
    order: 2;
  }

  html[lang="zh-CN"] .site-header .lang-globe::after {
    content: "中文";
  }

  .site-header .lang-globe .lc-globe {
    order: 1;
  }

  .site-header .lang-globe .lc-caret {
    order: 3;
  }

  .site-header :is(.menu-toggle, .news-menu-toggle) {
    place-items: center !important;
    padding: 0 !important;
  }

  :where(
    .hero h1,
    .product-list-hero h1,
    .apx-h1,
    .t2-h1,
    .res-h1,
    .abt-h1,
    .ctc-h1,
    .gk-about-h1,
    .pdp-name
  ) {
    max-width: 100% !important;
    font-size: 64px !important;
    overflow-wrap: anywhere;
  }

  :where(
    .apx-h2,
    .t2-h2,
    .abt-history-title,
    .gk-about-profile h2,
    .gk-about-section-title
  ) {
    max-width: 100% !important;
    font-size: 48px !important;
    overflow-wrap: anywhere;
  }

  /* The original homepage/catalog styles are declared after inquiry.css.
     Preserve their desktop scale, but make the shared responsive scale
     authoritative below the desktop breakpoint. */
  body .hero .container h1,
  body .product-list-hero .masthead-text h1 {
    max-width: 100% !important;
    font-size: 64px !important;
    overflow-wrap: anywhere;
  }

  :where(
    .apx-hero-grid,
    .t2-hero-head,
    .res-hero-grid,
    .abt-hero-head,
    .ctc-hero-grid,
    .gk-about-hero-head,
    .gk-about-profile-grid,
    .gk-about-section-head,
    .gk-about-chain-head
  ) {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.72fr) !important;
    gap: 40px !important;
  }

  :where(
    .apx-hero-copy,
    .t2-hero-lead,
    .res-hero-copy,
    .abt-hero-copy,
    .ctc-hero-copy,
    .gk-about-hero-copy,
    .gk-about-profile-copy,
    .gk-about-section-lead,
    .gk-about-chain-lead
  ) {
    min-width: 0;
    max-width: 100% !important;
  }

  .masthead-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr) !important;
    gap: 56px !important;
  }

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

  .apx-collage {
    min-width: 0;
  }

  .home-tech-chain,
  .t2-chain-shell {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr) !important;
    min-width: 0;
  }

  .home-tech-stage,
  .t2-chain-stage {
    min-width: 0;
  }

  .apx-app-head,
  .t2-section-head,
  .abt-history-head {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.72fr) !important;
    gap: 40px !important;
  }

  .t2-chain,
  .t2-products,
  .t2-apps,
  .t2-manufacturing-grid,
  .t2-stats {
    min-width: 0;
  }

  .res-specrow,
  .res-datasheet-row,
  .res-restricted {
    min-width: 0;
  }

  .gk-about-capability-stage {
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.72fr) !important;
  }

  .gk-about-capability-stat {
    min-width: 0;
    padding-inline: 24px !important;
  }

  .gk-about-trust-core {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr) !important;
    gap: 48px !important;
  }

  .ctc-sites {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .pdp-hero-dark .pdp-hero-grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr) !important;
    gap: 48px !important;
  }

  .pdp-hero-dark .pdp-hero-image,
  .pdp-hero-dark .pdp-hero-image img {
    max-width: 100%;
  }

  .pdp-content-grid {
    grid-template-columns: minmax(0, 1fr) 280px !important;
    gap: 28px !important;
  }

  .pdp-keyspecs-card {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .pdp-keyspec {
    min-width: 0;
  }

  .pdp-keyspec:nth-child(4)::before {
    content: none !important;
  }

  .pdp-spec-row,
  .pdp-feature,
  .pdp-app {
    min-width: 0;
  }
}

@media (max-width: 900px) {
  :root {
    --page-pad: 18px;
    --section-compact: 64px;
    --section-standard: 76px;
    --section-spacious: 88px;
  }

  .site-header .nav-wrap,
  .site-header .header-inner,
  .page-container,
  .container,
  .hero .container {
    width: calc(100% - 36px) !important;
    max-width: none !important;
  }

  /* The Newsroom's white compact menu is the cross-site reference. Keep the
     static shells on the same readable surface instead of inheriting their
     old dark Hero-navigation panel beneath a light Header. */
  .site-header .main-nav {
    left: 14px !important;
    right: 14px !important;
    top: 72px !important;
    padding: 12px 18px !important;
    color: #080b10 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(8, 11, 16, 0.12) !important;
    box-shadow: 0 18px 44px rgba(8, 11, 16, 0.14) !important;
  }

  .site-header .main-nav > a,
  .site-header[data-theme="dark"] .main-nav > a,
  .site-header[data-theme="light"] .main-nav > a {
    display: flex !important;
    align-items: center !important;
    height: 48px !important;
    color: rgba(8, 11, 16, 0.74) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .site-header .main-nav > a:hover,
  .site-header .main-nav > a:focus-visible,
  .site-header .main-nav > a[aria-current="page"],
  .site-header .main-nav > a.is-active {
    color: #0066ff !important;
  }

  :where(
    .hero h1,
    .product-list-hero h1,
    .apx-h1,
    .t2-h1,
    .res-h1,
    .abt-h1,
    .ctc-h1,
    .gk-about-h1,
    .pdp-name
  ) {
    font-size: 52px !important;
    line-height: 1.05 !important;
  }

  :where(
    .apx-h2,
    .t2-h2,
    .abt-history-title,
    .gk-about-profile h2,
    .gk-about-section-title
  ) {
    font-size: 42px !important;
    line-height: 1.08 !important;
  }

  body .hero .container h1,
  body .product-list-hero .masthead-text h1 {
    font-size: 52px !important;
    line-height: 1.05 !important;
  }

  :where(
    .apx-hero-grid,
    .t2-hero-head,
    .res-hero-grid,
    .abt-hero-head,
    .ctc-hero-grid,
    .gk-about-hero-head,
    .gk-about-profile-grid,
    .gk-about-section-head,
    .gk-about-chain-head,
    .apx-app-head,
    .t2-section-head,
    .abt-history-head,
    .masthead-grid
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
  }

  :where(
    .apx-hero-copy,
    .t2-hero-lead,
    .res-hero-copy,
    .abt-hero-copy,
    .ctc-hero-copy,
    .gk-about-hero-copy,
    .gk-about-profile-copy,
    .gk-about-section-lead,
    .gk-about-chain-lead,
    .apx-lead,
    .t2-section-lead
  ) {
    width: 100% !important;
    max-width: 62ch !important;
    margin: 0 !important;
    padding-top: 0 !important;
  }

  .product-list-hero {
    padding: 72px 0 60px !important;
  }

  .product-list-hero .masthead-text {
    max-width: 720px !important;
  }

  .product-list-hero .masthead-bg-image,
  .masthead-rail {
    display: none !important;
  }

  .catalog-intro {
    padding-top: 72px !important;
  }

  .catalog-intro-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 22px !important;
  }

  .catalog-intro h2 {
    max-width: 100%;
    font-size: 40px !important;
    overflow-wrap: anywhere;
  }

  .catalog-systems,
  .catalog-system {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .catalog-filter-group {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  .catalog-filter-label {
    flex-basis: auto !important;
  }

  .catalog-filter-reset {
    margin-left: 0 !important;
    justify-self: start;
  }

  .apx-collage {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(220px, 1fr)) !important;
  }

  .apx-collage-main,
  .apx-collage-a,
  .apx-collage-b,
  .apx-collage-c {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .apx-collage-copy {
    opacity: 1 !important;
    transform: none !important;
  }

  .apx-collage-item::after {
    opacity: 0.92 !important;
  }

  .apx-showcase,
  .apx-area-grid,
  .t2-product-grid,
  .t2-manufacturing-grid,
  .t2-app-grid,
  .t2-product-proof {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .home-tech-chain,
  .t2-chain-shell {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
  }

  .home-tech-stage,
  .t2-chain-stage {
    width: 100% !important;
    min-height: 440px !important;
  }

  .home-tech-panel,
  .t2-chain-panel {
    width: 100% !important;
    max-width: 100% !important;
  }

  .home-tech-caption,
  .t2-chain-panel figcaption {
    max-width: calc(100% - 40px) !important;
    overflow-wrap: anywhere;
  }

  .home-app-collage,
  .t2-apps-grid,
  .about-stats,
  .gk-about-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body .home-app-collage {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
  }

  body .home-app-main,
  body .home-app-a,
  body .home-app-b,
  body .home-app-c {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 280px !important;
  }

  .home-app-item,
  .t2-app-link,
  .about-stat,
  .gk-about-fact {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .home-app-copy,
  .home-app-name,
  .t2-app-link strong,
  .t2-app-link span,
  .about-stat strong,
  .about-stat span,
  .gk-about-fact strong,
  .gk-about-fact span {
    max-width: 100% !important;
    overflow-wrap: anywhere;
  }

  .t2-section-head > *,
  .t2-product-copy,
  .t2-product-proof {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body .t2-section-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body .t2-section-head > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .t2-index {
    width: auto !important;
    white-space: normal !important;
  }

  .apx-scene,
  .apx-showcase-stage {
    min-height: 440px !important;
  }

  .t2-chain-tabs,
  .t2-stats,
  .gk-about-chain,
  .gk-about-ip-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .t2-product-story,
  .t2-app-link,
  .t2-stat,
  .t2-chain-tab,
  .t2-chain-panel,
  .t2-manufacturing-card {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .t2-product-story img,
  .t2-manufacturing-card img,
  .t2-figure img {
    width: 100% !important;
    height: auto !important;
  }

  .t2-figure figcaption,
  .t2-product-story figcaption {
    max-width: 100% !important;
    overflow-wrap: anywhere;
  }

  .res-specrow,
  .res-datasheet-row,
  .res-restricted {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
  }

  .res-spec-cta,
  .res-ds-dl,
  .res-btn {
    justify-self: start !important;
    white-space: normal !important;
  }

  .gk-about-profile-support,
  .gk-about-capability-stage,
  .gk-about-tech-grid,
  .gk-about-trust-core,
  .gk-about-assurance-grid,
  .gk-about-credential-strip {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .gk-about-capability-image {
    min-height: 420px !important;
  }

  .gk-about-capability-data {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .gk-about-capability-stat {
    min-height: 210px !important;
  }

  .gk-about-tech-column + .gk-about-tech-column {
    border-left: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .ctc-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 48px !important;
  }

  .ctc-row {
    grid-template-columns: 112px minmax(0, 1fr) !important;
  }

  .pdp-hero-dark {
    min-height: 0 !important;
    padding: 72px 0 86px !important;
  }

  .pdp-hero-dark .pdp-hero-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 32px !important;
  }

  .pdp-hero-dark .pdp-hero-info {
    max-width: 720px !important;
  }

  .pdp-hero-dark .pdp-hero-image {
    min-height: 360px !important;
  }

  .pdp-hero-dark .pdp-hero-image img {
    position: absolute !important;
    inset: 50% auto auto 50% !important;
    width: min(640px, 100%) !important;
    max-height: 360px !important;
    transform: translate(-50%, -50%) !important;
    object-fit: contain !important;
  }

  .pdp-content-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .pdp-sidebar {
    position: static !important;
    display: block !important;
  }

  .pdp-keyspecs-card {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .pdp-keyspec:nth-child(odd)::before {
    content: none !important;
  }

  .pdp-features,
  .pdp-apps-grid,
  .pdp-spec-list,
  .pdp-spec-list-technical {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .pdp-spec-list-technical::before,
  .pdp-spec-list-technical::after {
    content: none !important;
  }

  .cmp-title {
    font-size: 36px !important;
  }

  .cmp-table-wrap {
    width: 100%;
    overscroll-behavior-inline: contain;
  }

  .cmp-table {
    min-width: 1100px;
  }

  .gk-contact-rail {
    display: none !important;
  }

  /* One compact mobile page ending across the static site and News. */
  .cta {
    padding: 72px 0 62px !important;
  }

  .cta-panel {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 54px 48px !important;
  }

  .cta-actions {
    display: grid !important;
    gap: 18px !important;
    min-width: 0 !important;
    width: min(320px, 100%) !important;
  }

  .cta-panel h2 {
    font-size: 42px !important;
    line-height: 1.06 !important;
    letter-spacing: -0.025em !important;
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 36px 28px !important;
  }

  /* Keep the homepage product visual close enough to the copy to read as one
     first screen instead of a small object stranded below the buttons. */
  body .hero .hero-grid {
    gap: 28px !important;
  }

  body .hero .hero-visual {
    min-height: 520px !important;
  }

  body .hero .hero-product-image {
    width: 118% !important;
    max-width: none !important;
    right: -2% !important;
  }

  .pdp-hero-dark .pdp-hero-image img {
    width: 120% !important;
    max-width: none !important;
    max-height: none !important;
  }
}

@media (max-width: 640px) {
  :root {
    --section-compact: 52px;
    --section-standard: 64px;
    --section-spacious: 76px;
  }

  .site-header .nav-wrap,
  .site-header .header-inner,
  .page-container,
  .container,
  .hero .container {
    width: calc(100% - 28px) !important;
  }

  .site-header .brand-mark {
    width: 18px !important;
    height: 18px !important;
  }

  :where(
    .hero h1,
    .product-list-hero h1,
    .apx-h1,
    .t2-h1,
    .res-h1,
    .abt-h1,
    .ctc-h1,
    .gk-about-h1,
    .pdp-name
  ) {
    font-size: 40px !important;
    line-height: 1.06 !important;
    letter-spacing: -0.025em !important;
  }

  :where(
    .apx-h2,
    .t2-h2,
    .abt-history-title,
    .gk-about-profile h2,
    .gk-about-section-title
  ) {
    font-size: 34px !important;
  }

  body .hero .container h1,
  body .product-list-hero .masthead-text h1 {
    font-size: 40px !important;
    line-height: 1.06 !important;
    letter-spacing: -0.025em !important;
  }

  .apx-hero,
  .t2-hero,
  .res-hero,
  .abt-hero,
  .ctc-hero,
  .gk-about-hero {
    padding-top: 64px !important;
    padding-bottom: 56px !important;
  }

  .catalog-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .catalog-intro h2 {
    font-size: 34px !important;
  }

  .catalog-card {
    min-height: 0 !important;
  }

  .catalog-card-img {
    min-height: 220px !important;
    padding: 28px 20px !important;
  }

  .catalog-card-body {
    padding: 24px 22px 26px !important;
  }

  .catalog-filter-pills {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .catalog-pill {
    min-height: 44px;
    justify-content: center;
    padding-inline: 12px !important;
    white-space: normal;
  }

  .apx-collage {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: repeat(4, minmax(240px, 1fr)) !important;
  }

  .apx-scene,
  .apx-showcase-stage {
    min-height: 320px !important;
  }

  .apx-area,
  .t2-product-story,
  .t2-manufacturing-card {
    padding-inline: 0 !important;
  }

  .t2-chain-tabs,
  .t2-stats,
  .gk-about-chain,
  .gk-about-ip-stats,
  .gk-about-capability-data,
  .gk-about-tech-metrics {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .home-tech-stage,
  .t2-chain-stage {
    min-height: 300px !important;
  }

  .home-tech-caption,
  .t2-chain-panel figcaption {
    right: 16px !important;
    left: 16px !important;
    width: auto !important;
    max-width: none !important;
  }

  .home-app-collage,
  .t2-apps-grid,
  .about-stats,
  .gk-about-facts {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body .home-app-collage {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body .home-app-main,
  body .home-app-a,
  body .home-app-b,
  body .home-app-c {
    min-height: 240px !important;
  }

  .home-app-item,
  .about-stat,
  .gk-about-fact {
    width: 100% !important;
    min-height: 0 !important;
  }

  .home-app-copy {
    right: 22px !important;
    left: 22px !important;
    width: auto !important;
  }

  .t2-chain-tab,
  .t2-stat,
  .gk-about-chain-item,
  .gk-about-ip-stat,
  .gk-about-capability-stat,
  .gk-about-tech-metric {
    min-height: 0 !important;
    padding: 24px 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  .gk-about-capability-image {
    min-height: 300px !important;
  }

  .gk-about-profile-support article,
  .gk-about-profile-support article:last-child {
    width: 100% !important;
    margin-left: 0 !important;
  }

  .gk-about-tech-column {
    padding-top: 30px !important;
  }

  .gk-about-assurance-item,
  .gk-about-credential {
    min-width: 0;
  }

  .ctc-row {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 22px 0 !important;
  }

  .ctc-sites {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .ctc-site-card {
    padding: 26px 22px !important;
  }

  .pdp-hero-dark {
    padding-top: 58px !important;
  }

  .pdp-hero-dark .pdp-hero-image {
    min-height: 320px !important;
  }

  .pdp-hero-dark .pdp-hero-image img {
    width: 145% !important;
    max-width: none !important;
    max-height: none !important;
    left: 48% !important;
  }

  .pdp-keyspecs-strip {
    margin-top: -30px !important;
  }

  .pdp-keyspecs-card {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .pdp-keyspec {
    min-height: 0 !important;
    padding: 16px 18px !important;
    text-align: left !important;
    border-bottom: 1px solid rgba(8, 11, 16, 0.1);
  }

  .pdp-keyspec + .pdp-keyspec::before {
    content: none !important;
  }

  .pdp-content-wrap {
    padding: 64px 0 76px !important;
  }

  .pdp-card,
  .pdp-panel {
    padding: 28px 22px !important;
  }

  .pdp-section-heading,
  .pdp-section-body,
  .pdp-card-head {
    min-width: 0;
  }

  .pdp-spec-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  .pdp-spec-row dd {
    text-align: left !important;
  }

  .cmp-hero {
    padding-top: 64px !important;
  }

  .cmp-title {
    font-size: 32px !important;
  }

  .cta-panel {
    padding: 38px 24px !important;
  }

  .cta-actions {
    width: 100% !important;
  }

  .cta-panel h2 {
    font-size: 34px !important;
  }

  .footer-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body .hero {
    padding-bottom: 64px !important;
  }

  body .hero .hero-grid {
    gap: 18px !important;
  }

  body .hero .hero-visual {
    min-height: 390px !important;
  }

  body .hero .hero-product-image {
    width: 145% !important;
    max-width: none !important;
    right: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-group(gk-site-header) {
    animation-duration: 0.01ms !important;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto;
    transition-duration: 0.01ms;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}