/* ============================================================
   About page — CSP-compliance overrides
   ------------------------------------------------------------
   These rules replace inline ``style="..."`` attributes that
   previously lived in templates/about.html. The project's CSP
   ``style-src-attr`` policy is nonce-only ('unsafe-hashes' + an
   empty hash allowlist), so every visual rule must live in a
   class — not in a style attribute.
   ============================================================ */

/* Floating hero icons — each card uses its own gradient. */
.about-float-icon--blue-purple {
  background: linear-gradient(135deg, var(--kais-blue), var(--kais-purple));
}
.about-float-icon--green {
  background: linear-gradient(135deg, var(--kais-green), #5dffb0);
}
.about-float-icon--orange {
  background: linear-gradient(135deg, var(--kais-orange), #FFB74D);
}
.about-float-icon--purple {
  background: linear-gradient(135deg, var(--kais-purple), #c5a3ff);
}

/* Mission / Vision icon backdrops — translucent gradients. */
.about-mv-icon-wrap--mission {
  background: linear-gradient(135deg, rgba(155, 109, 255, .2), rgba(106, 168, 255, .2));
}
.about-mv-icon-wrap--vision {
  background: linear-gradient(135deg, rgba(47, 211, 122, .2), rgba(93, 255, 176, .2));
}

/* Step badge color variants — replaces per-iteration cycle inline style. */
.about-step-number--blue   { background: var(--kais-blue); }
.about-step-number--purple { background: var(--kais-purple); }
.about-step-number--green  { background: var(--kais-green); }

/* Centered subtitle helper — replaces inline style="text-align:center". */
.about-subtitle-center { text-align: center; }