/* The funnel ground, in one place.
 *
 * Every page in this funnel used to bring its own backdrop: a flat #fff on the reading pages,
 * var(--bg) on the checkouts, a pair of coral and blue aurora blobs on the guide. Moving between
 * them read as moving between different sites. This is the one the quiz and the result pages
 * already use, factored out so every other page sits on exactly the same ground.
 *
 * It needs no markup. The colour wash and the vignette ride on body::before and the perspective
 * grid on body::after, both fixed, both pointer-events:none, both at z-index -1 so they paint
 * behind everything in the page without any page needing a wrapper, a positioned ancestor or a
 * stacking context of its own.
 *
 * Selectors are html-qualified on purpose. A page's own `body{background:...}` is one point of
 * specificity; `html body` is two, so this wins wherever the link tag happens to sit in the head
 * and no page has to be re-ordered.
 *
 * The two pages that mount .hp-grid and .hp-vig as real elements (the quiz and /guide) render
 * exactly this and do not load this file. */

html body{
  background:
    radial-gradient(120% 90% at 72% 12%,#ffffff 0%,rgba(255,255,255,0) 46%),
    radial-gradient(130% 100% at 50% 118%,#cdddf5 0%,rgba(205,221,245,0) 55%),
    linear-gradient(160deg,#eff4fc,#d3e0f4);
  background-attachment:fixed;
}

/* The colour wash, plus the vignette that used to be its own fixed layer. */
html body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(46% 40% at 10% 6%,rgba(24,139,246,.13),transparent),
    radial-gradient(44% 40% at 92% 18%,rgba(109,94,252,.13),transparent),
    radial-gradient(52% 46% at 84% 97%,rgba(232,69,47,.08),transparent),
    radial-gradient(46% 42% at 10% 88%,rgba(23,160,106,.08),transparent);
  box-shadow:inset 0 0 220px rgba(13,24,48,.12),inset 0 -120px 160px rgba(13,24,48,.08);
}

/* The perspective grid, laid into the lower two thirds and faded out before it reaches the fold. */
html body::after{
  content:"";position:fixed;inset:32% -30% -10% -30%;z-index:-1;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,rgba(21,94,239,.09) 0 1px,transparent 1px 92px),
    repeating-linear-gradient(0deg,rgba(21,94,239,.09) 0 1px,transparent 1px 92px);
  transform:perspective(900px) rotateX(64deg);transform-origin:50% 0;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 82%);
  mask-image:linear-gradient(180deg,#000,transparent 82%);
}

/* Cards and panels that were drawn to sit on flat white need to stay opaque on a gradient,
 * otherwise the wash shows through and the type loses its ground. */
html body .card,html body .buy,html body .panel,html body .wrap>section{background-color:#fff}