/* Holographic palette (cyan core, lilac and magenta on a pale haze), loaded after style.css on every page.
   Remove the <link> from the pages to go back to the blue look. */
:root {
  --h-cyan: #46f0ff;
  --h-ice: #8fe0ff;
  --h-lilac: #c9a0ff;
  --h-magenta: #ff4fd8;
  --h-red: #ff4a1f;
  --h-yellow: #ffd400;
  --h-green: #5dff6a;
  --h-haze: #c6cdf5;
  --h-spectrum: conic-gradient(from 200deg, var(--h-cyan), var(--h-lilac), var(--h-magenta), var(--h-red), var(--h-yellow), var(--h-green), var(--h-ice), var(--h-cyan));
}

/* ---------- hero: a calm pale haze with soft cyan and lilac light, no rainbow ring ---------- */
.hero::before { background:
  radial-gradient(45% 40% at 22% 30%, rgba(143, 224, 255, .45), rgba(143, 224, 255, 0) 70%),
  radial-gradient(45% 40% at 80% 36%, rgba(201, 160, 255, .38), rgba(201, 160, 255, 0) 70%),
  radial-gradient(40% 30% at 50% 74%, rgba(255, 194, 241, .28), rgba(255, 194, 241, 0) 70%),
  linear-gradient(180deg, #f7f8ff 0%, #f1f2ff 50%, #e8e9fb 62%, #cfd0f1 70%, #a9a6dc 77%, #7a74bd 83%, #4a4589 88%, #252150 93%, #0d0c1d 97%, var(--bg) 100%);
  background-repeat: no-repeat; }

/* sub pages (help, news, forms, legal): the same pale haze in their header, running on into the dark page */
.page-hero::before { background:
  radial-gradient(40% 60% at 24% 30%, rgba(143, 224, 255, .45), rgba(143, 224, 255, 0) 70%),
  radial-gradient(40% 60% at 78% 34%, rgba(201, 160, 255, .38), rgba(201, 160, 255, 0) 70%),
  linear-gradient(180deg, #f7f8ff 0%, #eeeffe 34%, #cfd0f1 50%, #a9a6dc 60%, #7a74bd 70%, #4a4589 80%, #252150 89%, #0d0c1d 96%, var(--bg) 100%);
  background-repeat: no-repeat; }
.post-hero .news-tag { background: rgba(201, 160, 255, .25); }

h1 .chip::before { background: rgba(201, 160, 255, .18); }
.lead { color: #23244a; }

/* ---------- buttons: the brand ones from style.css, no rim (text and icon in the brand colour) ---------- */

/* ---------- smaller accents ---------- */
.item.on { background: linear-gradient(120deg, #c7f9ff, var(--h-ice) 35%, #dccbff 75%, #ffd0f3); }
.qa-flag { background: linear-gradient(110deg, #fff2a8, var(--h-yellow) 50%, #ffb27a); }
.chip { background: rgba(201, 160, 255, .14); }

/* ---------- install previews: the pale haze with cyan and lilac light ---------- */
.iscene { border: 0; background:
  radial-gradient(50% 70% at 28% 30%, rgba(143, 224, 255, .55), rgba(143, 224, 255, 0) 70%),
  radial-gradient(50% 70% at 76% 70%, rgba(201, 160, 255, .5), rgba(201, 160, 255, 0) 70%),
  linear-gradient(160deg, #f7f8ff, #e6e9ff 55%, #d9d6f6); }

/* ---------- closing section: the same bloom, rising from the bottom ---------- */
.outro::before { background:
  radial-gradient(48% 60% at 50% 64%, rgba(70, 240, 255, .5), rgba(70, 240, 255, 0) 70%),
  radial-gradient(70% 84% at 50% 68%, rgba(201, 160, 255, 0) 48%, rgba(201, 160, 255, .5) 62%, rgba(255, 79, 216, .3) 72%, rgba(255, 79, 216, 0) 86%),
  linear-gradient(0deg, #f6f7ff 0%, #e6e9ff 30%, var(--h-haze) 56%, #8f86d8 76%, #2b1f5c 91%, #0b0a1a 98%, var(--bg) 100%);
  background-repeat: no-repeat;
  /* the lilac ring is taller than the section on narrow screens; fade it in from the top instead of cutting it off */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 35%); mask-image: linear-gradient(180deg, transparent, #000 35%); }
.foot { --seam-to: #f6f7ff; }