/* Nexaform Labs — interior page stylesheet.
   Loaded only by the audience pages, the newsroom index, and the articles.
   site.css is not touched by this file.

   Kept separate rather than appended to site.css for two reasons: site.css is
   already edge-cached for seven days on the live domain (PLAT-06/PLAT-11), and
   a new filename sidesteps that entirely; and interior-page rules stay legible
   as a group. Same tokens, same rules: no pure blue, gradient on primary
   actions and art only, never on text. */

/* ---------- shared page shell ---------- */

.page {
  max-width: var(--nx-max);
  margin: 0 auto;
  padding-left: var(--nx-gutter);
  padding-right: var(--nx-gutter);
  width: 100%;
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font: 400 12.5px var(--nx-font-body);
  color: var(--nx-text-muted);
  padding-top: 20px;
}
.crumbs a { color: var(--nx-text-muted); }
.crumbs a:hover { color: var(--nx-iris); }
.crumbs .sep { color: var(--nx-border); }
.crumbs [aria-current] { color: var(--nx-ink); font-weight: 500; }

/* ---------- image placeholder ----------
   Stands in for an image that has been specified but not generated yet.
   Deliberately obvious: a striped block with the filename on it, so a missing
   asset reads as "not delivered" rather than as a broken layout. */

.img-ph {
  position: relative;
  background:
    repeating-linear-gradient(
      -45deg,
      #E9E6F2 0 14px,
      #E1DDEE 14px 28px
    );
  border: 1px dashed #C6BFDD;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: hidden;
}
.img-ph span {
  font: 500 11.5px/1.5 var(--nx-mono);
  color: #6A6188;
  background: rgba(243, 242, 247, .92);
  border: 1px solid #CFC8E4;
  border-radius: 6px;
  padding: 6px 10px;
  text-align: center;
  max-width: 100%;
  word-break: break-word;
}
.labs .img-ph,
.dark .img-ph {
  background: repeating-linear-gradient(-45deg, #262233 0 14px, #201D2C 14px 28px);
  border-color: #3A3648;
}
.labs .img-ph span,
.dark .img-ph span { background: rgba(22, 20, 31, .88); color: var(--nx-dark-muted); border-color: #3A3648; }

/* ---------- audience page hero ---------- */

.aud-hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 44px 0 64px;
}
.aud-hero h1 { font-size: 44px; line-height: 1.08; text-wrap: pretty; }
.aud-hero .lede {
  margin: 20px 0 0;
  font: 400 17px/1.6 var(--nx-font-body);
  color: var(--nx-text-body);
  max-width: 48ch;
  text-wrap: pretty;
}
.aud-hero .eyebrow { margin-bottom: 14px; }
.aud-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.aud-art {
  aspect-ratio: 16 / 10;
  border-radius: 20px;
  overflow: hidden;
  background: #E9E6F2;
}
.aud-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.aud-art .img-ph { width: 100%; height: 100%; border: 0; }

/* ---------- section rhythm ---------- */

.sec { padding: 64px 0; }
.sec-white { background: #fff; border-top: 1px solid var(--nx-border); border-bottom: 1px solid var(--nx-border); }
.sec-dark { background: var(--nx-ink); color: var(--nx-paper); }
.sec-dark h2, .sec-dark h3 { color: var(--nx-paper); }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.sec-head p.sub { margin: 10px 0 0; font: 400 15px/1.6 var(--nx-font-body); color: var(--nx-text-muted); max-width: 62ch; }
.sec-dark .sec-head p.sub { color: var(--nx-dark-text); }

/* ---------- what we hear / challenge list ---------- */

.chal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; }
.chal {
  padding: 20px 0;
  border-top: 1px solid var(--nx-border);
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 16px;
}
.chal .n { font: 500 12px var(--nx-mono); color: var(--nx-iris); padding-top: 3px; }
.chal h3 { font-size: 15.5px; }
.chal p { margin: 6px 0 0; font: 400 13.5px/1.6 var(--nx-font-body); color: var(--nx-text-muted); }

/* ---------- capability cards ---------- */

.cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cap {
  background: var(--nx-paper);
  border: 1px solid var(--nx-border);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sec-white .cap { background: var(--nx-paper); }
.cap .rule { width: 34px; height: 3px; border-radius: 3px; background: var(--nx-gradient); }
.cap h3 { font-size: 16px; }
.cap p { margin: 0; font: 400 13.5px/1.6 var(--nx-font-body); color: var(--nx-text-muted); }
.cap ul { margin: 4px 0 0; padding-left: 18px; }
.cap li { font: 400 13px/1.55 var(--nx-font-body); color: var(--nx-text-muted); margin-bottom: 4px; }

/* ---------- spec table ---------- */

.spec-scroll { overflow-x: auto; }
.spec {
  width: 100%;
  border-collapse: collapse;
  font: 400 13.5px var(--nx-font-body);
  min-width: 620px;
}
.spec th, .spec td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--nx-border); vertical-align: top; }
.spec thead th {
  font: 700 11px var(--nx-font-heading);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nx-text-muted);
  border-bottom: 1px solid var(--nx-border);
}
.spec tbody th { font-weight: 600; width: 240px; color: var(--nx-ink); }
.spec td { color: var(--nx-text-body); }
.spec code { font: 500 12.5px var(--nx-mono); background: var(--nx-paper); border: 1px solid var(--nx-border); border-radius: 5px; padding: 1px 6px; }
.sec-dark .spec th, .sec-dark .spec td { border-color: var(--nx-dark-border); }
.sec-dark .spec tbody th { color: var(--nx-paper); }
.sec-dark .spec td { color: var(--nx-dark-text); }
.sec-dark .spec code { background: #221F2E; border-color: var(--nx-dark-border); color: var(--nx-lilac); }

/* ---------- quote + stats ---------- */

.quote-band { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: center; }
.quote-band blockquote {
  margin: 0;
  font: 500 22px/1.4 var(--nx-font-heading);
  text-wrap: pretty;
}
.quote-band .attrib { margin: 18px 0 0; font: 400 13px/1.55 var(--nx-font-body); color: var(--nx-dark-muted); }
.quote-band .attrib strong { display: block; color: var(--nx-paper); font-weight: 600; }
.stat-row { display: grid; gap: 18px; }
.stat-row > div { border-left: 2px solid var(--nx-teal); padding-left: 16px; }
.stat-n { font: 700 30px/1 var(--nx-font-heading); color: var(--nx-paper); }
.stat-l { font: 400 12.5px/1.4 var(--nx-font-body); color: var(--nx-dark-muted); margin-top: 6px; display: block; }

/* ---------- related products ---------- */

.rel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* ---------- closing CTA ---------- */

.cta {
  border: 1px solid var(--nx-border);
  border-radius: 20px;
  background: #fff;
  padding: 36px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 72px;
}
.cta h2 { font-size: 24px; }
.cta p { margin: 8px 0 0; font: 400 14.5px/1.6 var(--nx-font-body); color: var(--nx-text-muted); max-width: 50ch; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- newsroom index ---------- */

.news-head { padding: 44px 0 8px; }
.news-head h1 { font-size: 44px; }
.news-head p { margin: 18px 0 0; font: 400 17px/1.6 var(--nx-font-body); color: var(--nx-text-body); max-width: 56ch; }

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 28px 0 0;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--nx-border);
  padding-bottom: 24px;
}
.filter-bar .label { font: 700 11px var(--nx-font-heading); letter-spacing: .12em; text-transform: uppercase; color: var(--nx-text-muted); margin-right: 6px; }
.chip {
  font: 500 12.5px var(--nx-font-body);
  border: 1px solid var(--nx-border);
  background: #fff;
  border-radius: 999px;
  padding: 7px 15px;
  cursor: pointer;
  color: var(--nx-text-body);
  transition: border-color .15s, color .15s, background .15s;
}
.chip:hover { border-color: var(--nx-iris); color: var(--nx-iris); }
.chip[aria-pressed="true"] { background: var(--nx-ink); border-color: var(--nx-ink); color: var(--nx-paper); }
.filter-note { font: 400 12.5px var(--nx-font-body); color: var(--nx-text-muted); margin-left: auto; }

.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding-bottom: 72px; }
.art-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--nx-border);
  border-radius: 16px;
  padding: 24px;
  color: var(--nx-ink);
}
.art-card:hover { border-color: var(--nx-teal); color: var(--nx-ink); }
.art-card .news-meta { font: 500 11px var(--nx-mono); color: var(--nx-text-muted); }
.art-card h2 { font: 600 17px/1.3 var(--nx-font-heading); text-wrap: pretty; }
.art-card p { margin: 0; font: 400 13.5px/1.6 var(--nx-font-body); color: var(--nx-text-muted); flex: 1; }
.art-card .more { font: 600 13px var(--nx-font-body); color: var(--nx-iris); }
.art-card:hover .more { color: var(--nx-teal); }
.art-card.lead { grid-column: 1 / -1; flex-direction: row; gap: 32px; align-items: flex-start; }
.art-card.lead .lead-copy { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.art-card.lead h2 { font-size: 26px; line-height: 1.16; }
.art-card.lead p { font-size: 15px; max-width: 62ch; }
.art-card.lead .lead-art { width: 300px; flex: none; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; }
.art-card.lead .lead-art .img-ph { width: 100%; height: 100%; border: 0; }
.art-card.lead .lead-art img { display: block; width: 100%; height: 100%; object-fit: cover; }

.empty-note {
  grid-column: 1 / -1;
  border: 1px dashed var(--nx-border);
  border-radius: 16px;
  padding: 32px;
  text-align: center;
  font: 400 14px var(--nx-font-body);
  color: var(--nx-text-muted);
}

/* ---------- article ---------- */

.article { max-width: 760px; padding-bottom: 24px; }
.article-head { padding: 32px 0 0; }
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  font: 500 11.5px var(--nx-mono);
  color: var(--nx-text-muted);
}
.article-meta .cat {
  background: var(--nx-ink);
  color: var(--nx-paper);
  border-radius: 999px;
  padding: 4px 12px;
  letter-spacing: .06em;
}
.article h1 { font-size: 40px; line-height: 1.1; margin-top: 18px; text-wrap: pretty; }
.standfirst {
  margin: 20px 0 0;
  font: 400 18px/1.6 var(--nx-font-body);
  color: var(--nx-text-body);
  text-wrap: pretty;
}
.article-art {
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  margin: 32px 0 8px;
  background: #E9E6F2;
}
.article-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.article-art .img-ph { width: 100%; height: 100%; border: 0; }
.figcap { font: 400 12.5px/1.5 var(--nx-font-body); color: var(--nx-text-muted); margin: 10px 0 0; }

.article-body { margin-top: 28px; }
.article-body p { margin: 0 0 18px; font: 400 16px/1.72 var(--nx-font-body); color: var(--nx-text-body); }
.article-body h2 { font-size: 22px; margin: 34px 0 12px; color: var(--nx-ink); }
.article-body h3 { font-size: 17px; margin: 26px 0 8px; }
.article-body ul, .article-body ol { margin: 0 0 18px; padding-left: 22px; }
.article-body li { font: 400 16px/1.7 var(--nx-font-body); color: var(--nx-text-body); margin-bottom: 8px; }
.article-body strong { font-weight: 600; color: var(--nx-ink); }
.article-body a { color: var(--nx-iris); text-decoration: underline; text-underline-offset: 3px; }
.article-body a:hover { color: var(--nx-teal); }

.pullquote {
  margin: 32px 0;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--nx-iris);
}
.pullquote p { font: 500 20px/1.45 var(--nx-font-heading); color: var(--nx-ink); margin: 0; text-wrap: pretty; }
.pullquote cite { display: block; margin-top: 12px; font: 400 13px var(--nx-font-body); color: var(--nx-text-muted); font-style: normal; }

.factbox {
  background: var(--nx-paper);
  border: 1px solid var(--nx-border);
  border-radius: 16px;
  padding: 24px 26px;
  margin: 30px 0;
}
.factbox h3 { font: 700 11px var(--nx-font-heading); letter-spacing: .12em; text-transform: uppercase; color: var(--nx-text-muted); margin-bottom: 14px; }
.factbox dl { margin: 0; display: grid; grid-template-columns: 190px 1fr; gap: 10px 20px; }
.factbox dt { font: 600 13px var(--nx-font-body); color: var(--nx-ink); }
.factbox dd { margin: 0; font: 400 13px/1.55 var(--nx-font-body); color: var(--nx-text-body); }

.boilerplate {
  border-top: 1px solid var(--nx-border);
  margin-top: 40px;
  padding-top: 24px;
}
.boilerplate h2 { font: 700 11px var(--nx-font-heading); letter-spacing: .12em; text-transform: uppercase; color: var(--nx-text-muted); margin-bottom: 12px; }
.boilerplate p { font: 400 13.5px/1.7 var(--nx-font-body); color: var(--nx-text-muted); margin: 0 0 12px; }
.press-contact { font: 400 13.5px/1.8 var(--nx-font-body); color: var(--nx-text-muted); }
.press-contact strong { color: var(--nx-ink); font-weight: 600; }

.more-news { padding: 56px 0 80px; border-top: 1px solid var(--nx-border); margin-top: 56px; }
.more-news h2 { font-size: 20px; margin-bottom: 22px; }

@media (max-width: 1000px) {
  .aud-hero { grid-template-columns: 1fr; gap: 32px; padding-bottom: 48px; }
  .aud-hero h1 { font-size: 34px; }
  .chal-grid { grid-template-columns: 1fr; }
  .cap-grid { grid-template-columns: repeat(2, 1fr); }
  .rel-grid { grid-template-columns: repeat(2, 1fr); }
  .quote-band { grid-template-columns: 1fr; gap: 32px; }
  .article-grid { grid-template-columns: repeat(2, 1fr); }
  .art-card.lead { flex-direction: column; }
  .art-card.lead .lead-art { width: 100%; }
  .article h1 { font-size: 30px; }
  .news-head h1 { font-size: 34px; }
  .factbox dl { grid-template-columns: 1fr; gap: 2px; }
  .factbox dd { margin-bottom: 10px; }
}

@media (max-width: 640px) {
  .cap-grid, .rel-grid, .article-grid { grid-template-columns: 1fr; }
  .cta { padding: 26px 24px; }
  .filter-note { margin-left: 0; width: 100%; }
}