/* ══════════════════════════════════════════════════════════════════════
   JobTayo — the shared page ground
   One file, linked by every published page, so the background is defined
   once rather than drifting between the home page, the guides and the
   legal pages. Everything here is decorative and sits behind content:
   the layer is fixed and pointer-events:none, and pseudo-elements are
   never announced by a screen reader.

   Three parts:
     html::before  — the hairline track along the very top
     body::after   — the gradient that fills that track as you scroll
     body::before  — the ground itself: grid, then the three glows

   Tokens carry fallback values so a page that does not load the full
   palette still renders correctly.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --bgfx-ground:#F7F8F9;
  --bgfx-grid:rgba(21,34,55,.038);
  --bgfx-cell:64px;
  --bgfx-track:#E5E7EB;
  --bgfx-grad:linear-gradient(120deg,#3B82F6 0%,#00B6B3 55%,#22C55E 100%);
}

/* ── the ground ──────────────────────────────────────────────────────
   Fixed rather than scrolled: the glows stay put while the page moves,
   so every screenful sits on the same wash instead of scrolling past a
   one-off image. z-index -1 keeps it behind content without needing a
   stacking context on every section. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    /* blue, top left */
    radial-gradient(46% 42% at 6% 4%,rgba(59,130,246,.30),transparent 68%),
    /* teal, centre right */
    radial-gradient(34% 30% at 78% 50%,rgba(0,182,179,.20),transparent 70%),
    /* green, bottom right */
    radial-gradient(40% 34% at 76% 92%,rgba(34,197,94,.30),transparent 70%),
    /* the grid, beneath the glows so they wash over it */
    linear-gradient(90deg,var(--bgfx-grid) 1px,transparent 1px),
    linear-gradient(180deg,var(--bgfx-grid) 1px,transparent 1px),
    var(--bgfx-ground);
  background-size:
    100% 100%,
    100% 100%,
    100% 100%,
    var(--bgfx-cell) var(--bgfx-cell),
    var(--bgfx-cell) var(--bgfx-cell),
    100% 100%;
}

/* ── the top rule ────────────────────────────────────────────────────
   The track is always there; the gradient fills it in proportion to how
   far down the page you are. Driven by scroll(), not JS, so it works on
   all 28 pages from this one file — no shared script to load and no
   per-page markup. Where scroll-driven animation is unsupported the fill
   stays at scaleX(0) and only the hairline track shows, which is the
   right quiet fallback rather than a broken element. */
html::before{
  content:"";
  position:fixed;
  top:0;left:0;right:0;
  height:3px;
  z-index:200;
  pointer-events:none;
  background:var(--bgfx-track);
}
body::after{
  content:"";
  position:fixed;
  top:0;left:0;
  width:100%;
  height:3px;
  z-index:201;
  pointer-events:none;
  transform-origin:0 50%;
  transform:scaleX(0);
  background:var(--bgfx-grad);
  animation:jt-scroll-fill linear both;
  animation-timeline:scroll(root block);
}
@keyframes jt-scroll-fill{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}

/* Print has no scroll position and no use for a wash. */
@media print{
  body::before,body::after,html::before{display:none}
}