/* ---- Knowa warm palette pass (review branch) ----
   Loaded after each page's inline <style>, so on equal specificity these
   rules win. Retunes the brand aliases in knowa.css towards a warmer,
   custodial palette to match the "For the People Behind the Decision"
   messaging: aubergine dark grounds, warm paper light grounds, ember for
   decorative emphasis. Plum stays for anything interactive.
   If adopted, fold the token values into css/knowa.css :root and move the
   per-selector rules into each page's own styles, then delete this file. */

:root {
  --background: #FBF7F1;
  --card: #FFFDFA;
  --foreground: #1F1A22;
  --secondary: #F2EAE0;
  --border: #E8DFD4;
  --muted-foreground: rgba(31, 26, 34, 0.5);
  --sidebar: #2A1B2E;
  --nav-dark: #2A1B2E;
  --ink-soft: #4B4450;
  --ink-mute: #7A7280;
  --grey-50: #F6F0E8;
  --grey-100: #EFE7DC;
  --line-soft: rgba(31, 26, 34, 0.06);
  /* purple-soft is only ever used as emphasis on dark grounds: retune to ember */
  --purple-soft: #E9B872;
  --ember: #C4782A;
  --ember-text: #9A5A18;
  --ember-light: #E9B872;
  /* pastels warm-shifted, hue kept so status colours (green ok, red overdue) still read */
  --pastel-mint: #DDE8DA;
  --pastel-pink: #EFD9CF;
  --pastel-peach: #F1E3C9;
  --pastel-cream: #F1E3C9;
  --pastel-lilac: #E6DBEF;
  --pastel-blue: #DDE3EA;
  --accent-mint: #3E7A52;
  --accent-peach: #B8702A;
  --accent-pink: #B5452E;
}

body { background: var(--background); color: var(--foreground); }

/* Dark grounds: aubergine with a faint amber glow instead of neon violet */
.hero { background: radial-gradient(ellipse at top, #3A2740 0%, #2A1B2E 70%); }
.hero::before { background: radial-gradient(ellipse, rgba(233,184,114,0.16) 0%, transparent 60%); }
.hero-orb-1 { background: radial-gradient(circle, rgba(233,184,114,0.26) 0%, rgba(233,184,114,0.08) 40%, transparent 70%); }
.hero-orb-2 { background: radial-gradient(circle, rgba(201,166,230,0.22) 0%, rgba(201,166,230,0.08) 45%, transparent 72%); }
.hero-orb-3 { background: radial-gradient(circle, rgba(122,56,181,0.22) 0%, transparent 72%); }
.hero-title span { color: var(--ember-light); }
/* Keep the brand headline on its two intended lines, including small screens. */
h1.hero-title--people { white-space: nowrap; }
@media (max-width: 640px) {
  h1.hero-title--people { font-size: clamp(26px, 7vw, 44px); }
}
.horizons::before { background: radial-gradient(ellipse, rgba(233,184,114,0.10) 0%, transparent 60%); }
.horizons-track::before { background: linear-gradient(90deg, #E9B872 0%, rgba(233,184,114,0.4) 50%, rgba(233,184,114,0.2) 100%); }
.horizon-card.live { border-color: rgba(233,184,114,0.35); }
.horizon-name { min-height: 0; }
.final-cta::before { background: radial-gradient(circle, rgba(233,184,114,0.14) 0%, transparent 60%); }
.dt-card { --dt-soft: #E9B872; }
.dt-card::before { background: radial-gradient(ellipse at center, rgba(233,184,114,0.14) 0%, transparent 60%); }
.dt-overline, .dt-frag-tag, .dt-d-tag, .dt-r-label { color: rgba(233,184,114,0.85); }
.dt-thread { stroke: rgba(233,184,114,0.45); }
.dt-decision { background: rgba(233,184,114,0.08); border-color: rgba(233,184,114,0.4); }

/* Emphasis: ember instead of plum, so plum only ever means "interactive" */
h2 span, .test-head h2 span, .tt-title span, .reviews-title span, .awards-title span, .horizon-teaser h3 span { color: var(--ember); }
.evidenced-inner h3 span, .final-cta h2 span, .product-band-dark h2 span, .horizons h2 span, .stats-head h2 span,
.nextgen-band h2 span, .transformation .section-head h2 span { color: var(--ember-light); }
.section-eyebrow, .reviews-eyebrow { color: var(--ember-text); }
.horizons .section-eyebrow, .stats-band .section-eyebrow, .product-band-dark .section-eyebrow, .horizon-label { color: var(--ember-light); }
.ch-big, .stat-big { color: var(--ember-light); }
.test-stars, .rev-stars-icons, .reviews-awards-icon { color: var(--ember); }
.horizon-teaser .badge { background: rgba(196,120,42,0.10); color: var(--ember-text); border-color: rgba(196,120,42,0.30); }
/* Pages outside the audience set: security, news articles, privacy/cookies, advisers extras, team */
.sec-intro h2 span { color: var(--ember); }
.sec-pillar-num, .sec-trusted-label, .article-pullquote-label, .toc-title, .partner-group-label,
.partners-head .section-eyebrow, .tt-label, .profile-title { color: var(--ember-text); }
.step-num { background: #F1E3C9; color: #9A5A18; }

/* Light grounds: paper instead of blue-white */
.trusted, .verticals, .security, .testimonials, .faq, .personas-section, .collab, .apps-band, .pricing, .partners { background: var(--background); }
.trusted { border-bottom-color: var(--border); }
.horizon-teaser { background: var(--secondary); }
.persona, .app-card, .tier, .sec-chip, .faq-item, .hero-mock, .rev-card, .award-card, .tt-card,
.trans-card, .outcome-card, .step-card, .partner-card { background: var(--card); }
.test-card { background: var(--secondary); border-color: var(--border); }
.reviews { background: var(--secondary); border-color: var(--border); }
.pain-sol-visual { background: linear-gradient(135deg, #F3E9DC 0%, #FFFDFA 100%); }
.fragment-scene { background: linear-gradient(135deg, #FFFDFA 0%, #F3E9DC 100%); }
.frag { box-shadow: 0 4px 12px rgba(42,27,46,0.08); }
.vert-icon { background: rgba(255,253,250,0.7); }
footer .footer-col a:hover { color: var(--ember-light); }

/* Persona icons: three warm tints instead of six pastels */
.persona-icon.i1, .persona-icon.i4 { background: #E6DBEF; color: #7A38B5; }
.persona-icon.i2, .persona-icon.i5 { background: #F1E3C9; color: #9A5A18; }
.persona-icon.i3, .persona-icon.i6 { background: #EFD9CF; color: #B5452E; }
.personas-grid.personas-6 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { .personas-grid.personas-6 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .personas-grid.personas-6 { grid-template-columns: 1fr; } }

/* New blocks: role strip under the sector cards, judgement line */
.role-strip { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 56px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.role { padding: 28px 24px; border-left: 1px solid var(--border); }
.role:first-child { border-left: none; }
.role-name { font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 17px; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 8px; color: var(--ink); }
.role-line { font-size: 14.5px; color: var(--ink-soft); line-height: 1.5; }
@media (max-width: 900px) { .role-strip { grid-template-columns: 1fr 1fr; } .role:nth-child(3) { border-left: none; } .role:nth-child(n+3) { border-top: 1px solid var(--border); } }
@media (max-width: 640px) { .role-strip { grid-template-columns: 1fr; } .role { border-left: none; border-top: 1px solid var(--border); } .role:first-child { border-top: none; } }
.judgement { background: var(--secondary); padding: 96px 0; text-align: center; }
.judgement p { font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: clamp(28px, 3.4vw, 44px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; max-width: 22ch; margin: 0 auto; color: var(--ink); }
.judgement p span { color: var(--ember); }