/*
Theme Name: PXISA
Theme URI: https://pxisa.org
Author: PXI Systems Alliance
Description: Editorial, technical theme for the PXI Systems Alliance. Desktop-first, modular section layouts, IBM Plex type system.
Version: 0.3.7
Requires at least: 6.4
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pxisa
*/

/* ============================================================
   PXISA — design tokens & shared styles
   Modern technical / editorial. Desktop-first.
   ============================================================ */

:root {
  --ink: oklch(20% 0.015 250);
  --ink-2: oklch(38% 0.012 250);
  --ink-3: oklch(58% 0.008 250);
  --rule: oklch(88% 0.008 250);
  --rule-strong: oklch(72% 0.012 250);
  --bg: oklch(99% 0.003 250);
  --bg-2: oklch(96.5% 0.005 250);
  --bg-3: oklch(93% 0.008 250);
  --primary: oklch(38% 0.13 248);
  --primary-2: oklch(28% 0.12 250);
  --primary-soft: oklch(94% 0.025 248);
  --accent: oklch(62% 0.16 35);

  --font-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  --font-serif: "IBM Plex Serif", Georgia, serif;

  --max: 1280px;
  --max-narrow: 880px;
  --gutter: 32px;
  --nav-h: 68px;

  --section-py: 96px;
  --card-p: 28px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.55;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  overflow-x: clip;
}

/* ---------- Type scale ---------- */
h1, h2, h3, h4 { margin: 0; letter-spacing: -0.02em; line-height: 1.1; font-weight: 600; color: var(--ink); }
h1 { font-size: clamp(40px, 5vw, 64px); letter-spacing: -0.03em; line-height: 1.05; }
h2 { font-size: clamp(28px, 3vw, 40px); }
h3 { font-size: 22px; letter-spacing: -0.015em; }
h4 { font-size: 16px; letter-spacing: 0; }

p { margin: 0; text-wrap: pretty; }
.lede { font-size: 20px; line-height: 1.5; color: var(--ink-2); max-width: 56ch; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--primary); }

/* ---------- Mono labels ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--primary);
}
.eyebrow.no-line::before { display: none; }

.kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------- Container ---------- */
.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container-narrow { max-width: var(--max-narrow); margin: 0 auto; padding: 0 var(--gutter); }

section { padding: var(--section-py) 0; }

/* ============================================================
   Top nav — sticky
   ============================================================ */
.topbar {
  background: var(--ink);
  color: oklch(85% 0.01 250);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.topbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 32px;
}
.topbar a { color: inherit; opacity: 0.75; white-space: nowrap; }
.topbar a:hover { opacity: 1; color: white; }
.topbar .container > div { white-space: nowrap; }
.topbar .topbar-right { display: flex; gap: 28px; align-items: center; }

/* Language switcher — a <details> disclosure in the topbar. The Google
   Language Translator plugin's own widget (.topbar-translator) is kept in
   the DOM so its <select class="goog-te-combo"> exists for pxisa.js to
   drive, but is hidden with [hidden]. Google's post-translation top frame
   is stripped so page content doesn't jump down. */
.topbar-translator[hidden] { display: none !important; }
body > .skiptranslate { display: none !important; }
body { top: 0 !important; }

.topbar-langs { position: relative; }
.topbar-langs summary {
  list-style: none;
  cursor: pointer;
  color: inherit;
  opacity: 0.75;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.topbar-langs summary::-webkit-details-marker { display: none; }
.topbar-langs summary::marker { content: ''; }
.topbar-langs summary:hover,
.topbar-langs[open] summary { opacity: 1; color: white; }

.topbar-langs-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 160px;
  background: var(--ink);
  border: 1px solid oklch(30% 0.015 250);
  padding: 6px 0;
  z-index: 1000;
  box-shadow: 0 8px 20px oklch(0% 0 0 / 0.3);
}
.topbar-langs-menu a {
  display: block;
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: oklch(85% 0.01 250);
  opacity: 0.85;
  text-decoration: none;
  white-space: nowrap;
}
.topbar-langs-menu a:hover,
.topbar-langs-menu a[aria-current="true"] {
  background: oklch(25% 0.015 250);
  color: white;
  opacity: 1;
}

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.nav-inner {
  display: flex;
  align-items: center;
  height: var(--nav-h);
  gap: 48px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.nav-logo img {
  height: 48px;
  width: auto;
  display: block;
}
.nav-links {
  display: flex;
  gap: 32px;
  align-items: center;
  flex: 1;
}
.nav-links a {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  position: relative;
  padding: 6px 0;
}
.nav-links a.active {
  color: var(--primary);
}
.nav-links a.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -23px;
  height: 2px;
  background: var(--primary);
}
.nav-links a:hover { color: var(--primary); }

/* ---------- Dropdown nav items ---------- */
.nav-item.has-children {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-item.has-children > a {
  display: inline-flex;
  align-items: center;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  position: relative;
  padding: 6px 0;
}
.nav-item.has-children > a.active { color: var(--primary); }
.nav-item.has-children > a.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -23px;
  height: 2px;
  background: var(--primary);
}
.nav-item.has-children > a:hover { color: var(--primary); }
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: -18px;
  margin-top: 0;
  padding-top: 18px;
  min-width: 240px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms;
  z-index: 200;
}
.nav-dropdown > a {
  display: block;
  background: white;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
.nav-dropdown > a:first-child {
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
}
.nav-dropdown > a:not(:first-child) {
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
}
.nav-dropdown > a:hover {
  color: var(--primary);
  background: var(--bg-2);
}
.nav-dropdown > a.active { color: var(--primary); }
.nav-item.has-children:hover .nav-dropdown,
.nav-item.has-children:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-cta .btn { white-space: nowrap; }

/* Nav search panel — revealed under the nav when the search icon is toggled. */
.nav-search { border-bottom: 1px solid var(--rule); background: white; }
.nav-search .container { padding-top: 16px; padding-bottom: 16px; }
.nav-search form {
  display: flex;
  gap: 12px;
  align-items: center;
}
.nav-search input[type="search"] {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  outline: none;
  color: var(--ink);
  background: white;
}
.nav-search input[type="search"]:focus { border-color: var(--primary); }
@media (max-width: 1100px) {
  .nav-logo .nav-logo-sub { display: none; }
}
@media (max-width: 980px) {
  .nav-links { gap: 22px; }
  .nav-links a { font-size: 13.5px; }
}
.nav-cta {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  align-items: center;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 120ms ease;
  text-decoration: none;
  line-height: 1;
}
.btn-primary {
  background: var(--primary);
  color: white;
}
.btn-primary:hover {
  background: var(--primary-2);
  color: white;
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}
.btn-ghost:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.btn-icon {
  padding: 10px;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
}
.btn-icon:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.btn-link {
  padding: 0;
  background: transparent;
  color: var(--primary);
  font-weight: 500;
  border: 0;
  border-radius: 0;
}
.btn-link::after {
  content: "→";
  transition: transform 150ms ease;
}
.btn-link:hover::after { transform: translateX(3px); }

/* ============================================================
   Footer
   ============================================================ */
.footer {
  background: var(--ink);
  color: oklch(78% 0.01 250);
  padding: 80px 0 32px;
  font-size: 14px;
}
.footer h4 {
  color: white;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 16px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid oklch(30% 0.015 250);
}
.footer-brand .footer-logo {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 16px;
}
.footer-brand p {
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 32ch;
  color: oklch(72% 0.01 250);
}
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer ul a { color: oklch(78% 0.01 250); font-size: 13.5px; }
.footer ul a:hover { color: white; }
.footer-bottom {
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: oklch(58% 0.012 250);
}
.footer-bottom .footer-meta { display: flex; gap: 28px; }

/* ============================================================
   Component primitives
   ============================================================ */

/* Section header */
.section-head {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 56px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule);
}
.section-head .section-head-text { max-width: 56ch; color: var(--ink-2); font-size: 17px; line-height: 1.55; }
.section-head h2 { max-width: 14ch; }

/* News cards on dark section */
.news-card:hover { background: oklch(24% 0.014 250); }

/* Category grid tile hover */
.category-tile { background: white; transition: background 150ms ease; }
.category-tile:hover { background: var(--bg-2); }

/* Vendor link (Products page) */
.vendor-link { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; font-size: 13.5px; font-weight: 500; letter-spacing: -0.005em; border: 1px solid var(--rule); color: var(--ink); transition: all 150ms ease; }
.vendor-link:hover { border-color: var(--primary); color: var(--primary); }
.vendor-link[data-expand-hidden] { display: none; }
[data-expand-group].is-expanded .vendor-link[data-expand-hidden] { display: flex; }

/* Generic hover swaps used across pages */
.hover-bg-2 { background: white; transition: background 150ms ease; }
.hover-bg-2:hover { background: var(--bg-2); }
.hover-border-primary { border-color: var(--rule); transition: border-color 150ms ease; }
.hover-border-primary:hover { border-color: var(--primary); }

/* Card */
.card {
  background: white;
  border: 1px solid var(--rule);
  padding: var(--card-p);
  transition: border-color 150ms ease, transform 150ms ease;
}
.card:hover { border-color: var(--rule-strong); }
.card-link { display: block; cursor: pointer; }
.card-link:hover { border-color: var(--primary); }

/* Spec list (label/value rows) */
.spec-list { display: grid; gap: 0; }
.spec-list .row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  padding: 18px 0;
  border-top: 1px solid var(--rule);
  font-size: 15px;
}
.spec-list .row:last-child { border-bottom: 1px solid var(--rule); }
.spec-list .row .label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 4px;
}
.spec-list .row .value { color: var(--ink); line-height: 1.6; }

/* Stat */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.stat { padding: 32px 28px; border-right: 1px solid var(--rule); }
.stat:last-child { border-right: 0; }
.stat .stat-num {
  font-family: var(--font-sans);
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 10px;
}
.stat .stat-num sup { font-size: 18px; vertical-align: super; color: var(--primary); margin-left: 2px; }
.stat .stat-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.stat .stat-sub { font-size: 13px; color: var(--ink-2); margin-top: 6px; max-width: 28ch; line-height: 1.45; }

/* Tag */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--bg-3);
  color: var(--ink-2);
  border-radius: 2px;
}

/* Long-form article body (What is PXI, Why PXI). Paragraphs come from a
   WYSIWYG so they need explicit spacing. */
.article-body p { margin: 0 0 20px; }
.article-body p:last-child { margin-bottom: 0; }
.article-body strong { color: var(--ink); }
.article-body em { color: inherit; }
.article-body ul { margin: 0 0 20px; padding-left: 20px; }
.article-body ul li { margin-bottom: 8px; line-height: 1.55; }

/* Figures embedded inside article-body prose */
.article-body .pxi-figure { margin: 28px 0; padding: 0; }
.article-body .pxi-figure img { display: block; height: auto; border: 1px solid var(--rule); background: white; }
.article-body .pxi-figure figcaption { margin-top: 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--ink-3); line-height: 1.5; }

/* Elementor-driven article pages (-v2). Neutralize the theme's generic
   `section` padding so Elementor's own spacing controls take effect, and
   let the Page Header widget's gray background extend to the viewport
   edges regardless of the boxed section it lives in. */
.pxisa-elementor-page section.elementor-section,
.pxisa-elementor-page .elementor-widget-wrap > section { padding: 0; }

.pxisa-elementor-page .page-header {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
}

/* Docs sidebar (auto-discover) — make position:sticky work inside
   Elementor's nested column/widget wrappers. The sidebar's parent
   ancestors need to fill the column height so the sticky element has
   room to scroll; otherwise sticky is a no-op because the parent ends
   where the sidebar's own content ends.
   `top` accounts for the theme's ~92px sticky topbar+nav. */
.pxisa-elementor-page .elementor-widget-pxisa-docs-sidebar,
.pxisa-elementor-page .elementor-widget-pxisa-docs-sidebar > .elementor-widget-container {
  height: 100%;
}
.pxisa-elementor-page .pxisa-docs-sidebar {
  position: sticky;
  top: 108px;
  align-self: start;
  max-height: calc(100vh - 128px);
  overflow-y: auto;
  font-family: var(--font-sans);
  /* Keep the sticky sidebar above full-bleed content blocks (like the
     Transition Band) that use JS to break out of their parent column
     and can otherwise overlap the sidebar as they scroll past. */
  z-index: 5;
}
.pxisa-elementor-page .pxisa-transition-band { position: relative; z-index: 0; }
.pxisa-elementor-page .pxisa-docs-sidebar-label { color: var(--ink-3); margin-bottom: 16px; }
.pxisa-elementor-page .pxisa-docs-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Single article body — block quote, images, headings within the_content() */
.article-single h2 { font-size: 26px; letter-spacing: -0.015em; margin: 40px 0 16px; color: var(--ink); }
.article-single h3 { font-size: 20px; letter-spacing: -0.01em; margin: 32px 0 12px; color: var(--ink); }
.article-single blockquote,
.article-single .wp-block-quote { margin: 32px 0; padding: 20px 24px; border-left: 3px solid var(--primary); background: var(--bg-2); font-size: 17.5px; line-height: 1.55; color: var(--ink); font-style: italic; }
.article-single blockquote p:last-child,
.article-single .wp-block-quote p:last-child { margin-bottom: 0; }
.article-single blockquote cite,
.article-single .wp-block-quote cite { display: block; margin-top: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--ink-3); text-transform: uppercase; font-style: normal; }
.article-single img,
.article-single .wp-block-image img { max-width: 100%; height: auto; display: block; margin: 24px 0; border: 1px solid var(--rule); background: white; }
.article-single figure { margin: 28px 0; }
.article-single figcaption { margin-top: 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--ink-3); line-height: 1.5; }
.article-single a { color: var(--primary); }
.article-single hr { margin: 40px 0; border: 0; border-top: 1px solid var(--rule); }
.article-single ol { margin: 0 0 20px; padding-left: 22px; }
.article-single ol li { margin-bottom: 8px; line-height: 1.55; }

/* PDF download block on single article */
.pdf-download { display: grid; grid-template-columns: 48px 1fr 24px; gap: 20px; align-items: center; padding: 20px 24px; border: 1px solid var(--rule); background: white; color: inherit; transition: border-color 150ms ease, background 150ms ease; }
.pdf-download:hover { border-color: var(--primary); background: var(--primary-soft); }
.pdf-download-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; color: var(--primary); background: var(--primary-soft); border: 1px solid var(--rule); }
.pdf-download:hover .pdf-download-icon { border-color: var(--primary); }
.pdf-download-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pdf-download-kicker { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; color: var(--primary); text-transform: uppercase; }
.pdf-download-name { font-size: 15px; font-weight: 500; letter-spacing: -0.005em; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdf-download-size { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-3); }
.pdf-download-arrow { color: var(--primary); font-size: 20px; text-align: right; }

/* Gutenberg File block — force white label text on the download button
   so it stays readable against the theme's primary-blue button fill. */
.wp-block-file .wp-block-file__button,
.wp-block-file .wp-block-file__button.wp-element-button { color: white; }
.wp-block-file .wp-block-file__button:hover,
.wp-block-file .wp-block-file__button:focus { color: white; }

/* Board of Directors grid */
.board-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 960px) { .board-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .board-grid { grid-template-columns: 1fr; } }

.board-card { display: flex; flex-direction: column; background: white; border: 1px solid var(--rule); }
.board-card-photo { aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-2); border-bottom: 1px solid var(--rule); }
.board-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.board-card-photo-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--ink-3); }

.board-card-body { padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 8px; }
.board-card-company { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; color: var(--primary); text-transform: uppercase; }
.board-card-name { font-size: 20px; letter-spacing: -0.015em; margin: 2px 0 0; }
.board-card-title { font-size: 14px; color: var(--ink-2); letter-spacing: -0.005em; }
.board-card-bio { margin-top: 8px; font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }
.board-card-bio p { margin: 0 0 12px; }
.board-card-bio p:last-child { margin-bottom: 0; }

/* Docs sidebar (What is PXI / Why PXI) — active section link */
.docs-nav-link.is-active {
  color: var(--primary) !important;
  font-weight: 500;
  border-left-color: var(--primary) !important;
}

/* Tier / benefits comparison table (About the PXISA). */
.tiers-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 24px;
  font-size: 14.5px;
  border-top: 1px solid var(--rule);
}
.tiers-table th {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  text-transform: uppercase;
  font-weight: 500;
  background: var(--bg-2);
}
.tiers-table th:not(:first-child) { text-align: center; width: 110px; }
.tiers-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  line-height: 1.45;
}
.tiers-table td:not(:first-child) {
  text-align: center;
  color: var(--ink-2);
  font-size: 13.5px;
}
.tiers-table td.yes {
  color: var(--primary);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
}
.tiers-table tr:last-child td { border-bottom: 0; }

/* Filter button active state (Members, Articles) */
.filter-btn { transition: background 120ms ease, color 120ms ease, border-color 120ms ease; }
.filter-btn.is-active { background: var(--ink); color: white; }
.filter-pill.is-active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }

/* Diagram surface (What is PXI) */
.diagram-surface {
  background:
    linear-gradient(var(--bg-2), var(--bg-2)),
    repeating-linear-gradient(0deg, transparent, transparent 23px, oklch(90% 0.01 250) 23px, oklch(90% 0.01 250) 24px),
    repeating-linear-gradient(90deg, transparent, transparent 23px, oklch(90% 0.01 250) 23px, oklch(90% 0.01 250) 24px);
  background-blend-mode: normal, multiply, multiply;
  border: 1px solid var(--rule);
  position: relative;
}

/* Page header (for inner pages) */
.page-header {
  background: var(--bg-2);
  border-bottom: 1px solid var(--rule);
  padding: 72px 0 64px;
}
.page-header .breadcrumbs {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 16px;
}
.page-header .breadcrumbs a { color: var(--ink-3); }
.page-header .breadcrumbs a:hover { color: var(--primary); }
.page-header h1 { max-width: 18ch; margin-bottom: 20px; }
.page-header .lede { max-width: 64ch; }

/* ============================================================
   Hamburger toggle button — hidden on desktop, shown on mobile.
   ============================================================ */
.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  padding: 10px;
  margin-left: auto;
  cursor: pointer;
  width: 44px;
  height: 44px;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 4px;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--ink);
  transition: transform 150ms ease, opacity 150ms ease;
  transform-origin: center;
}
.nav.is-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ============================================================
   MOBILE (<= 768px)
   Desktop-first codebase: the templates rely heavily on inline
   `style="display: grid; grid-template-columns: ..."`. Rather than
   editing every template we override those inline styles here with
   `[style*="grid-template-columns"] { ... !important }`. Named-class
   layouts (nav, footer, section-head, etc.) are handled explicitly.
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --gutter: 20px;
    --section-py: 56px;
    --nav-h: 60px;
  }

  h1 { font-size: clamp(30px, 8vw, 42px); }
  h2 { font-size: clamp(24px, 6vw, 30px); }
  h3 { font-size: 18px; }

  section { padding: var(--section-py) 0; }

  /* Any inline multi-column grid collapses to a single column. `minmax(0, 1fr)`
     is important: plain `1fr` has an implicit `min: auto` (i.e. content-sized),
     which lets a child with a fixed pixel width expand the cell and push
     overflow. `minmax(0, 1fr)` allows the cell to shrink below content size. */
  [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
  }
  /* Neutralize inline pixel widths inside content areas so they don't push
     horizontal overflow. Scoped to descendants of .container / .page-header
     / etc. so it can't hit chrome elements like the nav logo. */
  .container [style*="width:"][style*="px"],
  .page-header [style*="width:"][style*="px"],
  .article-body [style*="width:"][style*="px"],
  .article-single [style*="width:"][style*="px"] {
    width: auto !important;
    max-width: 100% !important;
  }
  /* WP block-editor images should stay fluid. */
  .article-body img,
  .article-single img { max-width: 100%; height: auto; }

  /* --- Topbar --- */
  .topbar { font-size: 10px; letter-spacing: 0.06em; }
  .topbar .container { height: auto; padding-top: 6px; padding-bottom: 6px; gap: 12px; }
  .topbar .topbar-right { gap: 16px; flex-wrap: wrap; justify-content: flex-end; }
  .topbar .container > div:first-child { display: none; }

  /* --- Primary nav — hamburger --- */
  .nav-inner { gap: 0; }
  .nav-logo img { height: 36px; }
  .nav-toggle { display: inline-flex; }
  .nav-links {
    display: none;
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    background: white;
    padding: 20px var(--gutter) 24px;
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 12px 24px oklch(0% 0 0 / 0.08);
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
  }
  .nav.is-open .nav-links { display: flex; }
  .nav-links a,
  .nav-item.has-children > a {
    display: block;
    width: 100%;
    padding: 14px 4px;
    font-size: 16px;
    border-bottom: 1px solid var(--rule);
  }
  .nav-item.has-children > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .nav-links a.active::after,
  .nav-item.has-children > a.active::after { display: none; }

  /* Sub-menus flow inline in the panel rather than as absolute dropdowns. */
  .nav-item.has-children {
    display: block;
    width: 100%;
    position: static;
  }
  .nav-dropdown {
    position: static;
    display: block;
    width: 100%;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    padding: 0 0 8px 16px;
    margin: 0;
    min-width: 0;
  }
  .nav-dropdown > a {
    display: block;
    width: 100%;
    padding: 12px 4px;
    font-size: 14px;
    background: transparent;
    border: 0 !important;
    border-bottom: 1px solid var(--rule) !important;
  }
  .nav-cta { margin-left: 0; }

  /* --- Section head — was 1fr 1.6fr side-by-side --- */
  .section-head {
    display: block;
  }
  .section-head > * + * { margin-top: 16px; }

  /* --- Page header --- */
  .page-header { padding: 40px 0 36px; }
  .page-header h1 { max-width: none; }
  .page-header .lede { max-width: none; font-size: 17px; }
  .page-header-with-image .container > div,
  .page-header .container > div {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* --- Home hero --- */
  .home-hero-image-wrap { max-width: 260px; margin: 0 auto; }

  /* --- Homepage hero stats — 3 across, 4th spans full width below. --- */
  .home-hero-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
  }
  .home-hero-stats > *:nth-child(4) { grid-column: 1 / -1; }
  .home-hero-stats [style*="font-size: 56px"] { font-size: 34px !important; }
  .home-hero-stats [style*="font-size: 20px"] { font-size: 14px !important; }

  /* --- Home news cards — border-right becomes border-bottom --- */
  .news-card {
    border-right: 0 !important;
    border-bottom: 1px solid oklch(30% 0.015 250);
    padding: 24px !important;
  }
  .news-card:last-child { border-bottom: 0; }

  /* --- Any grid item that used border-right for dividers --- */
  [style*="border-right"] { border-right: 0 !important; }

  /* --- Article/library list rows: 120px 1fr 80px → stack --- */
  a[data-filterable],
  .topbar-langs-menu a { min-width: 0; }

  /* --- Cards & callouts padding tightens --- */
  [style*="padding: 36px"],
  [style*="padding: 40px"],
  [style*="padding: 48px"] { padding: 20px !important; }

  /* --- Buttons — full-width friendly. Exclude .btn-icon so its 38x38
     square (with 10px padding) stays intact and its 16x16 SVG renders. --- */
  .btn:not(.btn-icon) { padding: 12px 18px; font-size: 14px; }

  /* --- CTA button rows (home Join, inner-page bottom CTAs, page headers):
     stack full-width so labels don't wrap and each button gets a proper
     tap target. --- */
  .cta-buttons {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .cta-buttons .btn {
    width: 100%;
    justify-content: center;
  }

  /* --- Footer --- */
  .footer { padding: 48px 0 24px; }
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .footer-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
  .footer-bottom .footer-meta { gap: 20px !important; }

  /* --- Spec table becomes stacked list --- */
  .spec-row { grid-template-columns: 1fr !important; row-gap: 6px !important; padding: 16px !important; }
  .spec-row > * { padding: 0 !important; }
  .spec-row-headers { display: none !important; }

  /* --- Table-like list rows (articles, news, events) use fixed pixel grid.
     Force to stack. --- */
  [style*="grid-template-columns: 120px"],
  [style*="grid-template-columns: 140px"],
  [style*="grid-template-columns: 180px"],
  [style*="grid-template-columns: 200px"] {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 16px !important;
  }
  [style*="grid-template-columns: 120px"] > *,
  [style*="grid-template-columns: 140px"] > *,
  [style*="grid-template-columns: 180px"] > *,
  [style*="grid-template-columns: 200px"] > * { padding: 0 !important; text-align: left !important; }

  /* --- PDF download block --- */
  .pdf-download { flex-wrap: wrap; }
  .pdf-download-meta { min-width: 0; flex: 1; }

  /* --- Spec list (label/value rows) --- */
  .spec-list .row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 14px 0 !important;
  }

  /* --- Spec table (Specifications page) — hide the column headers when
     stacked; each row has enough context on its own. --- */
  .spec-table-head { display: none !important; }

  /* --- Tiers table (About PXISA) — allow horizontal scroll rather than
     wrap; a 4-column comparison table is more useful side-by-side. --- */
  .tiers-table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  /* --- Stat grid (Ecosystem) & stat strip (Members) — 2 per row on mobile
     instead of collapsing all the way to a single column. --- */
  .stat-grid,
  .stat-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .stat-strip > * {
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    padding: 20px !important;
  }
  .stat-strip > *:nth-child(2n) { border-right: 0 !important; }
  .stat-strip > *:nth-last-child(-n+2) { border-bottom: 0; }
  .stat {
    padding: 20px !important;
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }
  .stat:nth-child(2n) { border-right: 0; }
  .stat:nth-last-child(-n+2) { border-bottom: 0; }
  .stat .stat-num { font-size: 32px !important; }

  /* --- Filter/search bars (Members, Ecosystem, Products) --- */
  [data-filter-group] {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 12px 16px !important;
    gap: 6px;
  }
  [data-filter-group] > div {
    flex-wrap: wrap !important;
  }
  [data-filter-group] .filter-btn { flex: 1 0 auto; }
  [data-filter-group] > span { text-align: left !important; margin-right: 0 !important; }
  [data-filter-group] > select {
    width: 100% !important;
    font-size: 16px !important;
    padding: 12px 14px !important;
    border: 1px solid var(--rule-strong) !important;
    background: white !important;
    border-radius: 2px;
  }
  [data-filter-group] > select option {
    font-size: 16px !important;
    padding: 8px 12px;
  }
  [data-search-scope] { min-width: 0 !important; width: 100% !important; }

  /* --- Any inline flex row that packs too tightly on mobile: allow wrap --- */
  .container [style*="display: flex"][style*="gap:"]:not(.section-head) {
    flex-wrap: wrap;
  }

  /* --- Docs sidebar (What is PXI, Why PXI, About, PXI Architecture) is
     `position: sticky` inline on desktop; on mobile it should flow with
     the rest of the article content, not overlay it. --- */
  [data-scrollspy] {
    position: relative !important;
    top: auto !important;
    margin-bottom: 24px;
  }

  /* --- Board grid already handled at line ~645, but ensure single column below 640 --- */
}