/* ==========================================================================
   CPC Academy, client-facing page (/academy/)
   --------------------------------------------------------------------------
   Namespaced, not nested: every selector starts with a cpca- class (bare
   element selectors appear only inside .cpca-page :where(...)), and there is
   no !important. Loading this file on a page with no cpca- markup changes
   nothing.

   Tokens follow the live site (Tailwind theme in /_astro/BaseLayout.*.css):
   navy #0a0f1a, header navy #0f172a, teal #14b8a6, gold #f59e0b,
   Inter / Inter Display. Teal and gold TEXT on light backgrounds use the
   darker inks (#0f766e, #b45309) so every pairing passes WCAG AA.
   Original build by Tom (CPC); ported and restyled for the site layout.
   ========================================================================== */

.cpca-page {
  --cpca-navy:          #0a0f1a;
  --cpca-navy-header:   #0f172a;
  --cpca-navy-raised:   #111827;
  --cpca-teal:          #14b8a6;
  --cpca-teal-bright:   #2dd4bf;
  --cpca-teal-ink:      #0f766e;
  --cpca-gold:          #f59e0b;
  --cpca-gold-ink:      #b45309;
  --cpca-white:         #ffffff;
  --cpca-offwhite:      #f8fafc;
  --cpca-border:        #e2e8f0;
  --cpca-slate-300:     #cbd5e1;
  --cpca-slate-400:     #94a3b8;
  --cpca-slate-500:     #64748b;
  --cpca-slate-600:     #475569;
  --cpca-text:          #374151;
  --cpca-heading:       #0f172a;

  --cpca-font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --cpca-font-display: "Inter Display", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --cpca-container:     80rem;
  --cpca-radius:        0.25rem;
  --cpca-radius-lg:     0.5rem;
  --cpca-radius-xl:     0.75rem;
  --cpca-shadow-btn:    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --cpca-shadow-card:   0 1px 2px rgb(15 23 42 / 0.04), 0 8px 24px -12px rgb(15 23 42 / 0.12);
  --cpca-ease:          cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   Skip link. Sits at the top of <body>, outside .cpca-page, because the site
   layout has no skip link of its own and one placed after the header would
   be reached only after every nav link.
   -------------------------------------------------------------------------- */

.cpca-skip {
  position: absolute;
  left: 1rem;
  top: 0.75rem;
  z-index: 60;
  transform: translateY(-200%);
  background: #14b8a6;
  color: #0a0f1a;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.75rem 1.25rem;
  border-radius: 0.25rem;
  text-decoration: none;
}

.cpca-skip:focus {
  transform: none;
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Scoped reset. :where() keeps specificity at zero.
   -------------------------------------------------------------------------- */

.cpca-page,
.cpca-page :where(*, *::before, *::after) {
  box-sizing: border-box;
}

.cpca-page :where(h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd) {
  margin: 0;
  padding: 0;
}

.cpca-page :where(ul, ol) {
  list-style: none;
}

.cpca-page :where(img, svg) {
  max-width: 100%;
  display: block;
}

.cpca-page {
  font-family: var(--cpca-font-body);
  color: var(--cpca-text);
  font-size: 1rem;
  line-height: 1.625;
  -webkit-font-smoothing: antialiased;
}

.cpca-page :where(a) {
  color: inherit;
}

/* In-page targets clear the fixed 64px site header. */
.cpca-page :where([id]) {
  scroll-margin-top: 5.5rem;
}

.cpca-page :where(a, button):focus-visible {
  outline: 3px solid var(--cpca-teal-bright);
  outline-offset: 3px;
  border-radius: 2px;
}

.cpca-section--light :where(a, button):focus-visible,
.cpca-section--tint :where(a, button):focus-visible,
.cpca-stats :where(a, button):focus-visible {
  outline-color: var(--cpca-teal-ink);
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.cpca-shell {
  width: 100%;
  max-width: var(--cpca-container);
  margin-inline: auto;
  padding-inline: 1rem;
}

.cpca-section {
  position: relative;
  padding-block: 4rem;
}

.cpca-section--dark {
  background: var(--cpca-navy);
  color: rgb(255 255 255 / 0.8);
}

.cpca-section--light {
  background: var(--cpca-white);
}

.cpca-section--tint {
  background: var(--cpca-offwhite);
  border-top: 1px solid var(--cpca-border);
  border-bottom: 1px solid var(--cpca-border);
}

.cpca-intro {
  max-width: 46rem;
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

.cpca-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cpca-teal-ink);
  margin-bottom: 1rem;
}

.cpca-eyebrow::before {
  content: "";
  width: 1.5rem;
  height: 2px;
  background: currentColor;
  flex: 0 0 auto;
}

.cpca-section--dark .cpca-eyebrow,
.cpca-hero .cpca-eyebrow {
  color: var(--cpca-teal);
}

.cpca-h1 {
  font-family: var(--cpca-font-display);
  font-weight: 700;
  font-size: 2.375rem;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--cpca-white);
  max-width: 18ch;
  margin-bottom: 1.5rem;
  text-wrap: balance;
}

.cpca-h2 {
  font-family: var(--cpca-font-display);
  font-weight: 700;
  font-size: 1.875rem;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--cpca-heading);
  margin-bottom: 1rem;
  text-wrap: balance;
}

.cpca-section--dark .cpca-h2 {
  color: var(--cpca-white);
}

.cpca-h3 {
  font-family: var(--cpca-font-display);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--cpca-heading);
  margin-bottom: 0.5rem;
}

.cpca-section--dark .cpca-h3 {
  color: var(--cpca-white);
}

.cpca-lead {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--cpca-slate-600);
}

.cpca-section--dark .cpca-lead,
.cpca-hero .cpca-lead {
  color: rgb(255 255 255 / 0.78);
}

.cpca-body {
  font-size: 0.9375rem;
  line-height: 1.7;
}

.cpca-small {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--cpca-slate-600);
}

.cpca-textlink {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--cpca-teal-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 0.15s var(--cpca-ease);
}

.cpca-textlink:hover {
  color: var(--cpca-heading);
}

/* --------------------------------------------------------------------------
   Buttons. Same shape as the live site: near-square, px-7 py-3.5.
   -------------------------------------------------------------------------- */

.cpca-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.875rem 1.75rem;
  font-family: var(--cpca-font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  border-radius: var(--cpca-radius);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s var(--cpca-ease),
              border-color 0.15s var(--cpca-ease),
              color 0.15s var(--cpca-ease);
}

.cpca-btn--primary {
  background: var(--cpca-teal);
  color: var(--cpca-navy);
  border: 2px solid var(--cpca-teal);
  box-shadow: var(--cpca-shadow-btn);
}

.cpca-btn--primary:hover {
  background: var(--cpca-teal-bright);
  border-color: var(--cpca-teal-bright);
}

.cpca-btn--ghost {
  background: transparent;
  color: var(--cpca-white);
  border: 2px solid rgb(255 255 255 / 0.7);
}

.cpca-btn--ghost:hover {
  background: rgb(255 255 255 / 0.1);
  border-color: var(--cpca-white);
}

/* Staff entry: deliberately secondary to the client CTAs, still a real
   button-sized target that is easy to spot. */
.cpca-btn--quiet {
  min-height: 2.75rem;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgb(255 255 255 / 0.82);
  background: rgb(255 255 255 / 0.04);
  border: 1px solid rgb(255 255 255 / 0.18);
}

.cpca-btn--quiet:hover {
  color: var(--cpca-white);
  background: rgb(255 255 255 / 0.08);
  border-color: rgb(255 255 255 / 0.4);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.cpca-hero {
  position: relative;
  background: var(--cpca-navy);
  padding-block: 3.5rem 4rem;
  overflow: hidden;
  isolation: isolate;
}

.cpca-hero__wash {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(52rem 30rem at 85% 0%, rgb(20 184 166 / 0.16), transparent 65%),
    radial-gradient(40rem 24rem at 0% 100%, rgb(245 158 11 / 0.07), transparent 60%);
}

/* Faint grid, the only texture on the page. Fades out toward the copy. */
.cpca-hero__wash::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgb(255 255 255 / 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(to left, #000 0%, transparent 70%);
          mask-image: linear-gradient(to left, #000 0%, transparent 70%);
}

.cpca-hero__inner {
  display: grid;
  gap: 3rem;
  align-items: center;
}

.cpca-hero__lead {
  max-width: 40rem;
}

.cpca-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.cpca-hero__note {
  margin-top: 1.5rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: rgb(255 255 255 / 0.6);
  max-width: 48ch;
}

.cpca-hero__note a {
  color: rgb(255 255 255 / 0.85);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cpca-hero__note a:hover {
  color: var(--cpca-white);
}

.cpca-hero__staff {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgb(255 255 255 / 0.1);
}

/* Program at a glance (decorative summary, desktop only) */
.cpca-glance {
  display: none;
  position: relative;
  padding: 1.75rem;
  background: rgb(15 23 42 / 0.72);
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: var(--cpca-radius-xl);
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.6);
}

.cpca-glance::before {
  content: "";
  position: absolute;
  inset: 0 1.75rem auto;
  height: 2px;
  background: linear-gradient(90deg, var(--cpca-teal), transparent);
}

.cpca-glance__label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cpca-slate-400);
  margin-bottom: 1.25rem;
}

.cpca-glance__list {
  position: relative;
  display: grid;
  gap: 0.375rem;
}

.cpca-glance__list::before {
  content: "";
  position: absolute;
  left: 1.0625rem;
  top: 1rem;
  bottom: 1rem;
  width: 1px;
  background: rgb(255 255 255 / 0.12);
}

.cpca-glance__list li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.625rem 0.75rem 0.625rem 0;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.35;
  color: rgb(255 255 255 / 0.82);
}

.cpca-glance__n {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 999px;
  background: var(--cpca-navy);
  border: 1px solid rgb(255 255 255 / 0.18);
  font-family: var(--cpca-font-display);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--cpca-teal);
}

.cpca-glance__list .cpca-glance__key {
  margin-inline: -0.75rem;
  padding-left: 0.75rem;
  border-radius: var(--cpca-radius-lg);
  background: rgb(20 184 166 / 0.1);
  box-shadow: inset 0 0 0 1px rgb(20 184 166 / 0.35);
  color: var(--cpca-white);
  font-weight: 600;
}

.cpca-glance__list .cpca-glance__key .cpca-glance__n {
  background: var(--cpca-teal);
  border-color: var(--cpca-teal);
  color: var(--cpca-navy);
}

/* --------------------------------------------------------------------------
   Stat strip. Matches the homepage band under the hero.
   -------------------------------------------------------------------------- */

.cpca-stats {
  background: var(--cpca-white);
  border-bottom: 1px solid var(--cpca-border);
}

.cpca-stats__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cpca-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem 0.75rem;
}

.cpca-stat:nth-child(odd) {
  border-right: 1px solid var(--cpca-border);
}

.cpca-stat:nth-child(-n + 2) {
  border-bottom: 1px solid var(--cpca-border);
}

.cpca-stat__figure {
  order: -1;
  font-family: var(--cpca-font-display);
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--cpca-teal-ink);
}

.cpca-stat__label {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--cpca-heading);
}

.cpca-stat__sub {
  margin-top: 0.125rem;
  font-size: 0.75rem;
  color: var(--cpca-slate-500);
}

/* --------------------------------------------------------------------------
   Benefits
   -------------------------------------------------------------------------- */

.cpca-benefits {
  display: grid;
  gap: 2.25rem 2rem;
  margin-top: 3rem;
}

.cpca-benefit {
  position: relative;
  padding-top: 1.5rem;
  border-top: 1px solid var(--cpca-border);
}

.cpca-benefit::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 3rem;
  height: 2px;
  background: var(--cpca-teal);
}

.cpca-benefit__n {
  display: block;
  margin-bottom: 0.875rem;
  font-family: var(--cpca-font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--cpca-teal-ink);
}

.cpca-benefit .cpca-body {
  color: var(--cpca-slate-600);
}

/* --------------------------------------------------------------------------
   Coverage. Accordion below 64rem, open cards from 64rem.
   -------------------------------------------------------------------------- */

.cpca-coverage {
  display: grid;
  gap: 0.75rem;
  margin-top: 2.5rem;
}

.cpca-cov {
  background: var(--cpca-white);
  border: 1px solid var(--cpca-border);
  border-radius: var(--cpca-radius-lg);
  box-shadow: var(--cpca-shadow-card);
  overflow: hidden;
}

.cpca-cov__head {
  margin: 0;
}

.cpca-cov__btn {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
  min-height: 3.5rem;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 1rem 1.25rem;
  font-family: var(--cpca-font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--cpca-heading);
  transition: background-color 0.15s var(--cpca-ease);
}

.cpca-cov__btn[aria-expanded] {
  cursor: pointer;
}

.cpca-cov__btn[aria-expanded]:hover {
  background: var(--cpca-offwhite);
}

.cpca-cov__n {
  flex: 0 0 auto;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--cpca-teal-ink);
  min-width: 1.5rem;
}

.cpca-cov__title {
  flex: 1 1 auto;
}

.cpca-cov__chev {
  display: none;
  flex: 0 0 auto;
  position: relative;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: var(--cpca-offwhite);
  border: 1px solid var(--cpca-border);
}

.cpca-cov__chev::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 45%;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid var(--cpca-slate-600);
  border-bottom: 2px solid var(--cpca-slate-600);
  transform: translate(-50%, -50%) rotate(45deg);
  transition: transform 0.2s var(--cpca-ease);
}

.cpca-cov__btn[aria-expanded] .cpca-cov__chev {
  display: block;
}

.cpca-cov__btn[aria-expanded="true"] .cpca-cov__chev::after {
  top: 55%;
  transform: translate(-50%, -50%) rotate(-135deg);
}

.cpca-cov__panel {
  padding: 0 1.25rem 1.375rem;
}

.cpca-cov__panel[hidden] {
  display: none;
}

.cpca-cov__list {
  display: grid;
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--cpca-border);
}

.cpca-cov__list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--cpca-text);
}

/* Small tick, drawn with borders (no icon library). */
.cpca-cov__list li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.32em;
  width: 0.35rem;
  height: 0.65rem;
  border-right: 2px solid var(--cpca-teal-ink);
  border-bottom: 2px solid var(--cpca-teal-ink);
  transform: rotate(45deg);
}

.cpca-cov__rel {
  margin-top: 1.125rem;
  padding: 0.75rem 0.875rem;
  border-radius: var(--cpca-radius);
  background: var(--cpca-offwhite);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--cpca-slate-600);
}

.cpca-cov__rel strong {
  color: var(--cpca-heading);
  font-weight: 700;
}

/* Feature card: the voluntary supervisory pathway. */
.cpca-cov--feature {
  background: var(--cpca-navy-header);
  border-color: var(--cpca-navy-header);
}

.cpca-cov--feature .cpca-cov__btn {
  color: var(--cpca-white);
}

.cpca-cov--feature .cpca-cov__btn[aria-expanded]:hover {
  background: rgb(255 255 255 / 0.04);
}

.cpca-cov--feature .cpca-cov__n {
  color: var(--cpca-teal);
}

.cpca-cov--feature .cpca-cov__chev {
  background: rgb(255 255 255 / 0.06);
  border-color: rgb(255 255 255 / 0.15);
}

.cpca-cov--feature .cpca-cov__chev::after {
  border-color: var(--cpca-slate-300);
}

.cpca-cov--feature .cpca-cov__list {
  border-top-color: rgb(255 255 255 / 0.1);
}

.cpca-cov--feature .cpca-cov__list li {
  color: rgb(255 255 255 / 0.82);
}

.cpca-cov--feature .cpca-cov__list li::before {
  border-color: var(--cpca-teal);
}

.cpca-cov--feature .cpca-cov__rel {
  background: rgb(245 158 11 / 0.1);
  color: rgb(255 255 255 / 0.78);
  box-shadow: inset 0 0 0 1px rgb(245 158 11 / 0.3);
}

.cpca-cov--feature .cpca-cov__rel strong {
  color: var(--cpca-gold);
}

.cpca-cov--feature :where(button):focus-visible {
  outline-color: var(--cpca-teal-bright);
}

/* --------------------------------------------------------------------------
   How it works: sticky heading beside a numbered rail.
   -------------------------------------------------------------------------- */

.cpca-split {
  display: grid;
  gap: 2.5rem;
}

.cpca-steps {
  counter-reset: cpca-step;
  position: relative;
  display: grid;
  gap: 0.75rem;
}

/* Connector from each node down to the next one; none after the last. */
.cpca-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 1.25rem;
  top: 3.625rem;
  bottom: -1.875rem;
  width: 1px;
  background: rgb(20 184 166 / 0.35);
}

.cpca-step {
  counter-increment: cpca-step;
  position: relative;
  padding: 1.25rem 1.25rem 1.25rem 4rem;
  border-radius: var(--cpca-radius-lg);
}

.cpca-step::before {
  content: counter(cpca-step, decimal-leading-zero);
  position: absolute;
  z-index: 1;
  left: 0;
  top: 1.125rem;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: var(--cpca-navy);
  border: 1px solid rgb(255 255 255 / 0.2);
  font-family: var(--cpca-font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--cpca-teal);
}

.cpca-step .cpca-body {
  color: rgb(255 255 255 / 0.72);
}

.cpca-step--key {
  background: rgb(20 184 166 / 0.08);
  box-shadow: inset 0 0 0 1px rgb(20 184 166 / 0.4);
}

.cpca-step--key::before {
  left: 0;
  background: var(--cpca-teal);
  border-color: var(--cpca-teal);
  color: var(--cpca-navy);
  box-shadow: 0 0 0 6px rgb(20 184 166 / 0.15);
}

.cpca-step--key .cpca-body {
  color: rgb(255 255 255 / 0.85);
}

.cpca-step__flag {
  display: inline-block;
  margin-bottom: 0.625rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--cpca-teal);
  color: var(--cpca-navy);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Training register offer (markup withheld, styles kept for later).
   -------------------------------------------------------------------------- */

.cpca-register {
  background: var(--cpca-navy-header);
  border: 1px solid rgb(20 184 166 / 0.35);
  border-radius: var(--cpca-radius-xl);
  padding: 2rem 1.5rem;
  color: rgb(255 255 255 / 0.82);
}

.cpca-register .cpca-h2 {
  color: var(--cpca-white);
}

/* --------------------------------------------------------------------------
   Accreditation: one hairline-divided panel, like the homepage cert strip.
   -------------------------------------------------------------------------- */

.cpca-certs {
  display: grid;
  margin-top: 2.5rem;
  border: 1px solid var(--cpca-border);
  border-radius: var(--cpca-radius-xl);
  background: var(--cpca-white);
  box-shadow: var(--cpca-shadow-card);
  overflow: hidden;
}

.cpca-cert {
  padding: 1.5rem 1.5rem 1.75rem;
  border-top: 1px solid var(--cpca-border);
}

.cpca-cert:first-child {
  border-top: 0;
}

.cpca-cert__mark {
  width: 4rem;
  height: 4rem;
  object-fit: contain;
  margin-bottom: 1rem;
}

.cpca-cert__name {
  font-family: var(--cpca-font-display);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  color: var(--cpca-heading);
}

.cpca-cert__std {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cpca-gold-ink);
  margin: 0.125rem 0 0.75rem;
}

.cpca-certs__more {
  margin-top: 1.25rem;
}

/* --------------------------------------------------------------------------
   Compliance statement. Prominent by design.
   -------------------------------------------------------------------------- */

.cpca-compliance {
  display: grid;
  gap: 1rem;
  max-width: 64rem;
  margin-inline: auto;
  padding: 1.75rem 1.5rem;
  background: var(--cpca-white);
  border: 1px solid var(--cpca-border);
  border-top: 4px solid var(--cpca-gold);
  border-radius: var(--cpca-radius-lg);
  box-shadow: var(--cpca-shadow-card);
}

.cpca-compliance__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.cpca-compliance__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: rgb(245 158 11 / 0.12);
  color: var(--cpca-gold-ink);
}

.cpca-compliance__title {
  font-family: var(--cpca-font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--cpca-heading);
}

.cpca-compliance__body p {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--cpca-text);
}

.cpca-compliance__body p + p {
  margin-top: 1rem;
}

.cpca-compliance__key {
  padding: 1rem 1.125rem;
  border-radius: var(--cpca-radius);
  background: #fffbeb;
  box-shadow: inset 0 0 0 1px rgb(245 158 11 / 0.3);
}

.cpca-compliance__key strong {
  color: var(--cpca-heading);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Closing CTA
   -------------------------------------------------------------------------- */

.cpca-section.cpca-cta {
  overflow: hidden;
  isolation: isolate;
  padding-bottom: 0;
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
}

.cpca-cta__wash {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(40rem 22rem at 88% 35%, rgb(20 184 166 / 0.12), transparent 70%);
}

.cpca-cta__inner {
  display: grid;
  gap: 2rem;
}

.cpca-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.cpca-cta__contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin-top: 1.25rem;
  font-size: 0.9375rem;
}

.cpca-cta__contacts a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--cpca-teal);
  font-weight: 600;
  text-decoration: none;
}

.cpca-cta__contacts a:hover {
  color: var(--cpca-teal-bright);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cpca-staff {
  margin-top: 3.5rem;
}

.cpca-staff p {
  padding-block: 0.75rem;
  border-top: 1px solid rgb(255 255 255 / 0.08);
}

.cpca-staff a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: 0.8125rem;
  color: rgb(255 255 255 / 0.6);
  text-decoration: none;
}

.cpca-staff a:hover {
  color: rgb(255 255 255 / 0.9);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Responsive (mobile first)
   -------------------------------------------------------------------------- */

@media (max-width: 39.999rem) {
  .cpca-hero__cta .cpca-btn,
  .cpca-cta__actions .cpca-btn { flex: 1 1 100%; }
  .cpca-cert           { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: 1rem; padding: 1.25rem; }
  .cpca-cert__mark     { grid-row: 1 / span 3; width: 3.5rem; height: 3.5rem; margin: 0; }
}

@media (min-width: 40rem) {
  .cpca-shell          { padding-inline: 1.5rem; }
  .cpca-h1             { font-size: 3rem; }
  .cpca-h2             { font-size: 2.25rem; }
  .cpca-lead           { font-size: 1.125rem; }
  .cpca-hero           { padding-block: 5rem 5.5rem; }
  .cpca-section        { padding-block: 5rem; }
  .cpca-stat__figure   { font-size: 2.5rem; }
  .cpca-benefits       { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cpca-certs          { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cpca-cert:nth-child(2) { border-top: 0; }
  .cpca-cert:nth-child(even) { border-left: 1px solid var(--cpca-border); }
  .cpca-compliance     { padding: 2.25rem 2.5rem; }
}

@media (min-width: 64rem) {
  .cpca-hero           { padding-block: 6rem 6.5rem; }
  .cpca-hero__inner    { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 4.5rem; }
  .cpca-h1             { font-size: 3.75rem; }
  .cpca-glance         { display: block; }
  .cpca-section        { padding-block: 6rem; }

  .cpca-stats__grid    { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cpca-stat           { padding-block: 2rem; border-bottom: 0; }
  .cpca-stat:nth-child(-n + 2) { border-bottom: 0; }
  .cpca-stat:not(:last-child)  { border-right: 1px solid var(--cpca-border); }
  .cpca-stat__figure   { font-size: 2.75rem; }

  .cpca-coverage       { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; }
  .cpca-cov--feature   { grid-column: 1 / -1; }
  .cpca-cov--feature .cpca-cov__panel { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 0 2.5rem; align-items: start; }
  .cpca-cov--feature .cpca-cov__list  { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
  .cpca-cov--feature .cpca-cov__rel   { margin-top: 1rem; }
  /* Panels are always open from here; the JS renders the titles as plain
     headings, so there is no toggle affordance to hide. */
  .cpca-cov__btn       { padding: 1.375rem 1.5rem 1rem; }
  .cpca-cov__panel     { padding: 0 1.5rem 1.625rem; }

  .cpca-intro          { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: end; }
  .cpca-intro .cpca-h2 { margin-bottom: 0; }
  .cpca-intro .cpca-lead { max-width: 36rem; }
  .cpca-cov:not(.cpca-cov--feature) .cpca-cov__btn { min-height: 5.375rem; align-items: flex-start; }
  .cpca-cov__n         { padding-top: 0.2rem; }

  .cpca-split          { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 5rem; align-items: start; }
  .cpca-split__aside   { position: sticky; top: 7rem; }

  .cpca-certs          { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cpca-cert           { border-top: 0; }
  .cpca-cert:nth-child(even) { border-left: 0; }
  .cpca-cert + .cpca-cert { border-left: 1px solid var(--cpca-border); }

  .cpca-compliance     { grid-template-columns: 15rem minmax(0, 1fr); gap: 2.5rem; padding: 2.5rem 3rem; }
  .cpca-compliance__head { flex-direction: column; align-items: flex-start; gap: 1rem; }

  .cpca-cta__inner     { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 4rem; align-items: end; }
  .cpca-cta__panel     { justify-self: end; }
  .cpca-register       { padding: 2.75rem; }
}

@media (min-width: 80rem) {
  .cpca-benefits       { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cpca-coverage       { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .cpca-page :where(*, *::before, *::after) {
    transition-duration: 0.01ms;
    animation-duration: 0.01ms;
    scroll-behavior: auto;
  }
}

/* --------------------------------------------------------------------------
   Print. Tender evaluators print pages: dark sections invert, every
   coverage panel opens, the compliance statement never splits.
   -------------------------------------------------------------------------- */

@media print {
  .cpca-page { color: #000; font-size: 11pt; line-height: 1.5; }
  .cpca-page :where(a) { color: #000; text-decoration: underline; }

  .cpca-hero, .cpca-section--dark, .cpca-section--light, .cpca-section--tint,
  .cpca-register, .cpca-step, .cpca-stat, .cpca-stats, .cpca-cov, .cpca-cov--feature,
  .cpca-certs, .cpca-compliance, .cpca-compliance__key {
    background: #fff;
    color: #000;
    border-color: #999;
    box-shadow: none;
  }

  .cpca-hero__wash, .cpca-cta__wash, .cpca-glance, .cpca-btn, .cpca-staff,
  .cpca-hero__staff, .cpca-cov__chev { display: none; }

  .cpca-h1, .cpca-h2, .cpca-h3, .cpca-section--dark .cpca-h2, .cpca-section--dark .cpca-h3,
  .cpca-lead, .cpca-section--dark .cpca-lead, .cpca-hero .cpca-lead, .cpca-step .cpca-body,
  .cpca-stat__figure, .cpca-eyebrow, .cpca-section--dark .cpca-eyebrow, .cpca-hero .cpca-eyebrow,
  .cpca-cov--feature .cpca-cov__btn, .cpca-cov--feature .cpca-cov__list li, .cpca-hero__note {
    color: #000;
  }

  .cpca-section { padding-block: 1rem; }
  .cpca-h2, .cpca-h3 { break-after: avoid; }
  .cpca-cov, .cpca-step, .cpca-compliance { break-inside: avoid; }
  .cpca-cov__panel[hidden] { display: block; }
  .cpca-compliance { border: 2px solid #000; }
  .cpca-cta__contacts a::after { content: " (" attr(href) ")"; font-size: 9pt; }
}