/* ============================================================================
   article.css — the design system for carpro content pages (cpa-* prefix).

   Scope: the public content/solution pages under the marketing site. NOT the
   app (Metronic), NOT the one-pager (cpl-*), NOT the legal documents (cp-*).

   Why its own tokens instead of importing legal.css: legal.css is loaded by
   three LIVE pages (/privacy, /terms, /dpa). Editing a token there changes all
   three at once. Consolidating every brand token into one tokens.css is worth
   doing, but it belongs with the shared-partial migration of those pages, not
   with the addition of a new page. Values here mirror the marketing brand.

   RTL: the page is dir="rtl". Use logical properties (inline-start/end), never
   left/right, so a future LTR variant costs nothing.
   ========================================================================= */

:root {
  --cpa-primary:       #3A2DA8;
  --cpa-primary-dark:  #2A2185;
  --cpa-primary-tint:  #EDEBFA;
  --cpa-ink-deep:      #1F1A4A;
  --cpa-accent:        #C2DC2C;
  --cpa-accent-ink:    #1F1A4A;

  --cpa-white:  #FFFFFF;
  --cpa-bg:     #F7F6FB;
  --cpa-surface:#FFFFFF;
  --cpa-surface-2:#FBFAFE;
  --cpa-line:   #E3E1F0;
  --cpa-line-soft:#EFEDF7;
  --cpa-muted:  #6E7391;
  --cpa-body:   #414662;
  --cpa-heading:#15182C;

  --cpa-warn:      #B4541B;
  --cpa-warn-bg:   #FBEFE7;
  --cpa-warn-line: #E6C3AC;

  --cpa-font: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --cpa-font-body: "Heebo", "Rubik", -apple-system, "Segoe UI", Arial, sans-serif;

  --cpa-r-sm: 8px;
  --cpa-r-md: 12px;
  --cpa-r-lg: 16px;
  --cpa-shadow: 0 1px 2px rgba(31,26,74,.05), 0 8px 24px -12px rgba(31,26,74,.18);

  /* Reading measure for the article body. Applied ONCE, to the .cpa-prose
     container - never to individual paragraphs.

     Capping each <p> instead was a real defect: the grid already limits the
     content column to 816px, so a 68ch cap on top left paragraphs at 623px while
     every sibling (tables, cards, checklists, the figure, the FAQ) ran the full
     816. Text that stops 193px short of everything around it reads as a stray
     line break, which is exactly how it was reported. Constrain once, at the
     container, so every block shares one edge.

     Deliberately rem, not ch. `ch` resolves against the ELEMENT's own font, so a
     single ch token produces different pixel widths on elements of different
     sizes - the 19px lede came out 854px while a 16px paragraph came out 719px
     from the very same variable. rem resolves against the root once, so every
     element that uses it lands on the same edge. */
  --cpa-measure: 47rem;
}

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

/* ---------- line breaking ----------
   Where a line breaks is a typographic decision, not something to leave to the
   default greedy algorithm, which happily strands a single word on the last line
   or splits a short paragraph mid-phrase.

   `balance` evens the lines of a SHORT block (headings, a lede, a caption, a
   two-line CTA paragraph) - the browser applies it up to a handful of lines and
   ignores it beyond that, which is exactly the intent.
   `pretty` leaves long running text alone but prevents orphans at the end.

   Both degrade to the normal algorithm on browsers that do not support them, so
   there is nothing to guard. A hard <br> is NOT the tool here: it breaks at a
   fixed point regardless of width and produces a ragged line on every other
   screen size. */
.cpa-lede,
.cpa-cta p,
.cpa-figure figcaption,
.cpa-hub__head p,
.cpa-answer p { text-wrap: balance; }

.cpa-prose p,
.cpa-prose li,
.cpa-faq__a p,
.cpa-card li,
.cpa-rows p,
.cpa-hub__card p,
.cpa-related__item span { text-wrap: pretty; }

.cpa-body {
  margin: 0;
  background: var(--cpa-bg);
  color: var(--cpa-body);
  font-family: var(--cpa-font-body);
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

.cpa-wrap {
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: 16px;
}

/* Keyboard users land here first. */
.cpa-skip {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  background: var(--cpa-primary);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 var(--cpa-r-sm) var(--cpa-r-sm);
  z-index: 100;
  font-family: var(--cpa-font);
}
.cpa-skip:focus { inset-inline-start: 16px; }

/* ---------- nav ---------- */
.cpa-nav {
  background: var(--cpa-surface);
  border-block-end: 1px solid var(--cpa-line);
  position: sticky;
  top: 0;
  z-index: 40;
}
.cpa-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 14px;
}
.cpa-nav__links {
  display: flex;
  gap: 22px;
  font-family: var(--cpa-font);
  font-size: 15px;
}
.cpa-nav__links a { color: var(--cpa-muted); text-decoration: none; }
.cpa-nav__links a:hover { color: var(--cpa-primary); }
@media (max-width: 720px) { .cpa-nav__links { display: none; } }

/* ---------- buttons ---------- */
.cpa-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--cpa-font);
  font-weight: 600;
  font-size: 15px;
  padding: 11px 22px;
  border-radius: var(--cpa-r-md);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
}
.cpa-btn--primary { background: var(--cpa-accent); color: var(--cpa-accent-ink); }
.cpa-btn--primary:hover { filter: brightness(1.06); }
.cpa-btn--ghost { background: transparent; color: var(--cpa-primary); border-color: var(--cpa-line); }
.cpa-btn--ghost:hover { border-color: var(--cpa-primary); }
.cpa-btn--sm { font-size: 14px; padding: 9px 16px; }

/* ---------- breadcrumbs ---------- */
.cpa-crumbs {
  font-family: var(--cpa-font);
  font-size: 13.5px;
  color: var(--cpa-muted);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}
.cpa-crumbs a { color: var(--cpa-muted); text-decoration: none; }
.cpa-crumbs a:hover { color: var(--cpa-primary); }
.cpa-crumbs li::after { content: "\203A"; opacity: .5; margin-inline-start: 8px; }
.cpa-crumbs li:last-child::after { content: none; }
.cpa-crumbs li { display: flex; align-items: center; gap: 8px; }

/* ---------- headings ---------- */
.cpa-h1 {
  font-family: var(--cpa-font);
  font-weight: 700;
  color: var(--cpa-heading);
  font-size: clamp(30px, 5.2vw, 42px);
  line-height: 1.18;
  letter-spacing: -.022em;
  margin: 0 0 18px;
  text-wrap: balance;
}
.cpa-lede {
  font-size: 19px;
  line-height: 1.65;
  color: var(--cpa-body);
  max-width: var(--cpa-measure);
  margin: 0 0 28px;
}
.cpa-prose h2 {
  font-family: var(--cpa-font);
  font-weight: 600;
  color: var(--cpa-heading);
  font-size: clamp(21px, 3vw, 26px);
  line-height: 1.3;
  letter-spacing: -.015em;
  margin: 0 0 14px;
  text-wrap: balance;
}
.cpa-prose h3 {
  font-family: var(--cpa-font);
  font-weight: 600;
  color: var(--cpa-heading);
  font-size: 18px;
  line-height: 1.4;
  margin: 0 0 8px;
}
/* The measure lives here, on the container, so paragraphs, lists, tables, cards
   and the figure all end on the same edge. Do NOT add max-width back onto the
   children. */
.cpa-prose { max-width: var(--cpa-measure); }
.cpa-prose p { margin: 0 0 16px; }
.cpa-prose > section { margin-block-end: 44px; scroll-margin-top: 84px; }
.cpa-prose a { color: var(--cpa-primary); text-underline-offset: 3px; }

/* ---------- the citable answer ----------
   This block is the passage an AI engine quotes. It has to stand alone with no
   surrounding context, so it is visually and structurally self-contained. */
.cpa-answer {
  background: var(--cpa-surface);
  border: 1px solid var(--cpa-line);
  border-inline-start: 4px solid var(--cpa-primary);
  border-radius: 4px var(--cpa-r-lg) var(--cpa-r-lg) 4px;
  padding: 24px 26px;
  box-shadow: var(--cpa-shadow);
  margin-block-end: 40px;
}
.cpa-answer p { font-size: 18.5px; line-height: 1.7; color: var(--cpa-heading); margin: 0; max-width: none; }
.cpa-answer__tag {
  display: inline-block;
  font-family: var(--cpa-font);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .09em;
  color: var(--cpa-primary);
  background: var(--cpa-primary-tint);
  padding: 3px 9px;
  border-radius: 5px;
  margin-block-end: 12px;
}

/* ---------- layout: article + sticky table of contents ---------- */
.cpa-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  padding-block: 32px 0;
}
@media (min-width: 980px) {
  .cpa-layout { grid-template-columns: minmax(0, 1fr) 236px; gap: 56px; align-items: start; }
}

.cpa-toc { font-family: var(--cpa-font); font-size: 14.5px; }
@media (min-width: 980px) { .cpa-toc { position: sticky; top: 84px; } }
.cpa-toc h2 {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .09em;
  color: var(--cpa-muted);
  margin: 0 0 12px;
}
.cpa-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.cpa-toc a {
  display: block;
  color: var(--cpa-body);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 7px;
  border-inline-start: 2px solid var(--cpa-line-soft);
}
.cpa-toc a:hover { color: var(--cpa-primary); background: var(--cpa-primary-tint); border-inline-start-color: var(--cpa-primary); }

/* ---------- lists ---------- */
.cpa-num {
  list-style: none;
  counter-reset: cpa;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cpa-num li { counter-increment: cpa; position: relative; padding-inline-start: 44px; }
.cpa-num li::before {
  content: counter(cpa);
  position: absolute;
  inset-inline-start: 0;
  top: 3px;
  width: 28px;
  height: 28px;
  border-radius: var(--cpa-r-sm);
  background: var(--cpa-primary-tint);
  color: var(--cpa-primary);
  font-family: var(--cpa-font);
  font-weight: 600;
  font-size: 14px;
  display: grid;
  place-items: center;
}
.cpa-num li b { color: var(--cpa-heading); font-weight: 600; }

.cpa-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cpa-bullets li { position: relative; padding-inline-start: 26px; }
.cpa-bullets li::before {
  content: "";
  position: absolute;
  inset-inline-start: 6px;
  top: 12px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cpa-primary);
}

/* ---------- checklist (the "signs" pattern) ---------- */
.cpa-checklist {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  border: 1px solid var(--cpa-line);
  border-radius: var(--cpa-r-md);
  overflow: hidden;
  background: var(--cpa-surface);
}
.cpa-checklist li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 15px 18px;
  border-block-end: 1px solid var(--cpa-line-soft);
}
.cpa-checklist li:last-child { border-block-end: 0; }
.cpa-checklist__box {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  border: 2px solid var(--cpa-primary);
  border-radius: 5px;
  margin-top: 5px;
}
.cpa-checklist li.is-key { background: var(--cpa-primary-tint); }
.cpa-checklist li.is-key .cpa-checklist__box {
  background: var(--cpa-primary);
  border-color: var(--cpa-primary);
  position: relative;
}
.cpa-checklist li.is-key .cpa-checklist__box::after {
  content: "";
  position: absolute;
  inset-inline-start: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ---------- two-column requirement cards ---------- */
.cpa-cards { display: grid; gap: 18px; margin-block-end: 20px; }
@media (min-width: 680px) { .cpa-cards { grid-template-columns: 1fr 1fr; } }
.cpa-card {
  background: var(--cpa-surface);
  border: 1px solid var(--cpa-line);
  border-radius: var(--cpa-r-md);
  padding: 20px 22px;
}
.cpa-card h3 { margin-block-end: 12px; }

/* ---------- callout ---------- */
.cpa-flag {
  background: var(--cpa-warn-bg);
  border: 1px solid var(--cpa-warn-line);
  border-radius: var(--cpa-r-md);
  padding: 18px 22px;
  margin-block-end: 8px;
}
.cpa-flag p { margin: 0; color: var(--cpa-heading); max-width: none; }
.cpa-flag strong { color: var(--cpa-warn); }

/* ---------- capability rows ---------- */
.cpa-rows { display: flex; flex-direction: column; gap: 2px; margin-block-end: 22px; }
.cpa-rows > div { background: var(--cpa-surface); border: 1px solid var(--cpa-line); padding: 18px 22px; }
.cpa-rows > div:first-child { border-start-start-radius: var(--cpa-r-md); border-start-end-radius: var(--cpa-r-md); }
.cpa-rows > div:last-child { border-end-start-radius: var(--cpa-r-md); border-end-end-radius: var(--cpa-r-md); }
.cpa-rows h3 { margin-block-end: 6px; }
.cpa-rows p { margin: 0; max-width: none; font-size: 16.5px; }

/* ---------- stat strip ---------- */
.cpa-stats {
  display: grid;
  gap: 1px;
  background: var(--cpa-line);
  border: 1px solid var(--cpa-line);
  border-radius: var(--cpa-r-md);
  overflow: hidden;
  margin-block-end: 22px;
}
@media (min-width: 600px) { .cpa-stats { grid-template-columns: repeat(3, 1fr); } }
.cpa-stats > div { background: var(--cpa-surface); padding: 20px 22px; }
.cpa-stats__n {
  display: block;
  font-family: var(--cpa-font);
  font-weight: 700;
  font-size: 28px;
  color: var(--cpa-primary);
  line-height: 1.1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.cpa-stats__l { display: block; font-size: 14.5px; color: var(--cpa-muted); margin-top: 6px; line-height: 1.5; }

/* ---------- figure / visual ---------- */
.cpa-figure {
  margin: 0 0 28px;
  background: var(--cpa-surface);
  border: 1px solid var(--cpa-line);
  border-radius: var(--cpa-r-lg);
  padding: 22px;
  box-shadow: var(--cpa-shadow);
}
/* direction:ltr is deliberate. Under dir="rtl" the browser flips SVG text-anchor,
   so "middle" keeps looking right while "start"/"end" quietly swap. Pinning the
   drawing to ltr makes anchors mean what they say; the Hebrew glyphs inside each
   <text> still shape right-to-left on their own. */
.cpa-figure svg { display: block; width: 100%; height: auto; max-width: 620px; margin-inline: auto; direction: ltr; }
.cpa-figure figcaption {
  margin-top: 14px;
  font-size: 14.5px;
  color: var(--cpa-muted);
  text-align: center;
  font-family: var(--cpa-font);
}

/* ---------- table ---------- */
.cpa-tablewrap {
  overflow-x: auto;
  border: 1px solid var(--cpa-line);
  border-radius: var(--cpa-r-md);
  margin-block-end: 22px;
  background: var(--cpa-surface);
}
.cpa-tablewrap table { border-collapse: collapse; width: 100%; min-width: 480px; font-size: 16px; }
.cpa-tablewrap th, .cpa-tablewrap td {
  padding: 13px 18px;
  text-align: start;
  border-block-end: 1px solid var(--cpa-line-soft);
  vertical-align: top;
}
.cpa-tablewrap thead th {
  font-family: var(--cpa-font);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--cpa-muted);
  background: var(--cpa-surface-2);
}
.cpa-tablewrap tbody tr:last-child td { border-block-end: 0; }
.cpa-tablewrap tbody td:first-child { color: var(--cpa-heading); font-weight: 500; }

/* ---------- FAQ ----------
   Native <details>/<summary>. The answer text is in the HTML whether the item is
   open or shut, so the FAQPage schema stays truthful and a crawler reading markup
   loses nothing; only the visual state changes. */
.cpa-faq {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--cpa-line);
  border-radius: var(--cpa-r-md);
  overflow: hidden;
  background: var(--cpa-surface);
}
.cpa-faq__item { border-block-end: 1px solid var(--cpa-line-soft); }
.cpa-faq__item:last-child { border-block-end: 0; }

.cpa-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px;
  cursor: pointer;
  font-family: var(--cpa-font);
  font-weight: 600;
  font-size: 17px;
  color: var(--cpa-heading);
  list-style: none;          /* Firefox */
  user-select: none;
}
.cpa-faq__q::-webkit-details-marker { display: none; }  /* Safari/Chrome */
.cpa-faq__q:hover { background: var(--cpa-surface-2); }
.cpa-faq__item[open] .cpa-faq__q { background: var(--cpa-primary-tint); }

.cpa-faq__chevron { flex: 0 0 auto; color: var(--cpa-primary); transition: transform .18s ease; }
.cpa-faq__item[open] .cpa-faq__chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .cpa-faq__chevron { transition: none; } }

.cpa-faq__a { padding: 2px 20px 18px; }
.cpa-faq__a p { margin: 0; font-size: 16.5px; }
/* The "read more" line under an answer on /faq. It is the route from a one-line
   answer into the page that covers the subject properly. */
.cpa-faq__a .cpa-faq__more { margin-top: 10px; font-size: 15px; }
.cpa-faq__more a { color: var(--cpa-primary); font-family: var(--cpa-font); font-weight: 500; text-underline-offset: 3px; }

.cpa-faq__q:focus-visible { outline: 3px solid var(--cpa-primary); outline-offset: -3px; }

/* ---------- internal links block ---------- */
.cpa-related { margin-block: 8px 0; }
.cpa-related__grid { display: grid; gap: 12px; }
@media (min-width: 680px) { .cpa-related__grid { grid-template-columns: 1fr 1fr; } }
.cpa-related__item {
  display: block;
  background: var(--cpa-surface);
  border: 1px solid var(--cpa-line);
  border-radius: var(--cpa-r-md);
  padding: 16px 18px;
  text-decoration: none;
  color: var(--cpa-heading);
  font-family: var(--cpa-font);
  font-weight: 500;
}
.cpa-related__item:hover { border-color: var(--cpa-primary); background: var(--cpa-primary-tint); }
.cpa-related__item span { display: block; font-family: var(--cpa-font-body); font-weight: 400; font-size: 14.5px; color: var(--cpa-muted); margin-top: 4px; }

/* ---------- knowledge hub ---------- */
.cpa-hub { padding-block: 32px 0; }
.cpa-hub__cluster { margin-block-end: 44px; scroll-margin-top: 84px; }
.cpa-hub__head { margin-block-end: 18px; }
.cpa-hub__head h2 {
  font-family: var(--cpa-font);
  font-weight: 600;
  color: var(--cpa-heading);
  font-size: clamp(21px, 3vw, 26px);
  line-height: 1.3;
  letter-spacing: -.015em;
  margin: 0 0 4px;
}
/* Same principle as .cpa-prose: every run of text on the page shares one width.
   The card grids below are free to be wider - they are structure, not prose, and
   a grid wider than its intro reads as intended. A paragraph narrower than
   another paragraph does not. */
.cpa-hub__head p { margin: 0; color: var(--cpa-muted); font-size: 16px; max-width: var(--cpa-measure); }

.cpa-hub__grid { display: grid; gap: 16px; }
@media (min-width: 680px) { .cpa-hub__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cpa-hub__grid { grid-template-columns: repeat(3, 1fr); } }

.cpa-hub__card {
  display: flex;
  flex-direction: column;
  background: var(--cpa-surface);
  border: 1px solid var(--cpa-line);
  border-radius: var(--cpa-r-md);
  padding: 22px 22px 18px;
  text-decoration: none;
  color: inherit;
}
.cpa-hub__card:hover { border-color: var(--cpa-primary); box-shadow: var(--cpa-shadow); }
.cpa-hub__card h3 {
  font-family: var(--cpa-font);
  font-weight: 600;
  font-size: 18px;
  color: var(--cpa-heading);
  margin: 0 0 8px;
  line-height: 1.35;
}
.cpa-hub__card p { margin: 0 0 16px; font-size: 15.5px; color: var(--cpa-body); flex: 1 1 auto; }
.cpa-hub__more {
  font-family: var(--cpa-font);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--cpa-primary);
}
.cpa-hub__card:hover .cpa-hub__more { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- CTA ----------
   Words on one side, actions on the other. The first version stacked a 130px
   button on top of a 441px sentence, which read as a zigzag, and a stray
   bottom margin on that sentence left 52px of dead space under the block. */
.cpa-cta {
  background: var(--cpa-ink-deep);
  border-radius: var(--cpa-r-lg);
  padding: 30px;
  margin-block: 8px 0;
  color: #EEEDF7;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
@media (min-width: 760px) {
  .cpa-cta { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; }
  .cpa-cta__text { flex: 1 1 auto; }
  .cpa-cta__actions { flex: 0 0 auto; }
}

.cpa-cta h2 {
  color: inherit;
  margin: 0 0 6px;
  font-family: var(--cpa-font);
  font-weight: 600;
  font-size: clamp(21px, 3vw, 26px);
  line-height: 1.3;
  text-wrap: balance;
}
/* margin-block-end:0 is load-bearing — the generic .cpa-cta p rule is what left
   the gap under the old block. */
.cpa-cta p { color: inherit; opacity: .82; margin: 0; max-width: 46ch; font-size: 16.5px; }
/* Specificity, not !important: .cpa-cta .cpa-cta__note (0,2,1) beats .cpa-cta p (0,1,1). */
.cpa-cta .cpa-cta__note { margin-top: 6px; font-size: 15px; opacity: .62; }

.cpa-cta__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
/* Always a stretched column, at every width. A row was tried for phones and the
   two controls did not fit side by side on a 375 screen, so they wrapped into two
   rows of different widths (130 and 147) and read as ragged. Stretching makes both
   the same width everywhere and gives the phone a full-width tap target. */
.cpa-cta__actions .cpa-btn { justify-content: center; white-space: nowrap; }

.cpa-cta__phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--cpa-font);
  font-size: 15px;
  font-weight: 500;
  color: #C9C6E4;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: var(--cpa-r-sm);
}
.cpa-cta__phone:hover { color: #fff; background: rgba(255, 255, 255, .08); }

/* ---------- footer ---------- */
.cpa-footer { background: var(--cpa-ink-deep); color: #C9C6E4; margin-top: 56px; }
.cpa-footer a { color: #C9C6E4; text-decoration: none; }
.cpa-footer a:hover { color: #fff; }
.cpa-footer__grid { display: grid; gap: 28px; padding-block: 44px 28px; }
@media (min-width: 760px) { .cpa-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.cpa-footer h2 { font-family: var(--cpa-font); font-size: 13px; font-weight: 600; letter-spacing: .06em; color: #fff; margin: 0 0 12px; }
.cpa-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.cpa-footer__brand p { font-size: 15px; margin: 12px 0 0; max-width: 40ch; }
.cpa-footer__base {
  border-block-start: 1px solid rgba(255,255,255,.12);
  padding-block: 18px 28px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 14px;
}
.cpa-footer__base p { margin: 0; }

a:focus-visible, .cpa-btn:focus-visible { outline: 3px solid var(--cpa-primary); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Legal disclaimer plus primary source, on the regulation pages only.
   Quieter than .cpa-flag on purpose: it qualifies the page, it does not
   warn about anything, so it must not outweigh the content above it. */
.cpa-legal {
  margin-block: 0 26px;
  padding: 18px 20px;
  background: var(--cpa-surface-2);
  border: 1px solid var(--cpa-line);
  border-radius: var(--cpa-r-md);
  font-size: 14px;
  color: var(--cpa-muted);
}
.cpa-legal__note { margin: 0; text-wrap: pretty; }
.cpa-legal__label {
  font-family: var(--cpa-font);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--cpa-heading);
  margin: 14px 0 6px;
}
.cpa-legal__sources { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cpa-legal__sources a { color: var(--cpa-primary); text-decoration: underline; text-underline-offset: 3px; }
.cpa-legal__sources a:hover { color: var(--cpa-primary-dark); }