/* ================================================================
   WAREX EXCHANGE TERMINAL — SUBPAGE COMPONENTS  (exchange-pages.css)
   ================================================================
   V3 layer: themes the legacy content-class vocabulary (built by the
   old uniform system) onto the Exchange Terminal tokens. Loaded on
   every V3 page after exchange.css. Content pages have their inline
   <style> blocks stripped by `warex_build.py exchange-skin`; this
   sheet owns their look. Every colour here comes from exchange-tokens
   — a palette variant is still a one-file swap.
   ================================================================ */

/* NOTE: this sheet loads on CONTENT pages only — never on tool pages
   (wizards/calculators/boards keep light widget interiors that these
   legacy-vocabulary rules would out-rank). V3 shell rules shared with
   tool pages live in exchange-bridge.css. */

/* ---- main-content base voice ------------------------------------ */
body.wx-page main {
  display: block;
  max-width: none;
}
body.wx-page main section,
body.wx-page main .content > * { scroll-margin-top: 84px; }

/* voice rules are scoped OFF tool pages: their widget interiors keep
   inline light-surface styles (white cards, dark text) and these broad
   element colours would otherwise out-rank them (light-on-white) */
body.wx-page:not(.wx-page--tool) main h1,
body.wx-page:not(.wx-page--tool) main h2,
body.wx-page .hero h1,
body.wx-page .inner-hero h1 {
  font-family: var(--wx-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  line-height: 1.02;
  color: var(--wx-paper);
}
body.wx-page:not(.wx-page--tool) main h1,
body.wx-page .hero h1,
body.wx-page .inner-hero h1 { font-size: var(--wx-disp-lg); font-weight: 800; }
body.wx-page:not(.wx-page--tool) main h2 { font-size: var(--wx-disp-md); margin-bottom: var(--wx-s4); }
body.wx-page:not(.wx-page--tool) main h3 {
  font-family: var(--wx-font-body);
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--wx-paper);
  margin-bottom: var(--wx-s2);
}
body.wx-page:not(.wx-page--tool) main p,
body.wx-page:not(.wx-page--tool) main li { color: var(--wx-dim); }
body.wx-page:not(.wx-page--tool) main b,
body.wx-page:not(.wx-page--tool) main strong { color: var(--wx-paper); font-weight: 500; }
body.wx-page:not(.wx-page--tool) main p a,
body.wx-page:not(.wx-page--tool) main li a,
body.wx-page:not(.wx-page--tool) main td a {
  color: var(--wx-cyan);
  text-decoration: underline;
  text-decoration-color: var(--wx-hair);
  text-underline-offset: 3px;
}
body.wx-page:not(.wx-page--tool) main p a:hover,
body.wx-page:not(.wx-page--tool) main li a:hover { text-decoration-color: var(--wx-cyan); }

/* generic section rhythm + centered containers */
body.wx-page main > section,
body.wx-page main > div {
  padding: clamp(36px, 6vw, 64px) var(--wx-gutter);
  max-width: calc(var(--wx-max));
  margin: 0 auto;
}
body.wx-page main > section + section { border-top: 1px solid var(--wx-hair); }

/* ---- hero bands -------------------------------------------------- */
body.wx-page .inner-hero,
body.wx-page .hero {
  padding: clamp(48px, 8vw, 88px) var(--wx-gutter) clamp(36px, 6vw, 64px);
  border-bottom: 1px solid var(--wx-line);
  background: linear-gradient(180deg, var(--wx-ink-2), transparent);
  text-align: left;
  max-width: none;
}
body.wx-page .inner-hero-content,
body.wx-page .hero > * {
  max-width: var(--wx-max);
  margin-left: auto;
  margin-right: auto;
}
body.wx-page .inner-hero h1,
body.wx-page .hero h1 { max-width: 22ch; }
body.wx-page .inner-hero p,
body.wx-page .hero p {
  max-width: 62ch;
  margin-top: var(--wx-s4);
  font-size: var(--wx-text-lg);
  color: var(--wx-dim);
}

/* the in-hero breadcrumb div duplicates the semantic nav.breadcrumb that
   follows the hero — hide the duplicate (links remain in the DOM) */
body.wx-page .inner-hero .breadcrumb,
body.wx-page .hero .breadcrumb,
body.wx-page main:has(nav.breadcrumb) > div.breadcrumb { display: none; }

/* breadcrumbs — mono data voice */
body.wx-page .breadcrumb,
body.wx-page nav.breadcrumb {
  font-family: var(--wx-font-mono);
  font-size: var(--wx-text-2xs);
  letter-spacing: var(--wx-track-data);
  text-transform: uppercase;
  color: var(--wx-faint);
  margin-bottom: var(--wx-s4);
  padding: 0;
  border: none;
  background: none;
}
body.wx-page .breadcrumb a { color: var(--wx-dim); text-decoration: none; }
body.wx-page .breadcrumb a:hover { color: var(--wx-cyan); }

/* ---- card families ------------------------------------------------ */
body.wx-page .benefits-grid,
body.wx-page .cards-grid,
body.wx-page .how-it-works-grid,
body.wx-page .key-stats,
body.wx-page .stats,
body.wx-page .values-grid,
body.wx-page .team-grid,
body.wx-page .services-grid,
body.wx-page .industries-grid,
body.wx-page .audience-grid,
body.wx-page .partner-grid,
body.wx-page .resource-grid,
body.wx-page .case-studies-grid,
body.wx-page .related-articles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
  margin: var(--wx-s5) 0;
}

body.wx-page .benefit-card,
body.wx-page .card,
body.wx-page .step-card,
body.wx-page .stat-card,
body.wx-page .service-card,
body.wx-page .industry-card,
body.wx-page .audience-card,
body.wx-page .partner-card,
body.wx-page .resource-card,
body.wx-page .value-card,
body.wx-page .team-card,
body.wx-page .case-study,
body.wx-page .related-article,
body.wx-page .sidebar-section,
body.wx-page .newsletter-box {
  background: var(--wx-panel);
  border: 1px solid var(--wx-line);
  padding: 24px 26px;
  border-radius: 0;
  box-shadow: none;
  transition: border-color var(--wx-dur-fast), transform var(--wx-dur-fast) var(--wx-ease-out);
}
body.wx-page a.benefit-card:hover,
body.wx-page a.card:hover,
body.wx-page a.service-card:hover,
body.wx-page a.industry-card:hover,
body.wx-page a.audience-card:hover,
body.wx-page a.resource-card:hover,
body.wx-page a.related-article:hover,
body.wx-page .card:hover,
body.wx-page .benefit-card:hover {
  border-color: var(--wx-cyan);
  transform: translateY(-2px);
}
body.wx-page main .card a,
body.wx-page main .benefit-card a { text-decoration: none; }

/* step cards get a mono index accent when markup provides one */
body.wx-page .step-number,
body.wx-page .step-card .number,
body.wx-page .card-icon,
body.wx-page .benefit-icon {
  font-family: var(--wx-font-mono);
  color: var(--wx-amber);
  font-size: var(--wx-text-sm);
  margin-bottom: var(--wx-s3);
  display: inline-block;
  background: none;
}

/* ---- feature / check lists ---------------------------------------- */
body.wx-page .feature-list { list-style: none; padding: 0; margin: var(--wx-s5) 0; }
body.wx-page .feature-item,
body.wx-page .feature-list li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px solid var(--wx-hair);
}
body.wx-page .feature-icon { flex-shrink: 0; }
body.wx-page .feature-icon::after { content: "✓"; color: var(--wx-green); font-family: var(--wx-font-mono); }

/* ---- stats voice --------------------------------------------------- */
body.wx-page .stats-row,
body.wx-page .stats-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin: var(--wx-s5) 0;
}
body.wx-page .stat { border: 1px solid var(--wx-line); padding: 20px; background: var(--wx-ink-2); }
body.wx-page .stat-number,
body.wx-page .stat-value {
  font-family: var(--wx-font-display);
  font-weight: 800;
  font-size: 2.3rem;
  color: var(--wx-amber);
  line-height: 1;
}
body.wx-page .stat-label {
  font-family: var(--wx-font-mono);
  font-size: var(--wx-text-2xs);
  letter-spacing: var(--wx-track-data);
  text-transform: uppercase;
  color: var(--wx-dim);
  margin-top: 8px;
  display: block;
}

/* ---- accordion / FAQ ------------------------------------------------ */
body.wx-page .accordion-item,
body.wx-page .faq-item {
  border: 1px solid var(--wx-line);
  background: var(--wx-panel);
  margin-bottom: 10px;
}
body.wx-page .accordion-header,
body.wx-page .faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--wx-s4);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  padding: 16px 20px;
  color: var(--wx-paper);
  font-family: var(--wx-font-body);
  font-weight: 500;
  font-size: var(--wx-text-md);
}
body.wx-page .accordion-toggle { color: var(--wx-amber); font-family: var(--wx-font-mono); }
body.wx-page .accordion-body,
body.wx-page .faq-answer {
  padding: 0 20px;
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--wx-dur-base) var(--wx-ease-out), padding var(--wx-dur-base);
}
body.wx-page .accordion-item.active .accordion-body,
body.wx-page .accordion-item.open .accordion-body,
body.wx-page .faq-item.active .faq-answer,
body.wx-page .faq-item.open .faq-answer {
  max-height: 60em;
  padding: 0 20px 18px;
}
body.wx-page .faq-question[aria-expanded="true"] + .faq-answer { max-height: 60em; padding: 0 20px 18px; }

/* ---- CTA bands ------------------------------------------------------ */
body.wx-page .cta-section,
body.wx-page .cta {
  border-top: 1px solid var(--wx-line);
  border-bottom: 1px solid var(--wx-line);
  background: var(--wx-ink-2);
  text-align: center;
  padding: clamp(44px, 7vw, 72px) var(--wx-gutter);
  max-width: none;
}
body.wx-page .cta-content { max-width: var(--wx-max); margin: 0 auto; }

body.wx-page .cta-button,
body.wx-page a.cta-button,
body.wx-page .cta a:not([class]),
body.wx-page .cta-banner > a:not([class]),
body.wx-page .cta-final > a:not([class]),
body.wx-page button.cta-button {
  display: inline-block;
  font-family: var(--wx-font-mono);
  font-size: 12.5px;
  letter-spacing: var(--wx-track-data);
  font-weight: 700;
  text-transform: uppercase;
  background: var(--wx-amber);
  color: var(--wx-ink);
  padding: 17px 30px;
  margin-top: var(--wx-s4);
  border: none;
  cursor: pointer;
  text-decoration: none;
  clip-path: polygon(var(--wx-notch) 0, 100% 0, 100% calc(100% - var(--wx-notch)), calc(100% - var(--wx-notch)) 100%, 0 100%, 0 var(--wx-notch));
  transition: background var(--wx-dur-fast), transform var(--wx-dur-fast) var(--wx-ease-out);
}
body.wx-page .cta-button:hover,
body.wx-page .cta-button:focus-visible { background: var(--wx-amber-hi); transform: translateY(-2px); }
body.wx-page .cta-button.secondary,
body.wx-page .cta-button--ghost {
  background: transparent;
  color: var(--wx-cyan);
  box-shadow: inset 0 0 0 1.5px var(--wx-cyan);
}
body.wx-page .cta-button.secondary:hover { background: var(--wx-cyan-glow); }

/* ---- blog / article ------------------------------------------------- */
body.wx-page .article-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--wx-s7);
  padding: clamp(36px, 6vw, 64px) var(--wx-gutter);
  max-width: var(--wx-max);
  margin: 0 auto;
}
body.wx-page .article-header { grid-column: 1 / -1; }
body.wx-page .article-tag {
  font-family: var(--wx-font-mono);
  font-size: var(--wx-text-2xs);
  letter-spacing: var(--wx-track-wide);
  text-transform: uppercase;
  color: var(--wx-amber);
  display: inline-block;
  border: 1px solid var(--wx-line);
  padding: 5px 12px;
  margin-bottom: var(--wx-s4);
}
body.wx-page .article-meta {
  font-family: var(--wx-font-mono);
  font-size: var(--wx-text-2xs);
  letter-spacing: var(--wx-track-data);
  color: var(--wx-faint);
  margin-top: var(--wx-s3);
}
body.wx-page .article-content h2 { font-size: var(--wx-disp-sm); margin-top: var(--wx-s6); }
body.wx-page .article-content h3 { margin-top: var(--wx-s5); }
body.wx-page .article-content p { margin: var(--wx-s3) 0; line-height: 1.7; }
body.wx-page .article-content ul,
body.wx-page .article-content ol { padding-left: 1.2em; margin: var(--wx-s3) 0; }
body.wx-page .highlight {
  border-left: 3px solid var(--wx-amber);
  background: var(--wx-panel);
  padding: 16px 20px;
  margin: var(--wx-s5) 0;
}

/* ---- newsletter / simple lead forms -------------------------------- */
body.wx-page .newsletter-form {
  display: flex;
  gap: 0;
  border: 1px solid var(--wx-line);
  background: var(--wx-ink-2);
  margin-top: var(--wx-s4);
  flex-wrap: wrap;
}
body.wx-page .newsletter-form input[type="email"],
body.wx-page .newsletter-form input[type="text"] {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--wx-paper);
  font-family: var(--wx-font-mono);
  font-size: var(--wx-text-sm);
  padding: 14px;
}
body.wx-page .newsletter-form input::placeholder { color: var(--wx-faint); }
body.wx-page .newsletter-form button {
  border: none;
  cursor: pointer;
  background: var(--wx-amber);
  color: var(--wx-ink);
  font-family: var(--wx-font-mono);
  font-weight: 700;
  font-size: var(--wx-text-xs);
  letter-spacing: var(--wx-track-data);
  text-transform: uppercase;
  padding: 14px 20px;
  transition: background var(--wx-dur-fast);
}
body.wx-page .newsletter-form button:hover { background: var(--wx-amber-hi); }

/* ---- tables (content pages only; tool boards style their own) ------- */
body.wx-page:not(.wx-page--tool) main table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--wx-s5) 0;
  font-size: var(--wx-text-sm);
}
body.wx-page:not(.wx-page--tool) main th {
  font-family: var(--wx-font-mono);
  font-size: var(--wx-text-2xs);
  letter-spacing: var(--wx-track-data);
  text-transform: uppercase;
  color: var(--wx-amber);
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--wx-line);
}
body.wx-page:not(.wx-page--tool) main td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--wx-hair);
  color: var(--wx-dim);
}

/* ---- misc legacy widgets -------------------------------------------- */
body.wx-page .market-overview,
body.wx-page .overview {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--wx-s6);
  align-items: start;
}
body.wx-page .warehouse-list,
body.wx-page .location-map {
  border: 1px solid var(--wx-line);
  background: var(--wx-panel);
  padding: 22px;
}
body.wx-page .location-map img,
body.wx-page .location-map iframe { max-width: 100%; display: block; }

body.wx-page .compliance-badge,
body.wx-page .certification-list li {
  font-family: var(--wx-font-mono);
  font-size: var(--wx-text-xs);
  letter-spacing: var(--wx-track-data);
  color: var(--wx-dim);
  border: 1px solid var(--wx-line);
  padding: 6px 12px;
  display: inline-block;
  margin: 4px 6px 0 0;
  list-style: none;
}
body.wx-page .certification-list { padding: 0; }

body.wx-page img { max-width: 100%; height: auto; }

/* honest proof slots reused on subpages */
body.wx-page .wx-slot { background: none; }

/* ---- pilot-coverage additions (engine class report) ----------------- */
body.wx-page .container,
body.wx-page .hero-content,
body.wx-page .faq-content {
  max-width: var(--wx-max);
  margin-left: auto;
  margin-right: auto;
}

body.wx-page .accordion-content {           /* alias of accordion-body */
  padding: 0 20px;
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--wx-dur-base) var(--wx-ease-out), padding var(--wx-dur-base);
}
body.wx-page .accordion-item.active .accordion-content,
body.wx-page .accordion-item.open .accordion-content,
body.wx-page .accordion-header[aria-expanded="true"] + .accordion-content {
  max-height: 60em;
  padding: 0 20px 18px;
}

body.wx-page .btn-primary,
body.wx-page a.btn-primary {
  display: inline-block;
  font-family: var(--wx-font-mono);
  font-size: 12.5px;
  letter-spacing: var(--wx-track-data);
  font-weight: 700;
  text-transform: uppercase;
  background: var(--wx-amber);
  color: var(--wx-ink);
  padding: 15px 26px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  clip-path: polygon(var(--wx-notch) 0, 100% 0, 100% calc(100% - var(--wx-notch)), calc(100% - var(--wx-notch)) 100%, 0 100%, 0 var(--wx-notch));
}
body.wx-page .btn-primary:hover { background: var(--wx-amber-hi); }

body.wx-page .cta-banner,
body.wx-page .cta-box {
  border: 1px solid var(--wx-line);
  background: var(--wx-ink-2);
  padding: clamp(28px, 5vw, 48px);
  text-align: center;
  margin: var(--wx-s6) 0;
}

body.wx-page .why-cards,
body.wx-page .areas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin: var(--wx-s5) 0;
}
body.wx-page .why-card,
body.wx-page .related-card,
body.wx-page .area-item,
body.wx-page .testimonial {
  background: var(--wx-panel);
  border: 1px solid var(--wx-line);
  padding: 22px 24px;
}
body.wx-page .areas-list { list-style: none; padding: 0; }
body.wx-page .areas-list li {
  padding: 9px 0;
  border-top: 1px solid var(--wx-hair);
}
body.wx-page .testimonial-author {
  font-family: var(--wx-font-mono);
  font-size: var(--wx-text-2xs);
  letter-spacing: var(--wx-track-data);
  color: var(--wx-faint);
  text-transform: uppercase;
  margin-top: var(--wx-s3);
  display: block;
}
body.wx-page .value-icon {
  font-family: var(--wx-font-mono);
  color: var(--wx-amber);
  margin-bottom: var(--wx-s3);
  display: inline-block;
}
body.wx-page .breadcrumb-list {
  list-style: none;
  display: flex;
  gap: 8px;
  padding: 0;
}
body.wx-page .breadcrumb-list li + li::before { content: "/ "; color: var(--wx-ghost); }

/* legacy decorative particles: gone with the photo heroes */
body.wx-page .hero-particle,
body.wx-page .hero-particles-mini,
body.wx-page .hero-bg-image,
body.wx-page .hero-accent { display: none; }

/* ---- full-rollout coverage (engine class report, 2026-06-10) --------- */

/* consciously inert legacy classes — they inherit the main voice or sit
   as children of covered grids/flex parents, so no rules are needed:
   .scroll-reveal (legacy entrance animation; V3 renders static)
   .services-section .articles-section .featured-section
   .newsletter-section (top-level sections; main rhythm covers them)
   .story-content .mission-desc .overview-text (prose columns) */

body.wx-page .content-wrapper,
body.wx-page .partners-container {
  max-width: var(--wx-max);
  margin-left: auto;
  margin-right: auto;
}
body.wx-page .section { padding: clamp(24px, 4vw, 40px) 0; }
body.wx-page .section + .section { border-top: 1px solid var(--wx-hair); }
/* top-level .section/.breadcrumb need the page gutter (the class rules
   above outweigh the generic main > div padding) */
body.wx-page main > .section {
  padding: clamp(36px, 6vw, 64px) var(--wx-gutter);
  max-width: calc(var(--wx-max));
  margin: 0 auto;
}
body.wx-page main > .breadcrumb {
  padding: var(--wx-s4) var(--wx-gutter) 0;
  max-width: calc(var(--wx-max));
  margin: 0 auto;
}

body.wx-page .feature-text { flex: 1; }

/* blog index */
body.wx-page .articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin: var(--wx-s5) 0;
}
body.wx-page .article-card {
  background: var(--wx-panel);
  border: 1px solid var(--wx-line);
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: var(--wx-s3);
  transition: border-color var(--wx-dur-fast);
}
body.wx-page .article-card:hover { border-color: var(--wx-cyan); }
body.wx-page .article-card .article-tag { align-self: flex-start; margin-bottom: 0; }
body.wx-page .article-footer {
  margin-top: auto;
  padding-top: var(--wx-s3);
  border-top: 1px solid var(--wx-hair);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--wx-s4);
  font-family: var(--wx-font-mono);
  font-size: var(--wx-text-2xs);
  letter-spacing: var(--wx-track-data);
  color: var(--wx-faint);
}
body.wx-page .featured-article {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) 1fr;
  gap: var(--wx-s6);
  background: var(--wx-panel);
  border: 1px solid var(--wx-line);
  padding: clamp(24px, 4vw, 44px);
  margin: var(--wx-s5) 0;
}
body.wx-page .featured-meta {
  font-family: var(--wx-font-mono);
  font-size: var(--wx-text-2xs);
  letter-spacing: var(--wx-track-data);
  color: var(--wx-faint);
  margin: var(--wx-s3) 0;
}
/* empty decorative slot in the featured card — nothing honest to show */
body.wx-page .featured-visual { display: none; }
body.wx-page .filter-container { margin: var(--wx-s5) 0 0; }
body.wx-page .filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body.wx-page .filter-pill {
  font-family: var(--wx-font-mono);
  font-size: var(--wx-text-2xs);
  letter-spacing: var(--wx-track-data);
  text-transform: uppercase;
  color: var(--wx-dim);
  background: transparent;
  border: 1px solid var(--wx-line);
  padding: 8px 14px;
  cursor: pointer;
  transition: color var(--wx-dur-fast), border-color var(--wx-dur-fast);
}
body.wx-page .filter-pill:hover { color: var(--wx-cyan); border-color: var(--wx-cyan); }
body.wx-page .filter-pill.active {
  color: var(--wx-ink);
  background: var(--wx-amber);
  border-color: var(--wx-amber);
  font-weight: 700;
}
body.wx-page .read-more-btn,
body.wx-page .audience-link,
body.wx-page .service-link {
  font-family: var(--wx-font-mono);
  font-size: var(--wx-text-xs);
  letter-spacing: var(--wx-track-data);
  text-transform: uppercase;
  color: var(--wx-cyan);
  text-decoration: none;
}
body.wx-page .read-more-btn:hover,
body.wx-page .audience-link:hover,
body.wx-page .service-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* article meta line reused on related cards */
body.wx-page .meta {
  font-family: var(--wx-font-mono);
  font-size: var(--wx-text-2xs);
  letter-spacing: var(--wx-track-data);
  color: var(--wx-faint);
}
body.wx-page .article-sidebar { align-self: start; position: sticky; top: 84px; }

/* index landing pages: bento family (items carry covered card classes) */
body.wx-page .bento-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin: var(--wx-s5) 0;
}
body.wx-page .bento-item { display: flex; flex-direction: column; gap: var(--wx-s2); }
body.wx-page .bento-item > a:last-child,
body.wx-page .bento-item .audience-link,
body.wx-page .bento-item .service-link { margin-top: auto; padding-top: var(--wx-s3); }
body.wx-page .service-icon,
body.wx-page .audience-icon {
  color: var(--wx-amber);
  font-family: var(--wx-font-mono);
  margin-bottom: var(--wx-s2);
}

/* how-it-works comparison + dual CTA */
body.wx-page .comparison-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin: var(--wx-s5) 0;
}
body.wx-page .comparison-card {
  background: var(--wx-panel);
  border: 1px solid var(--wx-line);
  padding: 24px 26px;
}
body.wx-page .comparison-card ul { list-style: none; padding: 0; margin: var(--wx-s3) 0 0; }
body.wx-page .comparison-card li {
  padding: 9px 0;
  border-top: 1px solid var(--wx-hair);
}
body.wx-page .dual-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: var(--wx-s5);
}
body.wx-page .btn-secondary,
body.wx-page a.btn-secondary {
  display: inline-block;
  font-family: var(--wx-font-mono);
  font-size: 12.5px;
  letter-spacing: var(--wx-track-data);
  font-weight: 700;
  text-transform: uppercase;
  background: transparent;
  color: var(--wx-cyan);
  box-shadow: inset 0 0 0 1.5px var(--wx-cyan);
  padding: 15px 26px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--wx-dur-fast);
}
body.wx-page .btn-secondary:hover { background: var(--wx-cyan-glow); }

/* partners */
body.wx-page .partner-category { margin: var(--wx-s6) 0; }
body.wx-page .category-title { font-size: var(--wx-disp-sm); }
body.wx-page .partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: var(--wx-s4) 0;
}
body.wx-page .partner-logo {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--wx-amber);
  border: 1px solid var(--wx-line);
  background: var(--wx-ink-2);
  margin-bottom: var(--wx-s3);
}
body.wx-page .cta-btn,
body.wx-page a.cta-btn {
  display: inline-block;
  font-family: var(--wx-font-mono);
  font-size: 12.5px;
  letter-spacing: var(--wx-track-data);
  font-weight: 700;
  text-transform: uppercase;
  background: var(--wx-amber);
  color: var(--wx-ink);
  padding: 17px 30px;
  margin-top: var(--wx-s4);
  border: none;
  cursor: pointer;
  text-decoration: none;
  clip-path: polygon(var(--wx-notch) 0, 100% 0, 100% calc(100% - var(--wx-notch)), calc(100% - var(--wx-notch)) 100%, 0 100%, 0 var(--wx-notch));
  transition: background var(--wx-dur-fast), transform var(--wx-dur-fast) var(--wx-ease-out);
}
body.wx-page .cta-btn:hover { background: var(--wx-amber-hi); transform: translateY(-2px); }

/* sustainability */
body.wx-page .metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin: var(--wx-s5) 0;
}
body.wx-page .metric-card {
  border: 1px solid var(--wx-line);
  background: var(--wx-ink-2);
  padding: 22px;
  text-align: center;
}
body.wx-page .metric-number {
  font-family: var(--wx-font-display);
  font-weight: 800;
  font-size: 2.3rem;
  color: var(--wx-amber);
  line-height: 1;
}
body.wx-page .metric-label {
  font-family: var(--wx-font-mono);
  font-size: var(--wx-text-2xs);
  letter-spacing: var(--wx-track-data);
  text-transform: uppercase;
  color: var(--wx-dim);
  margin-top: 8px;
  display: block;
}
body.wx-page .initiatives-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin: var(--wx-s5) 0;
}
body.wx-page .initiative-card,
body.wx-page .cert-item {
  background: var(--wx-panel);
  border: 1px solid var(--wx-line);
  padding: 24px 26px;
}
body.wx-page .certifications { margin: var(--wx-s5) 0; }
body.wx-page .certs-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin: var(--wx-s4) 0;
}

/* about */
body.wx-page .mission-statement {
  font-family: var(--wx-font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  line-height: 1.15;
  color: var(--wx-paper);
  border-left: 3px solid var(--wx-amber);
  padding-left: var(--wx-s5);
  margin: var(--wx-s5) 0;
  max-width: 30ch;
}

/* faq */
body.wx-page .faq-section { margin-bottom: var(--wx-s6); }
body.wx-page .faq-toggle {
  font-family: var(--wx-font-mono);
  color: var(--wx-amber);
  flex-shrink: 0;
  transition: transform var(--wx-dur-base) var(--wx-ease-out);
}
body.wx-page .faq-item.active .faq-toggle,
body.wx-page .faq-item.open .faq-toggle,
body.wx-page .faq-question[aria-expanded="true"] .faq-toggle { transform: rotate(180deg); }
body.wx-page .faq-answer-content { padding-bottom: 4px; }

/* legal pages */
body.wx-page .policy-section,
body.wx-page .terms-section { margin-bottom: var(--wx-s6); }
body.wx-page .updated-date {
  font-family: var(--wx-font-mono);
  font-size: var(--wx-text-2xs);
  letter-spacing: var(--wx-track-data);
  text-transform: uppercase;
  color: var(--wx-faint);
  margin-bottom: var(--wx-s5);
}

/* supplemental link columns (aside outside <main> on blog/partners/
   sustainability/resources; "Supplemental…" and "Additional…" variants) */
body.wx-page aside[aria-label$="site links"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--wx-s6);
  max-width: var(--wx-max);
  margin: 0 auto;
  padding: clamp(28px, 5vw, 48px) var(--wx-gutter);
  border-top: 1px solid var(--wx-line);
}
body.wx-page .footer-column h3 {
  font-family: var(--wx-font-mono);
  font-size: var(--wx-text-2xs);
  letter-spacing: var(--wx-track-wide);
  text-transform: uppercase;
  color: var(--wx-faint);
  margin-bottom: 0;
}
body.wx-page .footer-column ul { list-style: none; padding: 0; margin: var(--wx-s3) 0 0; }
body.wx-page .footer-column li { padding: 4px 0; }
body.wx-page .footer-column a {
  color: var(--wx-dim);
  text-decoration: none;
  font-size: var(--wx-text-sm);
}
body.wx-page .footer-column a:hover { color: var(--wx-cyan); }

/* Submit → Match → Ship flow strip (how-it-works) — ported from
   warex-uniform.css (V3 pages no longer load the legacy sheet) and
   re-voiced onto exchange tokens; animation stays reduced-motion-gated */
body.wx-page .wx-flow-section {
  background: var(--wx-ink-2);
  border-top: 1px solid var(--wx-line);
  border-bottom: 1px solid var(--wx-line);
  max-width: none;
}
body.wx-page .wx-flow-title { text-align: center; margin-bottom: var(--wx-s2); }
body.wx-page .wx-flow-sub {
  text-align: center;
  font-family: var(--wx-font-mono);
  font-size: var(--wx-text-xs);
  letter-spacing: var(--wx-track-data);
  text-transform: uppercase;
  color: var(--wx-faint);
  margin: 0 0 var(--wx-s6);
}
body.wx-page .wx-flow {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: clamp(8px, 1.5vw, 20px);
  max-width: var(--wx-max);
  margin: 0 auto;
}
body.wx-page .wx-flow-node {
  background: var(--wx-panel);
  border: 1px solid var(--wx-line);
  padding: 24px 20px;
  text-align: center;
  flex: 1;
  max-width: 280px;
  transition: transform var(--wx-dur-fast) var(--wx-ease-out), border-color var(--wx-dur-fast);
}
body.wx-page .wx-flow-node:hover { transform: translateY(-2px); border-color: var(--wx-amber); }
body.wx-page .wx-flow-node h3 { margin: var(--wx-s3) 0 var(--wx-s2); }
body.wx-page .wx-flow-node p { font-size: var(--wx-text-sm); margin: 0; }
body.wx-page .wx-flow-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto;
  border: 1px solid var(--wx-line);
  background: var(--wx-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wx-amber);
}
body.wx-page .wx-flow-arrow {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  color: var(--wx-amber);
}
body.wx-page .wx-flow-arrow svg { width: clamp(36px, 5vw, 64px); height: 24px; overflow: visible; }
body.wx-page .wx-flow-arrow .wx-arrow-line { stroke: var(--wx-amber); stroke-width: 2.5; stroke-dasharray: 6 6; }
body.wx-page .wx-flow-arrow .wx-arrow-head { fill: var(--wx-amber); }
body.wx-page .wx-flow-arrow .wx-arrow-dot { fill: var(--wx-amber); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  body.wx-page .wx-flow-arrow .wx-arrow-line { animation: wx-dash 1.1s linear infinite; }
  body.wx-page .wx-flow-arrow .wx-arrow-dot { animation: wx-dot 2s ease-in-out infinite; }
}
@keyframes wx-dash { to { stroke-dashoffset: -12; } }
@keyframes wx-dot {
  0%   { transform: translateX(0);    opacity: 0; }
  15%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateX(40px); opacity: 0; }
}
@media (max-width: 720px) {
  body.wx-page .wx-flow { flex-direction: column; align-items: center; }
  body.wx-page .wx-flow-node { max-width: 420px; width: 100%; }
  body.wx-page .wx-flow-arrow { transform: rotate(90deg); margin: -4px 0; }
}

/* highlight panels */
body.wx-page .competitive-advantage {
  border-left: 3px solid var(--wx-amber);
  background: var(--wx-panel);
  padding: 16px 20px;
  margin: var(--wx-s5) 0;
}
body.wx-page .cta-final {
  border: 1px solid var(--wx-line);
  background: var(--wx-ink-2);
  padding: clamp(28px, 5vw, 48px);
  text-align: center;
  margin: var(--wx-s6) 0;
}
body.wx-page .section-title { margin-bottom: var(--wx-s5); }

/* ---- responsive ------------------------------------------------------ */
@media (max-width: 859px) {
  body.wx-page .market-overview,
  body.wx-page .overview { grid-template-columns: 1fr; }
  body.wx-page .article-wrapper { grid-template-columns: 1fr; }
  body.wx-page .featured-article { grid-template-columns: 1fr; }
  body.wx-page .article-sidebar { position: static; }
}
@media (max-width: 639px) {
  body.wx-page .newsletter-form button { flex: 1 1 100%; }
}