/* ACXPA - National Performance Spread
   ---------------------------------------------------------------------------
   Feature stylesheet for /members-national-spread/ and its staging copy at
   /testing-page/. Section 21c location 4: one file per content type, enqueued
   only on the pages that need it.

   This lived in the WPBakery page-settings CSS box until 31 August 2026, which
   21c lists as not allowed - stored in the database, invisible to search and
   to version control, and unreviewable. Moving it here changed no selector:
   every rule is scoped to #acxpans, so the ID keeps it ahead of custom.css and
   of acxpa-dynamic.css, which enqueues later (s20c).

   Built against acxpa-tokens.css v1.2.0 and ACXPA Brand & Digital Standards
   v1.9. No hex literals and no var() fallbacks (s21b).
   --------------------------------------------------------------------------- */

#acxpans {
  --ns-ink: var(--acxpa-ds-ink);
  --ns-slate: var(--acxpa-ds-slate);
  /* Warm Slate measured 4.43:1 on Sand and 3.69:1 on Teal 100 - both under the
     4.5 AA floor at the 11-14px this file uses it for. Every one of the twelve
     places it appears is muted small print on one of those two grounds, so the
     alias now resolves to Slate (4.85:1 on Sand). The Teal 100 note takes Ink
     below, because Slate only reaches 4.04:1 there. */
  --ns-warm: var(--acxpa-ds-slate);
  --ns-sand: var(--acxpa-ds-sand);
  --ns-stone: var(--acxpa-ds-stone);
  --ns-white: var(--acxpa-ds-white);
  --ns-t50: var(--acxpa-ds-teal-50);
  --ns-t100: var(--acxpa-ds-teal-100);
  --ns-t200: var(--acxpa-ds-teal-200);
  --ns-t300: var(--acxpa-ds-teal-300);
  --ns-t500: var(--acxpa-ds-teal-500);
  --ns-t600: var(--acxpa-ds-teal-600);
  --ns-t700: var(--acxpa-ds-teal-700);
  --ns-t800: var(--acxpa-ds-teal-800);
  --ns-t900: var(--acxpa-ds-teal-900);
  --ns-harbour: var(--acxpa-ds-harbour);
  --ns-harbourDeep: var(--acxpa-ds-harbour-deep);
  --ns-gold: var(--acxpa-ds-gold);
  --ns-goldt: var(--acxpa-ds-gold-tint);
  --ns-goldd: var(--acxpa-ds-gold-deep);
  --ns-r-sm: var(--acxpa-ds-radius-sm);
  --ns-r-md: var(--acxpa-ds-radius-md);
  --ns-r-lg: var(--acxpa-ds-radius-lg);
  --ns-r-xl: var(--acxpa-ds-radius-xl);
  --ns-pill: var(--acxpa-ds-radius-pill);
  --ns-sh-sm: var(--acxpa-ds-shadow-sm);
  --ns-sh-md: var(--acxpa-ds-shadow-md);
  --ns-sh-lg: var(--acxpa-ds-shadow-lg);
  --ns-key: var(--acxpa-ds-teal-700);
  --ns-keySoft: var(--acxpa-ds-teal-100);
  color: var(--ns-ink);
  font-size: 16px;
  line-height: 1.6;
}

#acxpans *,
#acxpans *::before,
#acxpans *::after { box-sizing: border-box; }

#acxpans .wpb_text_column,
#acxpans .wpb_wrapper,
#acxpans .wpb_content_element { margin-bottom: 0; }

#acxpans img { height: auto; }

#acxpans [data-theme="teal"] {
  --ns-key: var(--acxpa-ds-teal-700);
  --ns-keySoft: var(--acxpa-ds-teal-100);
}

#acxpans [data-theme="gold"] {
  --ns-key: var(--acxpa-ds-gold-deep);
  --ns-keySoft: var(--acxpa-ds-gold-tint);
}

#acxpans .acxpans-hero {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 26px;
  padding: 32px 32px 30px;
  margin: 0 0 20px;
  /* s13b.4: measure the fill against the ground it lands on. This band sits
     directly under the Teal 800 navigation. The original teal gradient
     measured dE 8.4-16.2 from it and read as more chrome; Harbour cleared
     that at dE 32.8 but put a second dark slab under a dark bar, which is the
     same reading problem in a different hue.

     A light ground settles it rather than negotiating with it: Teal 50 is
     dE 75.8 from the nav, so no measurement is close. The occasion is then
     carried by the gold rail and the gold mark - s13 reserves gold for exactly
     this - instead of by another expanse of dark. */
  background: var(--ns-t50);
  border-top: 6px solid var(--ns-gold);
  border-radius: var(--ns-r-xl);
  box-shadow: var(--ns-sh-md);
  color: var(--ns-ink);
}

#acxpans .acxpans-heroMain { flex: 1 1 auto; }

#acxpans .acxpans-heroTitle {
  margin: 0 0 12px;
  color: var(--ns-ink);                      /* 14.51:1 on Teal 50 */
  font-size: 34px;
  line-height: 1.18;
  font-weight: 700;
}

#acxpans .acxpans-heroLede {
  margin: 0 0 12px;
  color: var(--ns-ink);
  font-size: 18px;
  line-height: 1.55;
}

#acxpans .acxpans-heroNote {
  margin: 0;
  color: var(--ns-slate);                    /* 4.76:1 on Teal 50 */
  font-size: 15px;
  line-height: 1.55;
}

/* Gold measures 1.71:1 on this ground and cannot carry text here at all. */
#acxpans .acxpans-hero a {
  color: var(--acxpa-ds-link);               /* 6.66:1 */
  text-decoration: underline;
  text-underline-offset: 2px;
}

#acxpans .acxpans-hero a:hover,
#acxpans .acxpans-hero a:focus { color: var(--acxpa-ds-link-hover); }

#acxpans .acxpans-heroMark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 104px;
  margin-top: 4px;
  border-radius: var(--ns-r-lg);
  background: var(--ns-gold);
  border: 0;
  color: var(--ns-ink);                      /* 8.49:1, the s13 CTA pairing */
}

#acxpans .acxpans-heroMark svg { width: 58px; height: 58px; }

#acxpans .acxpans-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 0;
}

#acxpans .acxpans-fact {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 7px 15px;
  border-radius: var(--ns-pill);
  background: var(--ns-white);
  border: 1px solid var(--ns-stone);
  font-size: 14px;
  color: var(--ns-ink);
}

/* Gold Deep, not Gold: Gold is 1.86:1 on white. */
#acxpans .acxpans-factNum {
  color: var(--ns-goldd);                    /* 4.99:1 */
  font-size: 17px;
  font-weight: 700;
}

#acxpans .acxpans-fold {
  margin: 20px 0 0;
  border: 0;
  border-left: 4px solid var(--ns-gold);
  border-radius: var(--ns-r-md);
  /* On a light hero the accordion is a white panel with the gold rail, not a
     dark slab. */
  background: var(--ns-white);
  border: 1px solid var(--ns-stone);
  border-left: 4px solid var(--ns-gold);
  box-shadow: var(--ns-sh-sm);
  overflow: hidden;
}

#acxpans .acxpans-fold > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  color: var(--ns-ink);
  font-size: 15px;
  font-weight: 700;
}

#acxpans .acxpans-fold > summary::-webkit-details-marker { display: none; }

#acxpans .acxpans-fold > summary::after {
  content: "";
  width: 9px;
  height: 9px;
  margin-left: auto;
  border-right: 2px solid var(--ns-slate);
  border-bottom: 2px solid var(--ns-slate);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .15s ease;
}

#acxpans .acxpans-fold[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

#acxpans .acxpans-foldBody {
  padding: 2px 18px 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 26px;
}

#acxpans .acxpans-foldTitle {
  display: block;
  margin: 0 0 3px;
  color: var(--ns-ink);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
}

#acxpans .acxpans-foldText {
  display: block;
  color: var(--ns-slate);
  font-size: 14px;
  line-height: 1.55;
}

#acxpans .acxpans-legend {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 20px 24px;
  margin: 0 0 24px;
  background: var(--ns-sand);
  border: 1px solid var(--ns-stone);
  border-radius: var(--ns-r-lg);
}

#acxpans .acxpans-legendText { flex: 1 1 auto; }

#acxpans .acxpans-legendTitle {
  display: block;
  margin: 0 0 4px;
  color: var(--ns-t700);
  font-size: 15px;
  font-weight: 700;
}

#acxpans .acxpans-legendBody {
  display: block;
  color: var(--ns-warm);
  font-size: 14px;
  line-height: 1.55;
}

#acxpans .acxpans-legendDemo {
  flex: 0 0 auto;
  width: 230px;
}

#acxpans .acxpans-legendBar {
  display: flex;
  height: 12px;
  border-radius: var(--ns-pill);
  overflow: hidden;
  background: var(--ns-t100);
}

#acxpans .acxpans-legendBar i { display: block; height: 100%; }
#acxpans .acxpans-legendBar i:first-child { width: 26%; background: var(--ns-t300); }
#acxpans .acxpans-legendBar i:last-child { width: 74%; background: var(--ns-gold); }

#acxpans .acxpans-legendKeys {
  display: flex;
  justify-content: space-between;
  margin: 7px 0 0;
  color: var(--ns-warm);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* A segmented control, not two cards.

   As two separate white panels the pair read as content: the inactive one had
   no affordance at all, so the second view was routinely never found. Putting
   both inside one bordered track, with the active segment filled and the
   inactive one plainly sitting beside it, says "two positions, one is on" in
   the way a reader already knows. */
#acxpans .acxpans-tabsLabel {
  display: block;
  margin: 0 0 8px;
  color: var(--ns-slate);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

#acxpans .acxpans-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 22px;
  padding: 6px;
  background: var(--ns-white);
  border: 1px solid var(--ns-stone);
  border-radius: var(--ns-r-lg);
  box-shadow: var(--ns-sh-sm);
}

#acxpans .acxpans-tab {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 18px;
  background: transparent;
  border: 0;
  border-radius: var(--ns-r-md);
  box-shadow: none;
  color: var(--ns-ink);
  cursor: pointer;
  text-align: left;
  transition: background .15s ease, color .15s ease;
}

#acxpans .acxpans-tab:hover { background: var(--ns-t50); }

#acxpans .acxpans-tab:focus-visible {
  outline: 3px solid var(--acxpa-ds-link);
  outline-offset: 2px;
}

/* The active tab took --ns-key, which on the Accessibility section resolves to
   Teal 700 - the s8b Exceeds Standards fill, printed in the colour legend a few
   hundred pixels below it. s8d permits a band value on a labelled control, but
   not on a page that publishes that same swatch as a rating. Ink is a neutral,
   dE 20.7 from Exceeds, and the tab is a 12px-radius panel where every band
   chip is a pill, so shape separates them as well (s8d.2). */
#acxpans .acxpans-tab.is-on {
  background: var(--ns-ink);
  box-shadow: none;
  color: var(--ns-white);                    /* 15.82:1 */
}

#acxpans .acxpans-tabIcon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--ns-r-md);
  background: var(--ns-keySoft);
  color: var(--ns-key);
}

#acxpans .acxpans-tab.is-on .acxpans-tabIcon {
  background: color-mix(in srgb, var(--acxpa-ds-white) 18%, transparent);
  color: var(--ns-white);
}

#acxpans .acxpans-tabText { display: block; }

#acxpans .acxpans-tabName {
  display: block;
  margin: 0 0 2px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
}

#acxpans .acxpans-tabMeta {
  display: block;
  color: var(--ns-warm);
  font-size: 13px;
  line-height: 1.45;
}

#acxpans .acxpans-tab.is-on .acxpans-tabMeta { color: color-mix(in srgb, var(--acxpa-ds-white) 84%, transparent); }

#acxpans .acxpans-section { display: none; }

#acxpans .acxpans-section.is-on {
  display: block;
  padding: 28px 28px 26px;
  margin: 0 0 24px;
  background: var(--ns-sand);
  border: 1px solid var(--ns-stone);
  border-top: 5px solid var(--ns-key);
  border-radius: var(--ns-r-xl);
}

#acxpans .acxpans-sectionHead { margin: 0 0 22px; }

#acxpans .acxpans-sectionTitle {
  margin: 0 0 8px;
  color: var(--ns-t800);
  font-size: 27px;
  line-height: 1.24;
  font-weight: 700;
}

#acxpans .acxpans-sectionLede {
  margin: 0 0 10px;
  color: var(--ns-slate);
  font-size: 17px;
  line-height: 1.55;
}

#acxpans .acxpans-scope {
  display: block;
  margin: 0 0 14px;
  color: var(--ns-warm);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

#acxpans .acxpans-scope b { color: var(--ns-key); }

#acxpans .acxpans-note {
  border: 0;
  border-left: 4px solid var(--ns-key);
  border-radius: var(--ns-r-md);
  background: var(--ns-keySoft);
  overflow: hidden;
}

#acxpans .acxpans-note > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  cursor: pointer;
  list-style: none;
  color: var(--ns-key);
  font-size: 14px;
  font-weight: 700;
}

#acxpans .acxpans-note > summary::-webkit-details-marker { display: none; }

#acxpans .acxpans-note > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 2px solid var(--ns-key);
  border-bottom: 2px solid var(--ns-key);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .15s ease;
}

#acxpans .acxpans-note[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

#acxpans .acxpans-noteBody {
  padding: 2px 16px 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 26px;
}

#acxpans .acxpans-noteTitle {
  display: block;
  margin: 0 0 3px;
  color: var(--ns-t800);
  font-size: 14px;
  font-weight: 700;
}

#acxpans .acxpans-noteText {
  display: block;
  color: var(--ns-ink);          /* on a tint ground - see the note rule above */
  font-size: 14px;
  line-height: 1.55;
}

#acxpans .acxpans-note a,
#acxpans .acxpans-legend a {
  color: var(--ns-t600);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

#acxpans .acxpans-note a:hover,
#acxpans .acxpans-legend a:hover { color: var(--ns-goldd); }

#acxpans .acxpans-bands { display: none; }

#acxpans .acxpans-bands.is-on {
  display: block;
  padding: 14px 18px;
  margin: 14px 0 0;
  background: var(--ns-white);
  border: 1px solid var(--ns-stone);
  border-radius: var(--ns-r-md);
  color: var(--ns-warm);
  font-size: 13px;
  line-height: 1.95;
}

#acxpans .acxpans-bands strong { color: var(--ns-t800); font-weight: 700; }

/* The two note grounds are tints, and every muted colour the page uses lands
   under the 4.5 floor on them: Slate 4.04:1 on Teal 100 and 4.42:1 on Gold
   Tint, Gold Deep 4.26:1 on Gold Tint. Ink reads 12.33:1 and 13.50:1 on the
   two, so the whole note takes Ink and the left rail keeps carrying the
   section colour. Links keep the link token - they are set later in the file
   and are unaffected. */
#acxpans .acxpans-note,
#acxpans .acxpans-note p,
#acxpans .acxpans-note li,
#acxpans .acxpans-note b,
#acxpans .acxpans-note strong,
#acxpans .acxpans-note > summary { color: var(--ns-ink); }

/* The legend is copied wholesale from the ranking board, which renders it in a
   300px sidebar where five stacked rows are right. Here it has the full width
   of a card, so it runs as one horizontal row and stops pushing the footnote
   down the page. The board's own 340px cap has to be released for that. */
#acxpans .acxpans-bands .acxpa-band-key {
  max-width: none;
  margin: 0;
  padding: 0;
}

#acxpans .acxpans-bands .acxpa-band-key__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
}

#acxpans .acxpans-bands .acxpa-band-key__row { padding: 0; }

#acxpans .acxpans-bands .acxpa-band-key__title,
#acxpans .acxpans-bands .acxpa-band-key__foot { text-align: center; }

#acxpans .acxpans-bands > strong:first-child {
  display: block;
  margin: 0 0 4px;
  font-size: 12px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

#acxpans .acxpans-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

#acxpans .acxpans-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: var(--ns-white);
  border: 1px solid var(--ns-stone);
  border-radius: var(--ns-r-lg);
  box-shadow: var(--ns-sh-sm);
  overflow: hidden;
}

#acxpans .acxpans-card > .wpb_text_column,
#acxpans .acxpans-card > .wpb_text_column > .wpb_wrapper {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

#acxpans .acxpans-card .acxpa-leaderboard {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 20px 20px 4px !important;
  width: 100%;
}

#acxpans .acxpans-card .rank-content-title {
  padding: 0;
  margin: 0 0 4px;
  background: none;
  border: 0;
  text-align: left;
}

#acxpans .acxpans-card .rank-content-title span {
  color: var(--ns-t800);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.3;
  text-transform: none;
}

#acxpans .acxpans-card .rank-content-heading {
  display: block;
  flex: 1 0 auto;
  padding: 0;
  margin: 0 0 14px;
  background: none;
  border: 0;
  text-align: left;
}

#acxpans .acxpans-card .rank-content-heading > span.wpg-exclude { display: none; }

#acxpans .acxpans-card .rank-desc,
#acxpans .acxpans-card .rank-desc span {
  display: block;
  min-height: 0;
  padding: 0;
  margin: 6px 0 0;
  color: var(--ns-warm);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
}

#acxpans .acxpans-card .acxpa-rank {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 0;
  padding: 12px 0;
  margin: 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--ns-stone);
}

#acxpans .acxpans-card .rank-content-no {
  padding: 0;
  margin: 0;
  background: none;
  color: var(--ns-warm);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-align: left;
  text-transform: uppercase;
}

#acxpans .acxpans-card .comp_logo_vrt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0;
  margin: 0;
  background: none;
  text-align: left;
}

#acxpans .acxpans-card .comp_logo_vrt .comp_link {
  flex: 0 1 auto;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
}

#acxpans .acxpans-card .comp_logo_vrt img {
  display: block;
  max-height: 38px;
  width: auto;
  margin: 0;
}

#acxpans .acxpans-card .logo-rank-sector-name {
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
}

#acxpans .acxpans-card .logo-rank-sector-name,
#acxpans .acxpans-card .logo-rank-sector-name a {
  color: var(--ns-warm);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  text-transform: uppercase;
}

#acxpans .acxpans-card .logo-rank-sector-name a:hover { color: var(--ns-t600); }

#acxpans .acxpans-card .acxpa-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 78px;
  padding: 9px 15px;
  border-radius: var(--ns-pill) !important;
  box-shadow: none !important;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .01em;
}

/* These two chips hold the lowest and the highest result on each metric. They
   are values, so s8d reserves the five band fills against them - and Teal 700
   is the Exceeds Standards fill, printed as a swatch in this page's own colour
   legend. It also overrode, with !important, the neutral this chip was given
   site-wide on the same day. Ink is the neutral for a measured quantity that
   carries no grade; Gold Deep on the row below is not a band value (Gold is)
   and stays, so lowest and highest still read apart at dE 68.3.
   !important is required on all three: the ranking plugin writes an inline
   style="background: #000000;color:#ffffff" onto every one of these chips
   (s21e.2). */
#acxpans .acxpans-card .acxpa-score.wait-time {
  background: var(--ns-ink) !important;
  border-color: var(--ns-ink) !important;
  color: var(--ns-white) !important;
}

#acxpans .acxpans-card .acxpa-rank + .acxpa-rank .acxpa-score.wait-time {
  background: var(--ns-goldd) !important;
  border-color: var(--ns-goldd) !important;
}

#acxpans .acxpans-spread {
  padding: 15px 20px 18px;
  margin: 0;
  background: var(--ns-sand);
  border-top: 1px solid var(--ns-stone);
}

#acxpans .acxpans-spreadTrack {
  display: flex;
  height: 12px;
  border-radius: var(--ns-pill);
  overflow: hidden;
  background: var(--ns-t100);
}

#acxpans .acxpans-spreadBase,
#acxpans .acxpans-spreadGap { display: block; height: 100%; }
#acxpans .acxpans-spreadBase { background: var(--ns-t300); }
#acxpans .acxpans-spreadGap { background: var(--ns-gold); }

#acxpans .acxpans-spreadMeta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 10px 0 0;
}

#acxpans .acxpans-spreadLabel {
  color: var(--ns-warm);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

#acxpans .acxpans-spreadValue {
  color: var(--ns-goldd);
  font-size: 18px;
  font-weight: 700;
}

#acxpans .acxpans-spreadPct {
  margin-left: auto;
  color: var(--ns-warm);
  font-size: 12px;
  line-height: 1.4;
}

#acxpans .acxpans-outro {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 24px;
  margin: 0;
  background: var(--ns-goldt);
  border-radius: var(--ns-r-lg);
  color: var(--ns-ink);
  font-size: 15px;
  line-height: 1.55;
}

#acxpans .acxpans-outro svg {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--ns-goldd);
}

#acxpans .acxpans-outro a {
  color: var(--ns-t700);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

#acxpans .acxpans-outro a:hover { color: var(--ns-goldd); }

body.not-logged-in #acxpans.hide-for-visitor,
body.not-logged-in #acxpans .hide-for-visitor { display: none !important; }

@media (max-width: 900px) {
  #acxpans .acxpans-grid { grid-template-columns: minmax(0, 1fr); }
  #acxpans .acxpans-tabs { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  #acxpans .acxpans-foldBody,
  #acxpans .acxpans-noteBody { grid-template-columns: minmax(0, 1fr); }
  #acxpans .acxpans-hero { flex-direction: column-reverse; align-items: flex-start; gap: 18px; padding: 24px 22px; }
  #acxpans .acxpans-heroMark { width: 76px; height: 76px; margin-top: 0; }
  #acxpans .acxpans-heroMark svg { width: 44px; height: 44px; }
  #acxpans .acxpans-heroTitle { font-size: 27px; }
  #acxpans .acxpans-heroLede { font-size: 17px; }
  #acxpans .acxpans-legend { flex-direction: column; align-items: stretch; gap: 16px; }
  #acxpans .acxpans-legendDemo { width: auto; }
  #acxpans .acxpans-section.is-on { padding: 24px 18px 22px; }
}

@media (max-width: 600px) {
  #acxpans .acxpans-card .acxpa-rank { grid-template-columns: 58px 1fr; row-gap: 10px; }
  #acxpans .acxpans-card .acxpa-score { grid-column: 2; justify-self: start; }
  #acxpans .acxpans-card .comp_logo_vrt { flex-direction: column; align-items: flex-start; gap: 4px; }
  #acxpans .acxpans-card .logo-rank-sector-name { text-align: left; }
  #acxpans .acxpans-outro { flex-direction: column; align-items: flex-start; gap: 12px; }
}