/* Approved palette, 3 November 2026. Shared by all active preview pages.
   Pink marks reflections and selected outlines; green/red remain status colours.
   Glass remains untinted. Interaction states are neutral gray. */
:root {
  --brand-parchment: #f5f3f0;
  --brand-carbon: #171715;
  --brand-burgundy: #240b10;
  --brand-burgundy-rgb: 36 11 16;
  --brand-pink: #eb5160;
  --brand-silver: #bfb9b0;
  --brand-blush: #f7eeee;
  --surface-selected: #ebe9e6;
  --outcome-highlight-edge: color-mix(in srgb, var(--brand-pink) 55%, var(--brand-parchment));
  --paper: var(--brand-parchment);
  --ink: var(--brand-carbon);
  --body: var(--brand-carbon);
  --muted: #69645e;
  --line: color-mix(in srgb, var(--brand-silver) 68%, var(--brand-parchment));
  --accent: var(--brand-burgundy);
  --dark: var(--brand-burgundy);
  --accent-hover: color-mix(in srgb, var(--brand-burgundy) 84%, var(--brand-carbon));
  --hero-reflection-pink: var(--brand-pink);
  --hero-reflection-silver: var(--brand-silver);
}

::selection { background: var(--surface-selected); color: var(--brand-burgundy); }
body :focus-visible { outline-color: var(--brand-burgundy); }

body[class] :is(.button-dark, .header-cta) {
  background: #171715;
  border-color: #171715;
  color: var(--brand-parchment);
  --cta-base: var(--brand-parchment);
  --cta-reflection: var(--brand-pink);
}
.site-header .brand, .site-header .brand .represent-wordmark { color: var(--brand-carbon); }
.site-header .header-cta .cta-label { animation-play-state: running; }
.closing { background: var(--brand-burgundy); }
body[class] .closing .button {
  background: var(--brand-parchment);
  border-color: var(--brand-parchment);
  color: var(--brand-carbon);
  --cta-base: var(--brand-carbon);
  --cta-reflection: var(--brand-pink);
}

/* Neutral interaction states: menus, tabs, controls and trust details. */
.site-header.navigation-ready .nav-link:hover,
.site-header.navigation-ready .nav-link[aria-current],
.system-menu.navigation-menu .menu-destinations > a:hover,
body[class] :is(.validation-preview .text-link, .about-services-link,
  .about-text-link, .commercial-text-link):hover,
body[class] :is(.sd-navigation button, .cj-nav-button):not(:disabled):hover,
#compact-journey-root :is(.cj-tab[aria-selected="true"], .cj-replay:hover, .cj-reset:hover),
.service-package .sd-tab[aria-selected="true"],
#for-you .audience-tabs button:hover,
#for-you .audience-tabs button[aria-selected="true"] {
  background: var(--surface-selected);
  color: var(--brand-burgundy);
}
.site-header.navigation-ready .nav-link,
.site-header.navigation-ready .nav-link:hover,
.site-header.navigation-ready .nav-link[aria-current] {
  color: var(--brand-carbon);
}
/* Retain the subtle blush hover on the secondary hero CTA. */
body[class] .hero-actions > .text-link:hover {
  background: var(--brand-blush);
  color: var(--brand-burgundy);
}
#security .trust-card:focus-within,
#security .trust-card:has(details[open]) { background-color: var(--surface-selected); }
@media (hover: hover) {
  #security .trust-card.is-clickable:hover { background-color: var(--surface-selected); }
}

/* Parchment selected tab contrasts with its gray switcher. */
.home-refresh .ba-tabs button[aria-selected="true"] {
  background: var(--paper);
  color: var(--brand-burgundy);
  box-shadow: 0 1px 4px rgb(23 23 21 / .08);
}

/* Audience tables keep a neutral glass frame and restrained solution column. */
#for-you .audience-table-frame {
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / .72);
  border-radius: var(--ui-corner, 6px);
  background: rgb(255 255 255 / .38);
  backdrop-filter: blur(24px);
}
#for-you .audience-panel th:first-child { padding-left: 24px; }
#for-you .audience-panel tbody tr:last-child > * { border-bottom: 0; }
#for-you .audience-tabs,
body .service-package .sd-tabs { border-radius: 0; }
#for-you .audience-tabs { border-bottom: 0; }
#for-you .audience-panel td :is(strong, em, svg, a) { color: var(--ink); }
#for-you .audience-tabs button:is(:hover, [aria-selected="true"]) {
  border-color: rgb(var(--brand-burgundy-rgb) / .1);
}
@media (max-width: 680px) {
  #for-you .audience-panel th:first-child { padding-left: 12px; }
}
#for-you .audience-panel td,
#for-you .audience-panel thead th:last-child {
  background: rgb(191 185 176 / .12);
  color: var(--ink);
  border-bottom-color: var(--line);
}

/* No pink fills in Services deliverables. */
.service-package .sd-position-fallback { background: var(--surface-selected); }

/* All four result outputs have white surfaces and complete pink perimeters. */
#transformation :is(.oa-auto-answer, .oa-context-decision, .oa-evidence-sheet, .oa-consistent) {
  background: rgb(255 255 255 / .6);
  border-color: var(--outcome-highlight-edge);
  color: var(--brand-carbon);
}
#transformation .oa-context-answer {
  background: transparent;
  border-top-color: var(--line);
}
#transformation :is(.oa-auto-answer, .oa-consistent) .oa-label,
#transformation .oa-consistent strong { color: var(--brand-burgundy); }
#transformation .oa-drifting,
#transformation .oa-drifting > .oa-label,
#transformation .oa-drifting > div { color: var(--body); }
body.home-refresh #transformation .outcome-before { color: var(--muted); }
@keyframes oa-rule-arrival {
  0%,55%,100% { opacity: .72; }
  20%,35% { opacity: 1; }
}

/* Accurate answers share the carbon used by the primary actions.
   Error categories retain their distinct colours in the detailed view. */
.validation-chart {
  --accent: var(--brand-carbon);
}
body[class] .validation-chart :is(.result-repeat, .result-correct) {
  background: var(--brand-carbon);
}
body[class] .result-average-remainder,
body[class] .validation-disclosure:not(.is-expanded) .validation-lead-bars .result-review {
  background: color-mix(in srgb, var(--brand-silver) 38%, var(--brand-parchment));
}
body[class] .validation-expand:hover { color: var(--brand-burgundy); }

/* Pink remains a passing reflection in the hero, never a slide status colour. */
.home-refresh .ba-reflective-label {
  background-image: linear-gradient(108deg, var(--brand-burgundy) 36%,
    var(--brand-pink) 48%, var(--brand-pink) 50%, var(--brand-burgundy) 62%);
  animation: represent-reflection-continuous 3s linear infinite;
}
@keyframes represent-reflection-continuous {
  from { background-position: 100% 0; }
  to { background-position: 0% 0; }
}

.services-code-rain .services-code-rain-snippet > code,
.about-code-field .about-code-row {
  background-image: linear-gradient(108deg,
    rgb(191 185 176 / .08) 0%,
    rgb(191 185 176 / .08) 33%,
    rgb(235 81 96 / .30) 41%,
    rgb(235 81 96 / .66) 46%,
    rgb(235 81 96 / .96) 49%,
    rgb(255 255 255 / .96) 51%,
    rgb(235 81 96 / .58) 55%,
    rgb(191 185 176 / .08) 64%,
    rgb(191 185 176 / .08) 100%);
}
.pricing-cross-rest { fill: var(--hero-reflection-silver); }
.pricing-ripple use:nth-child(-n+2) { stroke: var(--hero-reflection-silver); }
.pricing-ripple use:nth-child(3),
.pricing-ripple use:nth-child(4),
.pricing-ripple use:nth-child(5),
.pricing-ripple use:nth-child(6) { stroke: var(--hero-reflection-pink); }

@media (prefers-reduced-motion: reduce) {
  .home-refresh .ba-reflective-label { animation: none; background: none; }
}

/* Restrained colour roles: carbon actions, neutral hover, parchment light text. */
body[class] .announcement.announcement-marquee {background:var(--brand-carbon);color:var(--brand-parchment);}
body[class] .announcement-copy {background:none;color:var(--brand-parchment);animation:none;}
body[class] :is(.button-dark,.header-cta):hover {
  background:var(--surface-selected);border-color:var(--brand-carbon);color:var(--brand-carbon);
  --cta-base:var(--brand-carbon);--cta-reflection:var(--brand-carbon);
}
body[class] .closing .button:hover {
  background:var(--surface-selected);border-color:var(--brand-parchment);color:var(--brand-carbon);
  --cta-base:var(--brand-carbon);--cta-reflection:var(--brand-carbon);
}
body.home-refresh #for-you .audience-panel thead th:last-child {color:var(--brand-pink);}
body.home-refresh #comparison .approach-table .represent-column {
  background:var(--brand-carbon);color:var(--brand-parchment);border-inline-color:var(--brand-carbon);
}
body.home-refresh #comparison .approach-table .represent-column :is(strong,span,svg) {
  color:var(--brand-parchment);
}
body[class] #compact-journey-root .cj-tabs {background:linear-gradient(var(--line),var(--line)) left bottom / 100% 1px no-repeat;}
body[class] .repeatability-overlay {
  background:repeating-linear-gradient(135deg,transparent 0 6px,var(--brand-parchment) 6px 7px);
}
body[class] .validation-legend .result-repeatable {
  background:repeating-linear-gradient(135deg,transparent 0 4px,var(--brand-parchment) 4px 5px),var(--brand-carbon);
}

/* One warm white for all reversed brand text, with quieter secondary copy. */
body[class] .closing,
body[class] .closing h2,
body[class] .site-footer :is(a, .footer-brand),
body[class] .site-footer .footer-identity :is(.footer-brand, .footer-compliance, .founder-credential) {
  color:var(--brand-parchment);
}
body[class] .closing-copy > p:not(.closing-call-label),
body[class] .site-footer .footer-identity p,
body[class] .site-footer address,
body[class] .founder-credential .credential-description {
  color:color-mix(in srgb,var(--brand-parchment) 82%,transparent);
}
body[class] .closing-copy .closing-call-label,
body[class] .site-footer :is(.footer-label, .footer-bottom) {
  color:color-mix(in srgb,var(--brand-parchment) 68%,transparent);
}
body[class] :is(.small-button.dark, .cj-button-primary, .cj-pdf-badge, .cj-represent-avatar),
body[class] .hero-slack-file > span,
body[class] .scene.rq-intake .rq-send {
  color:var(--brand-parchment);
}