/* ========================================================================== 
   Manager Realm Themes — CLEAN COLOR-ONLY OVERRIDES

   IMPORTANT:
   - manager-page.css is the ONLY layout/responsive source of truth.
   - Futuristic + Retro use the exact same geometry as the Light Manager page.
   - No theme background images.
   - No theme-specific widths, heights, spacing, padding, positioning, radius,
     grid/flex changes, or responsive layout duplicates live in this file.
   - This file changes colors, backgrounds, text, borders/shadows and icon tones.
   ========================================================================== */

/* Shared dark-theme variables ------------------------------------------------ */
body.manager-futuristic,
body.manager-retro {
  --manager-text: #ffffff;
  --manager-text-muted: rgba(255, 255, 255, 0.78);
  --manager-heading: #ffffff;
}

body.manager-futuristic {
  --manager-page-bg: #040512;
  --manager-section-bg: #040512;
  --manager-panel-bg: #17092e;
  --manager-panel-soft: #1f054b;
  --manager-panel-strong: #0c031c;
  --manager-accent: #9d4cff;
  --manager-accent-soft: #c3acf2;
  --manager-line: rgba(195, 172, 242, 0.28);
}

body.manager-retro {
  --manager-page-bg: #1b1c48;
  --manager-section-bg: #1b1c48;
  --manager-panel-bg: #20204f;
  --manager-panel-soft: #2f1856;
  --manager-panel-strong: #161739;
  --manager-accent: #7139d1;
  --manager-accent-soft: #c3acf2;
  --manager-line: rgba(155, 127, 247, 0.30);
}

body.manager-retro .mtp-speed {
  background:
    radial-gradient(circle at 0% 48%, rgba(94, 45, 160, .34), transparent 34%),
    radial-gradient(circle at 76% 58%, rgba(76, 83, 180, .13), transparent 32%),
    linear-gradient(180deg, #1b1c48 0%, #202052 54%, #1b1c48 100%) !important;
}

/* Page canvas ---------------------------------------------------------------- */
body.manager-futuristic .manager-page,
body.manager-retro .manager-page,
body.manager-futuristic .manager-problem,
body.manager-retro .manager-problem,
body.manager-futuristic .manager-momentum,
body.manager-retro .manager-momentum,
body.manager-futuristic .manager-solution,
body.manager-retro .manager-solution,
body.manager-futuristic .manager-platform,
body.manager-retro .manager-platform,
body.manager-futuristic .manager-shift,
body.manager-retro .manager-shift,
body.manager-futuristic .manager-compare,
body.manager-retro .manager-compare {
  background: var(--manager-section-bg);
  color: var(--manager-text);
}

/* Hero -----------------------------------------------------------------------
   Exact Light-page structure. Only the outer canvas + stage colors change.
   The existing Light cloud images, dashboard, knight, stag and gem remain.
   -------------------------------------------------------------------------- */
body.manager-futuristic .manager-hero {
  background: #040512;
}

body.manager-retro .manager-hero {
  background: #1b1c48;
}

body.manager-futuristic .manager-hero::before,
body.manager-retro .manager-hero::before {
  content: none;
}

body.manager-futuristic .manager-hero__eyebrow {
  background: rgba(113, 57, 209, 0.20);
  color: #ffffff;
}

body.manager-retro .manager-hero__eyebrow {
  background: #2f1856;
  color: #ffffff;
}

body.manager-futuristic .manager-hero h1,
body.manager-retro .manager-hero h1 {
  color: #ffffff;
  text-shadow: none;
}

body.manager-futuristic .manager-hero h1 strong {
  color: #9d4cff;
}

body.manager-retro .manager-hero h1 strong {
  color: #9b7ff7;
}

body.manager-futuristic .manager-hero__stage {
  background:
    radial-gradient(circle at 84% 18%, rgba(142, 47, 202, 0.48) 0%, rgba(93, 31, 145, 0.30) 21%, rgba(23, 9, 46, 0) 48%),
    radial-gradient(circle at 13% 55%, rgba(104, 35, 174, 0.36) 0%, rgba(81, 27, 134, 0.24) 24%, rgba(23, 9, 46, 0) 52%),
    radial-gradient(ellipse at 52% 100%, rgba(120, 44, 202, 0.38) 0%, rgba(79, 27, 138, 0.22) 28%, rgba(23, 9, 46, 0) 64%),
    #120824;
  box-shadow: 0 34px 70px rgba(0, 0, 0, 0.24);
}

body.manager-retro .manager-hero__stage {
  background:
    radial-gradient(circle at 84% 18%, rgba(113, 57, 209, 0.36) 0%, rgba(73, 47, 151, 0.24) 22%, rgba(27, 28, 72, 0) 48%),
    radial-gradient(circle at 13% 55%, rgba(91, 72, 191, 0.30) 0%, rgba(62, 50, 142, 0.18) 25%, rgba(27, 28, 72, 0) 52%),
    radial-gradient(ellipse at 52% 100%, rgba(113, 57, 209, 0.34) 0%, rgba(65, 49, 149, 0.20) 30%, rgba(27, 28, 72, 0) 64%),
    #161739;
  box-shadow: 0 34px 70px rgba(7, 5, 42, 0.24);
}

body.manager-futuristic .manager-hero__cloud,
body.manager-retro .manager-hero__cloud {
  filter: none;
}

body.manager-futuristic .manager-hero__cta {
  background: linear-gradient(95deg, #7139d1 0%, #9d4cff 56%, #ef32ef 100%);
}

body.manager-retro .manager-hero__cta {
  background: linear-gradient(95deg, #5b2eb1 0%, #7139d1 58%, #9b7ff7 100%);
}

/* Problem -------------------------------------------------------------------- */
body.manager-futuristic .manager-problem__eyebrow,
body.manager-retro .manager-problem__eyebrow,
body.manager-futuristic .manager-problem__intro,
body.manager-retro .manager-problem__intro,
body.manager-futuristic .manager-problem__item p,
body.manager-retro .manager-problem__item p,
body.manager-futuristic .manager-problem__item strong,
body.manager-retro .manager-problem__item strong {
  color: #ffffff;
}

body.manager-futuristic .manager-problem h2,
body.manager-futuristic .manager-solution h2,
body.manager-futuristic .manager-platform__heading h2,
body.manager-futuristic .manager-shift__heading h2,
body.manager-futuristic .manager-compare__heading h2 {
  color: #9d4cff;
}

body.manager-retro .manager-problem h2,
body.manager-retro .manager-solution h2,
body.manager-retro .manager-platform__heading h2,
body.manager-retro .manager-shift__heading h2,
body.manager-retro .manager-compare__heading h2 {
  color: #9b7ff7;
}

body.manager-futuristic .manager-problem__line::before {
  background: rgba(157, 76, 255, 0.66);
}

body.manager-retro .manager-problem__line::before {
  background: rgba(155, 127, 247, 0.70);
}

body.manager-futuristic .manager-problem__line span,
body.manager-retro .manager-problem__line span {
  background: var(--manager-accent-soft);
}

body.manager-futuristic .manager-problem__icon {
  background: #1f054b;
}

body.manager-retro .manager-problem__icon {
  background: #2f1856;
}

/* Momentum -------------------------------------------------------------------
   Exact same Light card layout/image placement. Only palette changes.
   -------------------------------------------------------------------------- */
body.manager-futuristic .manager-momentum__card {
  background:
    radial-gradient(circle at 20% 50%, rgba(112, 40, 130, 0.36), rgba(23, 9, 46, 0) 34%),
    radial-gradient(circle at 62% 14%, rgba(113, 57, 209, 0.22), rgba(23, 9, 46, 0) 32%),
    #120824;
}

body.manager-retro .manager-momentum__card {
  background:
    radial-gradient(circle at 20% 50%, rgba(113, 57, 209, 0.28), rgba(27, 28, 72, 0) 35%),
    radial-gradient(circle at 62% 14%, rgba(155, 127, 247, 0.16), rgba(27, 28, 72, 0) 34%),
    #161739;
}

body.manager-futuristic .manager-momentum__copy,
body.manager-retro .manager-momentum__copy {
  color: #ffffff;
}

body.manager-futuristic .manager-momentum__copy span {
  color: #c3acf2;
}

body.manager-retro .manager-momentum__copy span {
  color: #c3acf2;
}

/* Solution ------------------------------------------------------------------- */
body.manager-futuristic .manager-solution__eyebrow,
body.manager-retro .manager-solution__eyebrow,
body.manager-futuristic .manager-solution__step h3,
body.manager-retro .manager-solution__step h3,
body.manager-futuristic .manager-solution__step p,
body.manager-retro .manager-solution__step p {
  color: #ffffff;
}

body.manager-futuristic .manager-solution__number {
  color: rgba(157, 76, 255, 0.14);
}

body.manager-retro .manager-solution__number {
  color: rgba(195, 172, 242, 0.15);
}

body.manager-futuristic .manager-solution__step--visual {
  background: #15102f;
  border-color: rgba(195, 172, 242, 0.22);
}

body.manager-retro .manager-solution__step--visual {
  background: #23245c;
  border-color: rgba(155, 127, 247, 0.28);
}

/* Platform ------------------------------------------------------------------- */
body.manager-futuristic .manager-platform__heading > p,
body.manager-retro .manager-platform__heading > p,
body.manager-futuristic .manager-platform__item p,
body.manager-retro .manager-platform__item p {
  color: #ffffff;
}

body.manager-futuristic .manager-platform__panel {
  background:
    radial-gradient(circle at 88% 48%, rgba(113, 57, 209, 0.30), rgba(25, 8, 41, 0) 38%),
    radial-gradient(circle at 18% 28%, rgba(96, 42, 137, 0.30), rgba(25, 8, 41, 0) 34%),
    linear-gradient(110deg, #211044 0%, #0c031c 52%, #35113d 100%);
}

body.manager-retro .manager-platform__panel {
  background:
    radial-gradient(circle at 88% 48%, rgba(113, 57, 209, 0.24), rgba(27, 28, 72, 0) 38%),
    radial-gradient(circle at 18% 28%, rgba(155, 127, 247, 0.17), rgba(27, 28, 72, 0) 34%),
    linear-gradient(110deg, #2f1856 0%, #20204f 52%, #2f1856 100%);
}

body.manager-futuristic .manager-platform__item h3,
body.manager-futuristic .manager-platform__item h3 span {
  color: #c3acf2;
}

body.manager-retro .manager-platform__item h3,
body.manager-retro .manager-platform__item h3 span {
  color: #c3acf2;
}

/* Shift ---------------------------------------------------------------------- */
body.manager-futuristic .manager-shift__heading > p,
body.manager-retro .manager-shift__heading > p,
body.manager-futuristic .manager-shift__without h3,
body.manager-retro .manager-shift__without h3,
body.manager-futuristic .manager-shift__without li span,
body.manager-retro .manager-shift__without li span {
  color: rgba(255, 255, 255, 0.72);
}

body.manager-futuristic .manager-shift__with {
  background: linear-gradient(105deg, #15102f 0%, #100925 52%, #0c031c 100%);
}

body.manager-retro .manager-shift__with {
  background: linear-gradient(105deg, #23245c 0%, #20204f 52%, #2f1856 100%);
}

body.manager-futuristic .manager-shift__with h3,
body.manager-futuristic .manager-shift__with li span,
body.manager-retro .manager-shift__with h3,
body.manager-retro .manager-shift__with li span {
  color: #ffffff;
}

/* Compare -------------------------------------------------------------------- */
body.manager-futuristic .manager-compare__heading > p,
body.manager-retro .manager-compare__heading > p {
  color: #ffffff;
}

/* Keep original image assets untouched. Theme only changes icon tone. */
body.manager-futuristic .manager-platform__item img {
  filter: brightness(0) saturate(100%) invert(65%) sepia(43%) saturate(1747%) hue-rotate(215deg) brightness(95%) contrast(98%);
}

body.manager-retro .manager-platform__item img {
  filter: brightness(0) saturate(100%) invert(73%) sepia(25%) saturate(1009%) hue-rotate(210deg) brightness(99%) contrast(95%);
}

/* Header color only; global header sizing/layout remains untouched. */
body.manager-futuristic .navbar,
body.manager-retro .navbar {
  background: #050033;
}
/* Keep every Retro Payoff card on the same purple gradient. */
body.manager-retro .mtp-speed-card,
body.manager-retro .mtp-speed-card.is-active,
body.manager-retro .mtp-speed-card:hover {
  background: linear-gradient(135deg, #3f2d7c 0%, #251754 45%, #160c37 100%) !important;
}

/* Executive Game Layer uses the same shared game-progression template, with
   the Executive palette carried through each Realm. */
body.manager-futuristic .executives-game-layer {
  --executives-game-layer-tint: rgba(12, 8, 34, .62);
}

body.manager-retro .executives-game-layer {
  --executives-game-layer-tint: rgba(35, 16, 68, .6);
}

body.manager-futuristic .executives-game-layer .manager-solution__heading h2,
body.manager-retro .executives-game-layer .manager-solution__heading h2 {
  color: #fff;
}

/* Executives uses the shared Team Lead hero plus executive-only sections.
   Apply the Realm canvas to the whole page while preserving its cloud/dashboard art. */
body.manager-futuristic,
body.manager-futuristic #wrapper,
body.manager-futuristic .site-main,
body.manager-futuristic .executives-page,
body.manager-retro,
body.manager-retro #wrapper,
body.manager-retro .site-main,
body.manager-retro .executives-page {
  color: #fff;
}

body.manager-futuristic,
body.manager-futuristic #wrapper,
body.manager-futuristic .site-main,
body.manager-futuristic .executives-page {
  background-color: #040512;
}

body.manager-retro,
body.manager-retro #wrapper,
body.manager-retro .site-main,
body.manager-retro .executives-page {
  background-color: #1b1c48;
}

body.manager-futuristic .executives-hero,
body.manager-futuristic .executives-problem,
body.manager-futuristic .executives-numbers,
body.manager-futuristic .executives-view,
body.manager-futuristic .executives-comparison {
  background-color: #040512;
  color: #fff;
}

body.manager-retro .executives-hero,
body.manager-retro .executives-problem,
body.manager-retro .executives-numbers,
body.manager-retro .executives-view,
body.manager-retro .executives-comparison {
  background-color: #1b1c48;
  color: #fff;
}

body.manager-futuristic .executives-hero {
  background-image: radial-gradient(ellipse at 50% 95%, rgba(113, 57, 209, .2), transparent 66%);
}

body.manager-retro .executives-hero {
  background-image: radial-gradient(ellipse at 50% 95%, rgba(113, 57, 209, .24), transparent 66%);
}

body.manager-futuristic .executives-hero::after,
body.manager-retro .executives-hero::after {
  background: linear-gradient(180deg, transparent 0%, transparent 72%, #040512 100%);
  height: 72px;
}

body.manager-retro .executives-hero::after {
  background: linear-gradient(180deg, transparent 0%, transparent 72%, #1b1c48 100%);
}

body.manager-futuristic .executives-hero__cloud,
body.manager-retro .executives-hero__cloud {
  filter: brightness(.55) saturate(1.12) contrast(1.08);
  mix-blend-mode: screen;
  opacity: var(--executives-cloud-opacity, .7);
}

/* Let the shared clouds extend behind the lower hero artwork on use-case pages. */
body.manager-page-template .use-case-page:is(.use-case-page--team-culture, .use-case-page--gamified-productivity, .use-case-page--project-task-management, .use-case-page--team-collaboration) .executives-hero {
  overflow: visible;
}

body.manager-futuristic .use-case-page:is(.use-case-page--team-culture, .use-case-page--gamified-productivity, .use-case-page--project-task-management, .use-case-page--team-collaboration) .executives-hero {
  background-image: linear-gradient(180deg, transparent 76%, #040512 100%), radial-gradient(ellipse at 50% 95%, rgba(113, 57, 209, .2), transparent 66%);
}

body.manager-retro .use-case-page:is(.use-case-page--team-culture, .use-case-page--gamified-productivity, .use-case-page--project-task-management, .use-case-page--team-collaboration) .executives-hero {
  background-image: linear-gradient(180deg, transparent 76%, #1b1c48 100%), radial-gradient(ellipse at 50% 95%, rgba(113, 57, 209, .24), transparent 66%);
}

body.manager-page-template .use-case-page:is(.use-case-page--team-culture, .use-case-page--gamified-productivity, .use-case-page--project-task-management, .use-case-page--team-collaboration) .executives-hero::after {
  content: none;
  display: none;
}

body.manager-page-template .use-case-page:is(.use-case-page--team-culture, .use-case-page--gamified-productivity, .use-case-page--project-task-management, .use-case-page--team-collaboration) {
  --executives-cloud-opacity: .58;
  --executives-left-cloud-left: clamp(-460px, -27vw, -320px);
  --executives-left-cloud-top: 80px;
  --executives-left-cloud-width: clamp(600px, 44vw, 740px);
  --executives-right-cloud-right: 0px;
  --executives-right-cloud-top: 750px;
  --executives-right-cloud-width: clamp(520px, 55vw, 900px);
}

@media (max-width: 767px) {
  body.manager-page-template .use-case-page:is(.use-case-page--team-culture, .use-case-page--gamified-productivity, .use-case-page--project-task-management, .use-case-page--team-collaboration) {
    --executives-left-cloud-left: -220px;
    --executives-left-cloud-top: 190px;
    --executives-left-cloud-width: 560px;
    --executives-right-cloud-right: 0px;
    --executives-right-cloud-top: 620px;
    --executives-right-cloud-width: 520px;
  }
}

body.manager-futuristic .executives-hero .team-lead-hero__eyebrow,
body.manager-retro .executives-hero .team-lead-hero__eyebrow {
  background: rgba(35, 16, 68, .88);
  border-color: rgba(195, 172, 242, .34);
  color: #fff;
}

body.manager-futuristic .executives-hero h1,
body.manager-futuristic .executives-hero .team-lead-hero__intro,
body.manager-futuristic .executives-hero .team-lead-hero__note,
body.manager-retro .executives-hero h1,
body.manager-retro .executives-hero .team-lead-hero__intro,
body.manager-retro .executives-hero .team-lead-hero__note {
  color: #fff;
}

body.manager-futuristic .executives-hero h1 .team-lead-hero__title-accent {
  color: #b88aff;
}

body.manager-retro .executives-hero h1 .team-lead-hero__title-accent {
  color: #a995ff;
}

body.manager-futuristic .executives-hero__visual {
  filter: drop-shadow(0 18px 48px rgba(134, 65, 255, .26));
}

body.manager-retro .executives-hero__visual {
  filter: drop-shadow(0 18px 48px rgba(113, 57, 209, .28));
}

body.manager-futuristic .executives-problem .solution-problem-list__quote,
body.manager-futuristic .executives-problem .solution-problem-list__copy,
body.manager-retro .executives-problem .solution-problem-list__quote,
body.manager-retro .executives-problem .solution-problem-list__copy {
  color: rgba(255, 255, 255, .9);
}

body.manager-futuristic .executives-problem .solution-problem-list__item,
body.manager-retro .executives-problem .solution-problem-list__item {
  border-bottom-color: rgba(195, 172, 242, .2);
}

body.manager-futuristic .executives-problem .solution-problem-list__number,
body.manager-futuristic .executives-problem .solution-problem-list__item h3 {
  color: #c3acf2;
}

body.manager-retro .executives-problem .solution-problem-list__number,
body.manager-retro .executives-problem .solution-problem-list__item h3 {
  color: #c3acf2;
}

body.manager-futuristic .executives-view .solution-section-eyebrow,
body.manager-retro .executives-view .solution-section-eyebrow {
  color: rgba(255, 255, 255, .78);
}

body.manager-futuristic .executives-view .solution-section-title {
  color: #b88aff;
}

body.manager-retro .executives-view .solution-section-title {
  color: #a995ff;
}

body.manager-futuristic .executives-view .solution-benefits__card,
body.manager-retro .executives-view .solution-benefits__card {
  background: linear-gradient(145deg, #211044, #120824);
  border: 1px solid rgba(195, 172, 242, .24);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .06);
}

body.manager-futuristic .executives-view .solution-benefits__card h3,
body.manager-futuristic .executives-view .solution-benefits__card p,
body.manager-retro .executives-view .solution-benefits__card h3,
body.manager-retro .executives-view .solution-benefits__card p {
  color: rgba(255, 255, 255, .92);
}

body.manager-futuristic .executives-comparison .solution-section-eyebrow,
body.manager-retro .executives-comparison .solution-section-eyebrow {
  color: rgba(255, 255, 255, .78);
}

body.manager-futuristic .executives-comparison .solution-section-title {
  color: #b88aff;
}

body.manager-retro .executives-comparison .solution-section-title {
  color: #a995ff;
}

body.manager-futuristic .executives-comparison__image {
  border-radius: 16px;
  box-shadow: 0 18px 52px rgba(0, 0, 0, .28), 0 0 28px rgba(157, 76, 255, .14);
}

body.manager-retro .executives-comparison__image {
  border-radius: 16px;
  box-shadow: 0 18px 52px rgba(0, 0, 0, .28), 0 0 28px rgba(113, 57, 209, .18);
}