/* ==========================================================================
   ACXPA — Call Centre Rankings sector pages
   File: /wp-content/themes/kleo-child/css/acxpa-rankings-sectors.css
   v1.0.0

   Loads on the seven rankings sector category archives and, while the design
   is being agreed, on /testing-page-three/.

   Governed by the ACXPA Brand & Digital Standards v1.5:
     §8   composition — teal family 60 / neutrals 25 / gold 10 / secondary 5
     §13  buttons — gold is the call to action and nothing else
     §13b a secondary accent may fill a band, never a button
     §14  tables — row rules or zebra, never both; tabular-nums; scoped headers
     §20.4 single-class selectors are scoped to their component
     §21b every value comes from a token; no var() fallbacks; no hand-written rem
     §21c this file is location 4 — a per-feature stylesheet, enqueued only where needed

   Every selector below is scoped to .acxpa-sector. There is exactly one
   !important in this file and it carries the comment §25.2 requires.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Bands and rhythm
   -------------------------------------------------------------------------- */
/* Full-bleed bands. The page template wraps content in a fixed-width container,
   which left white gutters either side of every coloured band. This breaks out
   to the viewport without introducing a horizontal scrollbar. */
.acxpa-sector .band{padding-block:var(--acxpa-ds-space-4xl);
  margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50%)}
.acxpa-sector .band--tight{padding-block:var(--acxpa-ds-space-2xl)}
.acxpa-sector .band--subtle{background:var(--acxpa-ds-bg-subtle)}
.acxpa-sector .band--warm{background:var(--acxpa-ds-sand)}
.acxpa-sector .band--deep{background:var(--acxpa-ds-teal-700);color:var(--acxpa-ds-text-on-dark)}
.acxpa-sector .band--deep .lede,
.acxpa-sector .band--deep .muted,
.acxpa-sector .band--deep .note{color:var(--acxpa-ds-text-muted-on-dark)}
.acxpa-sector .wrap{width:min(1240px,100% - var(--acxpa-ds-space-xl) * 2);margin-inline:auto}

.acxpa-sector :focus-visible{outline:2px solid var(--acxpa-ds-focus);outline-offset:2px;border-radius:2px}
.acxpa-sector .band--deep :focus-visible{outline-color:var(--acxpa-ds-focus-on-dark)}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */
.acxpa-sector{font-family:var(--acxpa-ds-font);color:var(--acxpa-ds-text);
  font-size:var(--acxpa-ds-text-body);line-height:var(--acxpa-ds-leading-body)}
.acxpa-sector *,.acxpa-sector *::before,.acxpa-sector *::after{box-sizing:border-box}

.acxpa-sector .eyebrow{display:block;font-size:var(--acxpa-ds-text-eyebrow);font-weight:600;
  letter-spacing:var(--acxpa-ds-tracking-eyebrow);line-height:var(--acxpa-ds-leading-eyebrow);
  text-transform:uppercase;color:var(--acxpa-ds-gold-deep);margin-bottom:var(--acxpa-ds-space-sm)}
.acxpa-sector .band--deep .eyebrow{color:var(--acxpa-ds-gold)}

.acxpa-sector h1,.acxpa-sector h2,.acxpa-sector h3,.acxpa-sector h4{margin:0;text-wrap:balance;
  line-height:var(--acxpa-ds-leading-tight);font-weight:800;font-family:var(--acxpa-ds-font)}
/* balance equalises line lengths, which on a long two-line H1 pulls both lines
   in from the right and leaves the column looking half empty. pretty keeps the
   orphan control without shortening the lines. */
.acxpa-sector h1{font-size:var(--acxpa-ds-text-h1);text-wrap:pretty}
.acxpa-sector h2{font-size:var(--acxpa-ds-text-h2)}
.acxpa-sector h3{font-size:var(--acxpa-ds-text-h3);font-weight:700}
.acxpa-sector h4{font-size:var(--acxpa-ds-text-h4);font-weight:700;line-height:var(--acxpa-ds-leading-snug)}
.acxpa-sector p{margin:0}
.acxpa-sector .lede{font-size:var(--acxpa-ds-text-lead);color:var(--acxpa-ds-text-muted);
  line-height:var(--acxpa-ds-leading-body)}
.acxpa-sector .muted{color:var(--acxpa-ds-text-muted)}
.acxpa-sector .note{font-size:var(--acxpa-ds-text-small);color:var(--acxpa-ds-text-muted)}
.acxpa-sector .stack{display:flex;flex-direction:column;gap:var(--acxpa-ds-space-md)}
.acxpa-sector .stack--lg{gap:var(--acxpa-ds-space-xl)}

/* --------------------------------------------------------------------------
   Buttons — §13
   -------------------------------------------------------------------------- */
.acxpa-sector .btn{display:inline-flex;align-items:center;justify-content:center;
  gap:var(--acxpa-ds-space-xs);padding:var(--acxpa-ds-space-sm) var(--acxpa-ds-space-lg);
  border-radius:var(--acxpa-ds-radius-pill);font-size:var(--acxpa-ds-text-small);font-weight:700;
  text-decoration:none;border:1.5px solid transparent;cursor:pointer;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease}
/* Every state names its own colour. The theme's dynamic stylesheet carries
   `.main-color a:hover{color:#2F65D4}` at equal specificity and loads later, so
   a button that only set its resting colour had its label repainted theme-blue
   on hover. The `a` in these selectors is true of the markup and lifts them
   above that rule — §21e, not an !important. */
.acxpa-sector a.btn--primary,
.acxpa-sector a.btn--primary:link,
.acxpa-sector a.btn--primary:visited{background:var(--acxpa-ds-teal-700);color:var(--acxpa-ds-white)}
.acxpa-sector a.btn--primary:hover,
.acxpa-sector a.btn--primary:focus{background:var(--acxpa-ds-teal-800);color:var(--acxpa-ds-white)}
.acxpa-sector a.btn--primary:active{background:var(--acxpa-ds-teal-900);color:var(--acxpa-ds-white)}

.acxpa-sector a.btn--cta,
.acxpa-sector a.btn--cta:link,
.acxpa-sector a.btn--cta:visited{background:var(--acxpa-ds-gold);color:var(--acxpa-ds-ink)}
.acxpa-sector a.btn--cta:hover,
.acxpa-sector a.btn--cta:focus{background:var(--acxpa-ds-gold-deep);color:var(--acxpa-ds-white)}

.acxpa-sector a.btn--secondary,
.acxpa-sector a.btn--secondary:link,
.acxpa-sector a.btn--secondary:visited{background:var(--acxpa-ds-white);
  color:var(--acxpa-ds-teal-700);border-color:var(--acxpa-ds-teal-700)}
.acxpa-sector a.btn--secondary:hover,
.acxpa-sector a.btn--secondary:focus{background:var(--acxpa-ds-teal-50);
  color:var(--acxpa-ds-teal-700)}
.acxpa-sector .btn-row{display:flex;flex-wrap:wrap;gap:var(--acxpa-ds-space-sm);align-items:center}

.acxpa-sector .textlink{color:var(--acxpa-ds-link);font-weight:600;text-decoration:underline;
  text-underline-offset:.15em}
.acxpa-sector a.textlink:hover,
.acxpa-sector a.textlink:focus{color:var(--acxpa-ds-link-hover)}
.acxpa-sector .memberbar a.textlink:hover,
.acxpa-sector .memberbar a.textlink:focus,
.acxpa-sector .band--deep a.textlink:hover,
.acxpa-sector .band--deep a.textlink:focus{color:var(--acxpa-ds-gold)}
.acxpa-sector .band--deep .textlink{color:var(--acxpa-ds-text-on-dark)}
.acxpa-sector .band--deep h1,
.acxpa-sector .band--deep h2,
.acxpa-sector .band--deep h3{color:var(--acxpa-ds-text-on-dark)}

/* --------------------------------------------------------------------------
   Rating bands — §8b. The name and threshold are written, never colour alone.
   -------------------------------------------------------------------------- */
.acxpa-sector .band-chip{display:inline-flex;align-items:baseline;gap:var(--acxpa-ds-space-xs);
  padding:var(--acxpa-ds-space-2xs) var(--acxpa-ds-space-sm);border-radius:var(--acxpa-ds-radius-sm);
  font-weight:600;font-size:var(--acxpa-ds-text-small);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.acxpa-sector .band-chip__range{font-weight:400;opacity:.85}
.acxpa-sector .band-chip--outstanding{background:var(--acxpa-ds-band-outstanding);color:var(--acxpa-ds-band-outstanding-on)}
.acxpa-sector .band-chip--exceeds{background:var(--acxpa-ds-band-exceeds);color:var(--acxpa-ds-band-exceeds-on)}
.acxpa-sector .band-chip--meets{background:var(--acxpa-ds-band-meets);color:var(--acxpa-ds-band-meets-on)}
.acxpa-sector .band-chip--below{background:var(--acxpa-ds-band-below);color:var(--acxpa-ds-band-below-on)}
.acxpa-sector .band-chip--poor{background:var(--acxpa-ds-band-poor);color:var(--acxpa-ds-band-poor-on)}
@media (forced-colors:active){.acxpa-sector .band-chip{border:1px solid CanvasText;forced-color-adjust:none}}

/* The key is a list of five items, each focusable, so the hover state is also
   reachable by keyboard. No description text: the standards define the bands by
   name and threshold only, and inventing prose for them would not be the scale. */
.acxpa-sector .bandkey{display:flex;flex-wrap:wrap;gap:var(--acxpa-ds-space-sm);
  margin:0;padding:0;list-style:none}
.acxpa-sector .bandkey__item{border-radius:var(--acxpa-ds-radius-sm);
  transition:transform .12s ease,box-shadow .12s ease}
.acxpa-sector .bandkey__item:hover,
.acxpa-sector .bandkey__item:focus-visible{transform:translateY(-2px);
  box-shadow:var(--acxpa-ds-shadow-md)}
.acxpa-sector .bandkey__item:hover .band-chip__range,
.acxpa-sector .bandkey__item:focus-visible .band-chip__range{opacity:1;font-weight:600}
@media (prefers-reduced-motion:reduce){
  .acxpa-sector .bandkey__item{transition:none}
  .acxpa-sector .bandkey__item:hover,
  .acxpa-sector .bandkey__item:focus-visible{transform:none}
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
/* Intro copy is never constrained — the facts sit beneath it, full width, so
   nothing squeezes the lede into a narrow column. */
.acxpa-sector .hero__facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--acxpa-ds-space-lg);padding:var(--acxpa-ds-space-lg) var(--acxpa-ds-space-xl);
  background:var(--acxpa-ds-teal-800);border-radius:var(--acxpa-ds-radius-xl)}
.acxpa-sector .fact{display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;gap:var(--acxpa-ds-space-2xs);
  padding-inline:var(--acxpa-ds-space-md);
  border-left:1px solid var(--acxpa-ds-teal-600)}
.acxpa-sector .fact:first-child{border-left:0}
.acxpa-sector .fact__label{font-size:var(--acxpa-ds-text-small);color:var(--acxpa-ds-text-muted-on-dark)}
.acxpa-sector .fact__value{font-size:var(--acxpa-ds-text-h3);font-weight:800;
  font-variant-numeric:tabular-nums;color:var(--acxpa-ds-text-on-dark)}

/* --------------------------------------------------------------------------
   Cards and grids
   -------------------------------------------------------------------------- */
.acxpa-sector .card{background:var(--acxpa-ds-white);border:1px solid var(--acxpa-ds-border);
  border-radius:var(--acxpa-ds-radius-xl);padding:var(--acxpa-ds-space-xl);
  box-shadow:var(--acxpa-ds-shadow-sm)}
.acxpa-sector .grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--acxpa-ds-space-xl)}

/* --------------------------------------------------------------------------
   Ranking plugin output, reframed
   The boards come from [rankingboard]; this only sets the frame around them.
   -------------------------------------------------------------------------- */
.acxpa-sector .boardframe{background:var(--acxpa-ds-white);border:1px solid var(--acxpa-ds-border);
  border-radius:var(--acxpa-ds-radius-xl);padding:var(--acxpa-ds-space-lg);
  box-shadow:var(--acxpa-ds-shadow-sm)}
.acxpa-sector .boardframe .acxpa-leaderboard{
  background:var(--acxpa-ds-white) !important; /* ranking plugin writes style="background:#f2f2f2" on every board — §21e.2 */
  border-radius:var(--acxpa-ds-radius-lg)}
.acxpa-sector .boardframe .acxpa-score{font-variant-numeric:tabular-nums}

/* --------------------------------------------------------------------------
   Tables — §14
   -------------------------------------------------------------------------- */
.acxpa-sector .table-scroll{overflow-x:auto}
.acxpa-sector .table-scroll table{width:100%;border-collapse:collapse;
  font-size:var(--acxpa-ds-text-small)}
.acxpa-sector .table-scroll thead th{font-size:var(--acxpa-ds-text-eyebrow);font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--acxpa-ds-text-muted);text-align:left;
  padding:var(--acxpa-ds-space-sm) var(--acxpa-ds-space-md);white-space:nowrap}
.acxpa-sector .table-scroll thead th[data-col]{text-align:center}
.acxpa-sector .table-scroll tbody th{font-weight:500;text-align:left}
.acxpa-sector .table-scroll td,
.acxpa-sector .table-scroll tbody th{padding:var(--acxpa-ds-space-sm) var(--acxpa-ds-space-md);
  border-top:1px solid var(--acxpa-ds-border);vertical-align:top}
.acxpa-sector .table-scroll td.num{text-align:right;font-variant-numeric:tabular-nums}
.acxpa-sector .table-scroll td.mark{text-align:center;white-space:nowrap;width:12%}
.acxpa-sector .table-scroll .tier{display:block;font-weight:700;color:var(--acxpa-ds-teal-800)}
.acxpa-sector .table-scroll .tier__price{display:block;font-weight:400;text-transform:none;
  letter-spacing:0;color:var(--acxpa-ds-text-muted);font-size:var(--acxpa-ds-text-caption)}
.acxpa-sector .table-scroll .yes{color:var(--acxpa-ds-success);font-weight:700}
.acxpa-sector .table-scroll .no{color:var(--acxpa-ds-text-muted)}
.acxpa-sector .table-scroll tr.group th{background:var(--acxpa-ds-teal-50);font-weight:700;
  color:var(--acxpa-ds-teal-800);font-size:var(--acxpa-ds-text-small);letter-spacing:0;
  text-transform:none}

/* The reader's own tier is marked, so the table answers "what do I have"
   before it answers "what could I have". The label carries it as well as the
   tint — colour never the only cue (§8). */
.acxpa-sector[data-view="visitor"] .table-scroll [data-col="visitor"],
.acxpa-sector[data-view="subscriber"] .table-scroll [data-col="subscriber"]{
  background:var(--acxpa-ds-teal-50)}
.acxpa-sector[data-view="visitor"] .table-scroll th[data-col="visitor"],
.acxpa-sector[data-view="subscriber"] .table-scroll th[data-col="subscriber"]{
  box-shadow:inset 0 3px 0 0 var(--acxpa-ds-teal-700)}
/* No display property here on purpose. Anything this file gives a display to
   cannot be gated by the site's hide-for-* rules, because this stylesheet loads
   after custom.css and those rules carry no !important. The gating class sits
   on a bare wrapper instead. */
.acxpa-sector .tier__you{font-weight:700;color:var(--acxpa-ds-teal-700);
  text-transform:none;letter-spacing:0;font-size:var(--acxpa-ds-text-caption)}

/* --------------------------------------------------------------------------
   Shared [templatera] blocks
   Each one renders a full theme section — <section class="container-wrap
   main-color"> with its own white ground, container width and padding — which
   showed as white bands sitting inside our tinted sections. Neutralised here
   so the shared block inherits whatever surface it is dropped onto.
   -------------------------------------------------------------------------- */
.acxpa-sector .templatera_shortcode > section.container-wrap{background:transparent;
  padding-block:0}
.acxpa-sector .templatera_shortcode .section-container.container{width:100%;
  max-width:none;padding-inline:0}
.acxpa-sector .templatera_shortcode .vc_row{margin-inline:0}
.acxpa-sector .templatera_shortcode .wpb_column,
.acxpa-sector .templatera_shortcode .vc_column-inner{padding-inline:0}
.acxpa-sector .templatera_shortcode .acxpa-drop-custom{margin-block:0}

/* --------------------------------------------------------------------------
   Sponsor / ad slot — the shared [templatera id="75832"] block
   -------------------------------------------------------------------------- */
/* No ground of our own — the shared sponsor block already carries one. */
.acxpa-sector .adslot .sponsor-text{font-size:var(--acxpa-ds-text-small);
  color:var(--acxpa-ds-warm-slate);text-align:center;max-width:none}

/* The copy sits in its own column so it never runs on underneath the badge,
   and the badge is centred against the whole block rather than pinned to the
   top of it. */
.acxpa-sector .hero__head{display:grid;
  grid-template-columns:minmax(0,1fr) clamp(170px,20vw,240px);
  gap:var(--acxpa-ds-space-2xl);align-items:center}
.acxpa-sector .hero__copy{display:flex;flex-direction:column;
  gap:var(--acxpa-ds-space-lg);min-width:0}
.acxpa-sector .hero__badge{width:100%;height:auto;justify-self:end}
@media (max-width:820px){
  .acxpa-sector .hero__head{grid-template-columns:1fr;justify-items:start;
    gap:var(--acxpa-ds-space-lg)}
  .acxpa-sector .hero__badge{width:150px}
}
.acxpa-sector .fact__sub{display:block;font-size:var(--acxpa-ds-text-small);
  font-weight:600;color:var(--acxpa-ds-gold)}

/* --------------------------------------------------------------------------
   Banner image
   -------------------------------------------------------------------------- */
.acxpa-sector .banner{display:block;width:100%;height:auto;
  border-radius:var(--acxpa-ds-radius-xl)}
/* The copy length varies a lot between sectors — energy runs four short
   paragraphs, aged care five long ones. A fixed-ratio image centred against
   that leaves a lot of dead space on the long ones, so the image column
   stretches to the copy height and crops rather than floating in a gap. */
.acxpa-sector .mediacard{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  gap:var(--acxpa-ds-space-xl);align-items:stretch}
.acxpa-sector .mediacard img{width:100%;height:100%;min-height:260px;max-height:520px;
  object-fit:cover;object-position:center top;border-radius:var(--acxpa-ds-radius-lg)}
.acxpa-sector .bodycopy{display:flex;flex-direction:column;gap:var(--acxpa-ds-space-md)}

/* --------------------------------------------------------------------------
   Quarterly report tiles
   State is carried by [data-state], never by text in the excerpt.
   -------------------------------------------------------------------------- */
.acxpa-sector .reports{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--acxpa-ds-space-lg)}
.acxpa-sector .upcoming{display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--acxpa-ds-space-md);padding:var(--acxpa-ds-space-md) var(--acxpa-ds-space-lg);
  background:var(--acxpa-ds-gold-tint);border-radius:var(--acxpa-ds-radius-lg);
  border-left:4px solid var(--acxpa-ds-gold)}
.acxpa-sector .upcoming__label{font-size:var(--acxpa-ds-text-caption);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--acxpa-ds-gold-deep)}
.acxpa-sector .upcoming__text{font-size:var(--acxpa-ds-text-small);color:var(--acxpa-ds-ink)}
.acxpa-sector .upcoming .textlink{margin-left:auto}
.acxpa-sector .upcoming + .reports{margin-top:var(--acxpa-ds-space-lg)}
.acxpa-sector .tile{display:flex;flex-direction:column;gap:var(--acxpa-ds-space-sm);
  padding:var(--acxpa-ds-space-lg);border:1px solid var(--acxpa-ds-border);
  border-radius:var(--acxpa-ds-radius-lg);background:var(--acxpa-ds-white);height:100%}
.acxpa-sector .tile[data-state="open"]{border-color:var(--acxpa-ds-teal-700);
  box-shadow:var(--acxpa-ds-shadow-md)}
.acxpa-sector .tile[data-state="pending"]{background:var(--acxpa-ds-cloud)}
/* Locked reports take the clay tint — a secondary accent filling a surface,
   which §13b permits — so "you cannot open this" reads differently from the
   teal of everything you can. Ink on clay tint measures 12.78:1. */
.acxpa-sector .tile[data-state="locked"]{background:var(--acxpa-ds-clay-tint);
  border-color:var(--acxpa-ds-clay)}
.acxpa-sector .tile[data-state="locked"] .tile__note,
.acxpa-sector .tile[data-state="locked"] .note{color:var(--acxpa-ds-clay-deep)}
.acxpa-sector .tile__state{display:inline-flex;align-items:center;gap:var(--acxpa-ds-space-2xs);
  align-self:flex-start;padding:var(--acxpa-ds-space-2xs) var(--acxpa-ds-space-sm);
  border-radius:var(--acxpa-ds-radius-pill);font-size:var(--acxpa-ds-text-caption);
  font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.acxpa-sector .tile[data-state="open"] .tile__state{background:var(--acxpa-ds-teal-700);
  color:var(--acxpa-ds-white)}
.acxpa-sector .tile[data-state="locked"] .tile__state{background:var(--acxpa-ds-clay-deep);
  color:var(--acxpa-ds-white)}
.acxpa-sector .tile[data-state="pending"] .tile__state{background:var(--acxpa-ds-gold-tint);
  color:var(--acxpa-ds-gold-deep)}
.acxpa-sector .tile__quarter{font-size:var(--acxpa-ds-text-h4);font-weight:800;
  font-variant-numeric:tabular-nums}
.acxpa-sector .tile__note{font-size:var(--acxpa-ds-text-small);color:var(--acxpa-ds-text-muted);flex:1}
.acxpa-sector .tile__action{margin-top:var(--acxpa-ds-space-xs)}

/* --------------------------------------------------------------------------
   Member block — the whole page for a logged-in member
   -------------------------------------------------------------------------- */
/* Harbour Deep, not Teal 700. Teal 700 is the site navigation's own colour, so
   a callout painted in it reads as chrome rather than as a message. Harbour is
   a secondary accent, which §13b allows to fill a band (never a button).
   Measured on #1B2F52: white 13.33:1, Gold 7.16:1, Teal 200 8.05:1 — all AAA. */
.acxpa-sector .memberbar{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:var(--acxpa-ds-space-lg);padding:var(--acxpa-ds-space-xl);
  background:var(--acxpa-ds-harbour-deep);border-radius:var(--acxpa-ds-radius-xl);
  border-left:6px solid var(--acxpa-ds-gold);color:var(--acxpa-ds-text-on-dark)}
/* The eyebrow inherited Gold Deep on Teal 700 — 1.83:1, a fail, and the reason
   "ACXPA MEMBER" was barely visible. On-dark surfaces take Gold. */
.acxpa-sector .memberbar .eyebrow{color:var(--acxpa-ds-gold)}

/* The greeting collapses entirely when there is no name, so nothing is left
   dangling. [acxpa_greeting] returns the whole greeting or an empty string. */
.acxpa-sector .greeting{font-size:var(--acxpa-ds-text-lead);font-weight:600}
.acxpa-sector .greeting:empty{display:none}
.acxpa-sector .memberbar .greeting{color:var(--acxpa-ds-text-on-dark)}
.acxpa-sector .subbar .greeting{color:var(--acxpa-ds-teal-700)}
.acxpa-sector .memberbar p{color:var(--acxpa-ds-text-muted-on-dark);
  margin-top:var(--acxpa-ds-space-sm)}
.acxpa-sector .memberbar__text{display:flex;flex-direction:column;gap:var(--acxpa-ds-space-md)}
.acxpa-sector .memberbar__list{margin:0;padding-left:0;list-style:none;display:grid;
  gap:var(--acxpa-ds-space-xs);font-size:var(--acxpa-ds-text-small);
  color:var(--acxpa-ds-text-muted-on-dark)}
.acxpa-sector .memberbar__list li{padding-left:var(--acxpa-ds-space-lg);position:relative}
/* Subscriber callout — a light surface. Teal 700 on Sand measures 8.57:1. */
.acxpa-sector .subbar{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:var(--acxpa-ds-space-lg);
  padding:var(--acxpa-ds-space-lg) var(--acxpa-ds-space-xl);background:var(--acxpa-ds-sand);
  border-radius:var(--acxpa-ds-radius-xl);border-left:6px solid var(--acxpa-ds-gold);
  color:var(--acxpa-ds-text)}
.acxpa-sector .subbar h2{color:var(--acxpa-ds-teal-700);font-size:var(--acxpa-ds-text-h3)}
.acxpa-sector .subbar p{color:var(--acxpa-ds-text-muted);margin-top:var(--acxpa-ds-space-2xs)}
.acxpa-sector .subbar__text{display:flex;flex-direction:column;gap:var(--acxpa-ds-space-xs)}

.acxpa-sector .memberbar__list li::before{content:"";position:absolute;left:0;top:.55em;
  width:var(--acxpa-ds-space-xs);height:var(--acxpa-ds-space-xs);border-radius:50%;
  background:var(--acxpa-ds-gold)}

/* Every text role on this dark surface is set explicitly, never inherited.
   §17 on-dark roles; §21e — the theme colours headings and links from a rule of
   equal specificity that loads later, so these carry one true extra level
   (.memberbar) rather than an !important. */
.acxpa-sector .memberbar h1,
.acxpa-sector .memberbar h2,
.acxpa-sector .memberbar h3{color:var(--acxpa-ds-text-on-dark)}
.acxpa-sector .memberbar a.textlink,
.acxpa-sector .memberbar a.textlink:hover{color:var(--acxpa-ds-text-on-dark)}
.acxpa-sector .memberbar a.btn--secondary{color:var(--acxpa-ds-teal-700)}
.acxpa-sector .memberbar :focus-visible{outline-color:var(--acxpa-ds-focus-on-dark)}

/* --------------------------------------------------------------------------
   Special offer — a panel with a price, not a paragraph
   -------------------------------------------------------------------------- */
.acxpa-sector .offer{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  gap:var(--acxpa-ds-space-2xl);align-items:center;padding:var(--acxpa-ds-space-2xl);
  background:var(--acxpa-ds-teal-800);border-radius:var(--acxpa-ds-radius-xl);
  border:1px solid var(--acxpa-ds-teal-600)}
.acxpa-sector .offer__body{display:flex;flex-direction:column;gap:var(--acxpa-ds-space-md)}
.acxpa-sector .offer__price{display:flex;flex-direction:column;align-items:center;
  gap:var(--acxpa-ds-space-2xs);padding:var(--acxpa-ds-space-xl);
  background:var(--acxpa-ds-gold);border-radius:var(--acxpa-ds-radius-lg);
  color:var(--acxpa-ds-ink);text-align:center}
.acxpa-sector .offer__amount{font-size:var(--acxpa-ds-text-display);font-weight:800;
  line-height:var(--acxpa-ds-leading-tight);font-variant-numeric:tabular-nums}
.acxpa-sector .offer__caption{font-size:var(--acxpa-ds-text-small);font-weight:600}
.acxpa-sector .offer ul{margin:0;padding-left:0;list-style:none;display:grid;
  gap:var(--acxpa-ds-space-xs);color:var(--acxpa-ds-text-muted-on-dark);
  font-size:var(--acxpa-ds-text-small)}
.acxpa-sector .offer li{padding-left:var(--acxpa-ds-space-lg);position:relative}
.acxpa-sector .offer li::before{content:"";position:absolute;left:0;top:.55em;
  width:var(--acxpa-ds-space-xs);height:var(--acxpa-ds-space-xs);border-radius:50%;
  background:var(--acxpa-ds-gold)}

/* The trial button uses the same treatment as the benchmarking landing pages —
   a double glow flash with a sheen sweeping across it. Same keyframe names and
   timing as .acxpa-lp .btn-gold.pulse so the two stay in step, and the same
   reduced-motion behaviour: both the glow and the sheen stop dead. */
/* The landing-page original hard-codes rgba(249,176,46) — the gold value
   restated a third time. These derive it from the token instead, so a change
   to Gold reaches the animation too. */
@keyframes acxpaCtaGlow{
  0%{box-shadow:0 0 0 0 transparent;filter:brightness(1)}
  8%{box-shadow:0 0 30px 8px color-mix(in srgb,var(--acxpa-ds-gold) 85%,transparent);filter:brightness(1.09)}
  17%{box-shadow:0 0 8px 2px color-mix(in srgb,var(--acxpa-ds-gold) 20%,transparent);filter:brightness(1)}
  27%{box-shadow:0 0 34px 10px color-mix(in srgb,var(--acxpa-ds-gold) 85%,transparent);filter:brightness(1.09)}
  42%{box-shadow:0 0 0 0 transparent;filter:brightness(1)}
  100%{box-shadow:0 0 0 0 transparent;filter:brightness(1)}
}
@keyframes acxpaCtaSheen{
  0%{left:-60%}
  20%{left:120%}
  100%{left:120%}
}
.acxpa-sector a.btn--offer{position:relative;overflow:hidden;
  animation:acxpaCtaGlow 2s linear infinite}
.acxpa-sector a.btn--offer::before{content:"";position:absolute;top:0;bottom:0;
  left:-60%;width:45%;pointer-events:none;transform:skewX(-18deg);
  background:linear-gradient(100deg,transparent 0%,color-mix(in srgb,var(--acxpa-ds-white) 85%,transparent) 50%,transparent 100%);
  animation:acxpaCtaSheen 2s linear infinite}
@media (prefers-reduced-motion:reduce){
  .acxpa-sector a.btn--offer{animation:none}
  .acxpa-sector a.btn--offer::before{display:none}
}
@media (max-width:900px){
  .acxpa-sector .offer{grid-template-columns:1fr}
}

/* --------------------------------------------------------------------------
   Sector links
   -------------------------------------------------------------------------- */
.acxpa-sector .sectors{display:flex;flex-wrap:wrap;gap:var(--acxpa-ds-space-sm)}
.acxpa-sector .sectors a{padding:var(--acxpa-ds-space-xs) var(--acxpa-ds-space-md);
  border:1px solid var(--acxpa-ds-border);border-radius:var(--acxpa-ds-radius-pill);
  font-size:var(--acxpa-ds-text-small);font-weight:600;color:var(--acxpa-ds-teal-700);
  text-decoration:none}
.acxpa-sector .sectors a:hover{background:var(--acxpa-ds-teal-50);
  border-color:var(--acxpa-ds-border-strong)}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width:1100px){
  .acxpa-sector .reports{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .acxpa-sector .mediacard{grid-template-columns:1fr}
  .acxpa-sector .hero__facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .acxpa-sector .fact{padding-left:0;border-left:0}
  .acxpa-sector .grid-2{grid-template-columns:1fr}
}
@media (max-width:560px){
  .acxpa-sector .reports{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .acxpa-sector .btn{transition:none}
}

/* ==========================================================================
   STAGING ONLY — delete this block, and the matching JS file, before rollout.

   On /testing-page-three/ the three audience states are switched with
   data-view / data-audience so they can all be checked while logged in.
   On the live category templates the states are PMPro hide-for-* classes on
   the row, and none of this is needed.
   ========================================================================== */
.acxpa-sector[data-view="visitor"] [data-audience]:not([data-audience~="visitor"]),
.acxpa-sector[data-view="subscriber"] [data-audience]:not([data-audience~="subscriber"]),
.acxpa-sector[data-view="member"] [data-audience]:not([data-audience~="member"]){display:none}

.acxpa-sector-preview{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;
  align-items:center;gap:var(--acxpa-ds-space-sm);
  padding:var(--acxpa-ds-space-sm) var(--acxpa-ds-space-lg);
  background:var(--acxpa-ds-ink);color:var(--acxpa-ds-white);
  font-family:var(--acxpa-ds-font);font-size:var(--acxpa-ds-text-small)}
.acxpa-sector-preview__label{margin:0;font-size:var(--acxpa-ds-text-eyebrow);
  letter-spacing:var(--acxpa-ds-tracking-eyebrow);text-transform:uppercase;font-weight:600;
  color:var(--acxpa-ds-teal-200)}
.acxpa-sector-preview__tab{padding:var(--acxpa-ds-space-2xs) var(--acxpa-ds-space-md);
  border-radius:var(--acxpa-ds-radius-pill);border:1px solid var(--acxpa-ds-slate);
  background:transparent;color:var(--acxpa-ds-white);font:inherit;font-weight:600;cursor:pointer}
.acxpa-sector-preview__tab[aria-pressed="true"]{background:var(--acxpa-ds-gold);
  color:var(--acxpa-ds-ink);border-color:var(--acxpa-ds-gold)}
.acxpa-sector-preview__note{margin-left:auto;color:var(--acxpa-ds-teal-200);
  font-size:var(--acxpa-ds-text-caption)}