/* ============================================================
   landing-hero3.css, OPTION 8: the closing call's three lights, in the hero.

   OPTION 8 IS OPTION 7. Same page, same chapters, same product backgrounds,
   same everything, gated on the family the two of them share. The only thing
   this file changes is the ground the first fold stands on, so the two can be
   put side by side and the hero judged on its own.

   WHERE THE TREATMENT COMES FROM. Not invented here: `.l7-cta`, the closing
   call at the foot of the page, is the one place that puts all three module
   colours in one frame, as three lights rising from below the type. Orange/50
   at 17%, Cyan/50 at 15%, Purple/50 at 20%, on #141519. This is those three
   colours at those three strengths, rearranged.

   REARRANGED, BECAUSE THE FOLD IS DIFFERENT. In the closing call the three sit
   under the type and rise; a hero is a whole screen with the copy in the middle
   of it, so the same three are laid out ACROSS instead: orange at the left
   shoulder, cyan at the right, purple wide and low between them. They overlap
   generously, so what you read is one horizontal field with three temperatures
   in it rather than three findable blobs.

   THEY GO ON .lp-bg, NOT ON THE SECTION, and that is the whole reason the grain
   comes for free. .lp-bg carries the investigation module's own --bgfall and
   --bg, and .lp-bg::after lays --grain over it at .23. Adding these three to
   that element's background-image puts them UNDER the grain, so the noise is
   integrated into the gradients exactly as it is in the product, rather than
   sitting on top of them as a separate film.

   AND THEY SIT LOW. The heading and subhead occupy the middle of the fold; the
   lights are centred at 58% to 68% of the viewport, under the copy and behind
   the CTAs, so the fold gains a horizon rather than a wash across the type. The
   readability numbers are in the note at the foot of this file.
   ============================================================ */

/* option 9 is option 8 with the sections re-typeset and option 1 is option 8
   with the Data Intelligence band redrawn, so both keep the lights */
html[data-lp-option="1"] .lp-bg,
html[data-lp-option="8"] .lp-bg,
html[data-lp-option="9"] .lp-bg{
  background-image:
    /* left shoulder, warm: Investigation's own brand step */
    radial-gradient(ellipse 52% 46% at 4% 60%,
      color-mix(in srgb, var(--orange-50) 17%, transparent) 0%, transparent 70%),
    /* right shoulder, cool: Build Dashboard's */
    radial-gradient(ellipse 50% 44% at 96% 60%,
      color-mix(in srgb, var(--cyan-50) 15%, transparent) 0%, transparent 70%),
    /* and Data Intelligence wide and low between them, which is what joins the
       two shoulders into one horizontal field instead of two corners */
    radial-gradient(ellipse 66% 40% at 50% 74%,
      color-mix(in srgb, var(--purple-50) 20%, transparent) 0%, transparent 72%),
    /* the module's own background, underneath all three, unchanged */
    var(--bg)}

/* NOTHING ELSE IS TOUCHED. An earlier pass also deepened .lp-hero--2::before,
   the shield that keeps the canvas from reading through the copy, on the
   reasoning that it had more to hold back. Measured, it did not: the copy sits
   at 15:1 or better either way, and a deeper well made Option 8's hero quieter
   overall rather than only differently lit, which is the one thing a
   side-by-side comparison must not do. It is gone, so the two options differ
   by the three lights and by nothing else.
   ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
   MEASURED, on the rendered page at 1600x1000:

   The ground was measured with the copy hidden and the canvas stopped, so
   these are the gradients themselves and not the type over them.

                          OPTION 7            OPTION 8
     behind the heading   rgb(39,35,37) 15.5   rgb(34,31,34) 16.3
     behind the subhead   rgb(34,32,36) 16.2   rgb(35,31,41) 16.2
     behind the CTA row   rgb(33,32,37) 16.2   rgb(41,34,51) 15.3
     brightest in fold    rgb(125,85,61) 6.5   rgb(108,74,55) 7.9

   WCAG AAA for body text is 7:1. Every place the copy actually sits is above
   15:1 in both options, so the three lights cost nothing in legibility. The
   only number that moves is the CTA row, 16.2 to 15.3, where the purple passes
   under it. That is the figure to watch if the strengths are ever pushed: they
   would have to roughly double before the CTA row reached 7:1.
   ------------------------------------------------------------------ */

/* ---- THE LOCKUP, ONE STEP UP ------------------------------------------
   Ameer, 26 Aug: on Option 8's top fold, "make the spark dot AI little more
   bigger, below ten percentage bigger". 38px to 41px is 7.9%, which is inside
   what was asked for and is the largest step that still lets the mark sit on
   the header's own 34px control row without crowding it.

   Scoped to Option 8 alone, because that is where it was asked for. Option 9
   shares this file's hero ground but not this, and Option 7 keeps the 38px it
   was signed off with. */
html[data-lp-option="1"] .lp-logo img,
html[data-lp-option="8"] .lp-logo img{height:41px}