.bg-promo {
    position: fixed;
    inset: 0;
    z-index: 99000;
    pointer-events: none;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.bg-promo[hidden] { display: none; }

/* The slide-in unit: mascot + cloud move together as one piece.
   Duration scales with screen width so wider screens feel as slow as smaller ones. */
.bg-promo__row {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-150vw, -50%);
    transition: transform 4s cubic-bezier(0.25, 0.1, 0.25, 1);
    will-change: transform;
    display: flex;
    align-items: center;
}
@media (min-width: 720px)  { .bg-promo__row { transition-duration: 5s; } }
@media (min-width: 1200px) { .bg-promo__row { transition-duration: 6s; } }
@media (min-width: 1600px) { .bg-promo__row { transition-duration: 7s; } }
.bg-promo--enter .bg-promo__row { transform: translate(-50%, -50%); }
/* Exit = he walks OFF to the right at the same pace he walked IN.
   - Keep the base .bg-promo__row duration (4/5/6/7s per width) so the walk lasts as long as the entry.
   - Travel only ~110vw (just past the right edge) instead of 150vw, so the whole duration is a VISIBLE
     walk rather than most of it happening off-screen.
   - ease-in mirrors the entry's ease-out: he starts walking again gently from rest, then strides off. */
.bg-promo--exit  .bg-promo__row {
    transform: translate(110vw, -50%);
    transition-timing-function: cubic-bezier(0.42, 0, 1, 1);
}

/* Mascot - front layer, walking */
.bg-promo__stage {
    position: relative;
    width: 240px;
    height: 380px;
    z-index: 2;
    flex-shrink: 0;
    margin-right: -50px;
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.18));
}
.bg-promo__mascot {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
    transition: opacity 0.15s linear;
}
/* Walk animation (animated webp) shows while he moves; the static idle frame covers it when he stops at center. */
.bg-promo__mascot--idle { opacity: 0; }
.bg-promo__stage.is-idle .bg-promo__mascot--walk { opacity: 0; }
.bg-promo__stage.is-idle .bg-promo__mascot--idle { opacity: 1; }

/* Cloud - back layer, single SVG silhouette with continuous gradient stroke */
.bg-promo__cloud {
    position: relative;
    width: 340px;
    height: 220px;
    z-index: 1;
    pointer-events: auto;
    filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.22));
    flex-shrink: 0;
}
.bg-promo__cloud-shape {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.bg-promo__title {
    position: absolute;
    /* Keep all text inside the cloud silhouette: generous inner padding on
       every side so wrapped lines never touch or cross the gradient outline. */
    inset: 60px 40px 46px 40px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: clamp(24px, 3.4vw, 34px);
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -0.5px;
    text-align: center;
    padding: 0;
    background: linear-gradient(135deg,
        var(--beadguy-purple, #6A0DAD) 0%,
        var(--beadguy-green, #00A651) 55%,
        #b8860b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--beadguy-purple, #6A0DAD);
    pointer-events: none;
}

/* product ad inside the cloud (random, or the current product on a product page) */
.bg-promo__title:has(.bg-promo__ad) { background: none; -webkit-text-fill-color: initial; }
.bg-promo__ad {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    width: 100%;
    max-width: 100%;
    text-decoration: none;
    line-height: 1.1;
    pointer-events: auto;
}
.bg-promo__ad-kicker {
    font-size: clamp(9px, 1.1vw, 12px);
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--beadguy-purple, #6A0DAD);
    -webkit-text-fill-color: currentColor;
}
.bg-promo__ad-name {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 100%;
    /* wrap long words so a single long token can't punch past the cloud edge */
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
    font-size: clamp(13px, 1.6vw, 18px);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -0.2px;
    color: var(--beadguy-purple, #6A0DAD);
    -webkit-text-fill-color: currentColor;
}
/* Longer product names step the name font down so they stay inside the cloud. */
.bg-promo__ad.is-long   .bg-promo__ad-name { font-size: clamp(12px, 1.35vw, 15px); }
.bg-promo__ad.is-xlong  .bg-promo__ad-name { font-size: clamp(11px, 1.2vw, 13px); line-height: 1.05; }
.bg-promo__ad.is-long   .bg-promo__ad-kicker,
.bg-promo__ad.is-xlong  .bg-promo__ad-kicker { font-size: clamp(8px, 0.95vw, 10px); }
.bg-promo__ad-cta {
    margin-top: 3px;
    font-size: clamp(10px, 1.2vw, 13px);
    font-weight: 800;
    color: var(--beadguy-green, #00A651);
    -webkit-text-fill-color: currentColor;
}
.bg-promo__ad.is-xlong .bg-promo__ad-cta { margin-top: 2px; font-size: clamp(9px, 1.05vw, 11px); }
.bg-promo__ad:hover .bg-promo__ad-cta { color: var(--beadguy-purple, #6A0DAD); }

.bg-promo__close {
    position: absolute;
    top: 30%;
    left: 50%;
    right: auto;
    margin: -15px 0 0 -15px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--beadguy-purple, #6A0DAD);
    border: 2.5px solid #fff;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s ease, background 0.15s ease;
    padding: 0;
    z-index: 5;
}
.bg-promo__close:hover  { background: var(--beadguy-green, #00A651); transform: scale(1.08); }
.bg-promo__close:active { transform: scale(0.94); }

@media (max-width: 720px) {
    .bg-promo__stage  { width: 170px; height: 280px; margin-right: -36px; }
    .bg-promo__cloud  { width: 250px; height: 165px; }
    /* scale the text inset to the smaller cloud so wrapping stays inside */
    .bg-promo__title  { inset: 54px 30px 26px 30px; font-size: clamp(20px, 4vw, 26px); }
    .bg-promo__ad-name        { font-size: clamp(13px, 3.4vw, 16px); }
    .bg-promo__ad.is-long  .bg-promo__ad-name { font-size: clamp(11px, 3vw, 14px); }
    .bg-promo__ad.is-xlong .bg-promo__ad-name { font-size: clamp(10px, 2.6vw, 12px); }
}

@media (max-width: 480px) {
    .bg-promo__stage  { width: 130px; height: 220px; margin-right: -28px; }
    .bg-promo__cloud  { width: 200px; height: 130px; }
    .bg-promo__title  { inset: 46px 24px 20px 24px; }
    .bg-promo__ad-kicker { font-size: 9px; }
    .bg-promo__ad-name        { font-size: clamp(11px, 3.2vw, 13px); }
    .bg-promo__ad.is-long  .bg-promo__ad-name { font-size: clamp(10px, 2.8vw, 12px); }
    .bg-promo__ad.is-xlong .bg-promo__ad-name { font-size: clamp(9px, 2.4vw, 11px); }
    .bg-promo__ad-cta { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .bg-promo__row { transition: none !important; }
    .bg-promo--enter .bg-promo__row { transform: translate(-50%, -50%); }
}

/* MASCOT FLIP 2026-07-07 (Tony): face direction of travel = walk in, not moonwalk */
.bg-promo__mascot{transform:scaleX(-1)}

/* ─────────────────────────────────────────────────────────────────────────────
   QUOTE-REQUEST CLOUD (Tony 2026-07-29)
   Three lines instead of the old one-line product ad:
       Thank you for your request.
       Your quote will be sent shortly.
       Are you looking for <Category> or <Category>?
   The old ad was one short phrase; three lines plus two links need the whole
   inner area, so the inset is tightened and the type scales down.
   ───────────────────────────────────────────────────────────────────────────── */
.bg-promo__title.has-links {
    /* the gradient text-clip is for the single big phrase; real links need real colours */
    background: none;
    -webkit-text-fill-color: initial;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    /* the cloud itself stays pointer-events:none so it never blocks the page; the TEXT
       layer takes pointer events back, otherwise the category links are unclickable */
    pointer-events: auto;
    inset: 46px 34px 38px 34px;
    flex-direction: column;
    gap: 3px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.25;
    text-align: center;
}
.bg-promo__title.has-links .bg-promo__l1 {
    font-size: clamp(13px, 1.45vw, 16px);
    font-weight: 800;
    color: var(--beadguy-purple, #6A0DAD);
}
.bg-promo__title.has-links .bg-promo__l2 {
    font-size: clamp(12px, 1.3vw, 14px);
    font-weight: 600;
    color: #333;
}
.bg-promo__title.has-links .bg-promo__l3 {
    font-size: clamp(12px, 1.3vw, 14px);
    font-weight: 700;
    color: #222;
    margin-top: 3px;
}

/* Category link + its open-in-new-window icon. The icon sits INSIDE the anchor so the
   word and the icon are one target - Tony asked for "click/tab the word or icon". */
.bg-promo__cat {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    color: var(--beadguy-green, #00A651);
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1.5px;
}
.bg-promo__cat:hover,
.bg-promo__cat:focus-visible { color: var(--beadguy-purple, #6A0DAD); }
/* Visible keyboard focus: these open a NEW WINDOW, so a tabbing user must be able to see
   which one they are about to trigger. */
.bg-promo__cat:focus-visible {
    outline: 2px solid var(--beadguy-purple, #6A0DAD);
    outline-offset: 2px;
    border-radius: 3px;
}
.bg-promo__ext { flex: 0 0 auto; margin-bottom: 1px; }

/* Long category names ("Custom Health Awareness Mardi Gras Beads") must wrap rather than
   push out through the cloud outline. */
.bg-promo__title.has-links .bg-promo__l3 { white-space: normal; }
.bg-promo__cat-name { white-space: normal; }

@media (max-width: 560px) {
    .bg-promo__title.has-links { inset: 40px 26px 32px 26px; gap: 2px; }
    .bg-promo__title.has-links .bg-promo__l1 { font-size: 12px; }
    .bg-promo__title.has-links .bg-promo__l2,
    .bg-promo__title.has-links .bg-promo__l3 { font-size: 11px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   TALLER, STRETCHED CLOUD (Tony 2026-07-29)
   "can we make the cloud taller or more stretched to keep in the white space?"

   The three-line quote message wraps to about FIVE visual lines once a long
   category name is in it ("Custom Health Awareness Mardi Gras Beads"), and that
   is taller than the 220px cloud's white interior. The result on the live page
   was line 1 sitting ABOVE the white on the page background, and the last line
   crossing the rainbow outline.

   Fix is the shape, not the type: shrinking the text to fit would have made a
   customer-facing message smaller and harder to read to protect a decoration.
   The SVG now carries preserveAspectRatio="none", so the cloud fills whatever
   box it is given and these numbers actually take effect.
   ───────────────────────────────────────────────────────────────────────────── */
.bg-promo__cloud { width: 430px; height: 320px; }

/* The white puffs sit roughly between 25% and 86% of the silhouette's height, so
   the text has to live inside that band or it lands on the outline. These insets
   are that band, minus a little breathing room. */
.bg-promo__title.has-links {
    inset: 78px 62px 64px 62px;
    gap: 4px;
}
.bg-promo__title.has-links .bg-promo__l1 { font-size: clamp(14px, 1.5vw, 17px); }
.bg-promo__title.has-links .bg-promo__l2,
.bg-promo__title.has-links .bg-promo__l3 { font-size: clamp(13px, 1.35vw, 15px); }

/* He should not shove the cloud off a phone screen. Scale the whole unit down
   instead of letting the cloud overflow the viewport. */
@media (max-width: 900px) {
    .bg-promo__cloud { width: 340px; height: 260px; }
    .bg-promo__title.has-links { inset: 62px 46px 52px 46px; }
    .bg-promo__stage { width: 190px; height: 300px; margin-right: -38px; }
}
@media (max-width: 560px) {
    .bg-promo__cloud { width: 270px; height: 225px; }
    .bg-promo__title.has-links { inset: 52px 32px 44px 32px; gap: 2px; }
    .bg-promo__title.has-links .bg-promo__l1 { font-size: 12px; }
    .bg-promo__title.has-links .bg-promo__l2,
    .bg-promo__title.has-links .bg-promo__l3 { font-size: 11px; }
    .bg-promo__stage { width: 140px; height: 225px; margin-right: -28px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   TEXT INSETS AS PERCENTAGES, NOT PIXELS.

   The pixel insets above were tuned on desktop and looked right, and a scripted
   check reported "text overflow 0". Both were wrong on a phone: the first two
   lines rendered OUTSIDE the white cloud, over the page background.

   The check measured the text against its own CONTAINER box, which is a
   rectangle. The thing that matters is whether the text is inside the WHITE
   SILHOUETTE, which is a scalloped cloud. A box can be entirely "not
   overflowing" and still sit off the white. That is the same shape of mistake as
   measuring an image before the encoder ran: correct number, wrong subject.

   Percentages track the shape at every size, so one rule holds from 320px to
   desktop. Inside the viewBox the safe rectangle is roughly y 60-185 of 220 and
   x 55-300 of 340, i.e. 27%-84% vertical and 16%-88% horizontal. These sit just
   inside that.
   ───────────────────────────────────────────────────────────────────────────── */
.bg-promo__title.has-links,
.bg-promo__title.has-links,
.bg-promo__title { }

.bg-promo__title.has-links {
    inset: 29% 15% 18% 15% !important;
    overflow: hidden;
}

/* Give the message room on small screens instead of squeezing six wrapped lines
   into a short cloud - a long category name like "Custom Overseas Mardi Gras
   Beads" wraps to two lines on its own. */
@media (max-width: 900px) {
    .bg-promo__cloud { width: 360px; height: 300px; }
}
@media (max-width: 560px) {
    .bg-promo__cloud { width: 290px; height: 280px; }
    .bg-promo__title.has-links .bg-promo__l1 { font-size: 12px; }
    .bg-promo__title.has-links .bg-promo__l2,
    .bg-promo__title.has-links .bg-promo__l3 { font-size: 11px; }
    .bg-promo__stage { width: 120px; height: 240px; margin-right: -24px; }
}

/* TALLER AGAIN (Tony 2026-07-29: "the cloud need to go taller").
   320px still put line 1 against the top curve and the last link against the bottom one.
   The message is five wrapped lines with two long category names, so the shape has to grow
   rather than the type shrink - shrinking customer-facing copy to protect a decoration is
   the wrong trade. Insets stay proportional so this scales without re-tuning. */
.bg-promo__cloud { width: 500px; height: 430px; }
.bg-promo__stage { width: 300px; height: 470px; margin-right: -62px; }

@media (max-width: 1100px) {
    .bg-promo__cloud { width: 420px; height: 370px; }
    .bg-promo__stage { width: 250px; height: 400px; margin-right: -52px; }
}
@media (max-width: 900px) {
    .bg-promo__cloud { width: 360px; height: 330px; }
    .bg-promo__stage { width: 190px; height: 340px; margin-right: -40px; }
}
@media (max-width: 560px) {
    .bg-promo__cloud { width: 292px; height: 300px; }
    .bg-promo__stage { width: 118px; height: 280px; margin-right: -24px; }
}

/* The category link flows as TEXT, not as an inline-flex box.
   As inline-flex the anchor was an atomic inline box, so the "?" that follows it became
   separate content with a break opportunity in front of it - and on a long two-line
   category name the question mark wrapped onto a line of its own. Plain inline lets the
   words and the punctuation wrap together the way a sentence should. */
.bg-promo__cat { display: inline; }
.bg-promo__ext {
    display: inline-block;
    vertical-align: -2px;
    margin-left: 3px;
}

/* ═════════════════════════════════════════════════════════════════════════════
   2026-09-08 (Tony): ONE BEAD GUY, ONE THANK-YOU, AND HE ARRIVES ON SUBMISSION.
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── 1. THE DOUBLED BEAD GUY ──────────────────────────────────────────────────
   "the video of the beadguy looks doubled".
   MEASURED over four open/X cycles: #beadguy-promo stayed at 1 node and
   .bg-promo__mascot at 2 (walk + idle, cross-faded, only one ever opaque). Nothing
   leaks and nothing is duplicated in the DOM. What Tony is seeing is the BIG walking
   mascot on stage while the SMALL mascot head in the theme-song widget is still in
   its corner - two Bead Guys on screen at the same time.
   So the corner one steps aside for as long as he is on stage. visibility rather
   than display:none so it fades instead of popping, and it comes straight back when
   he leaves. The player keeps playing; only its face is hidden. */
body.bg-promo-active #beadguy-player {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .35s ease, visibility 0s linear .35s;
}
#beadguy-player {
    transition: opacity .35s ease, visibility 0s linear 0s;
}

/* ── 2. HE WALKS IN BELOW THE FORM, NOT ACROSS IT ─────────────────────────────
   "maybe show him below the box or something, lets get creative".
   On a submission he now walks in along the BOTTOM of the viewport instead of
   through the middle, so he can never land on top of the form's own confirmation
   panel. Same walk, same duration, same exit - only the lane changes. */
.bg-promo--submitted .bg-promo__row {
    top: auto;
    bottom: 2vh;
    transform: translate(-150vw, 0);
    align-items: flex-end;
}
.bg-promo--submitted.bg-promo--enter .bg-promo__row { transform: translate(-50%, 0); }
.bg-promo--submitted.bg-promo--exit  .bg-promo__row { transform: translate(110vw, 0); }

/* He is a celebration, not a wall: on the submission lane he is a little smaller so
   the form's own receipt stays the thing you read first. */
.bg-promo--submitted .bg-promo__stage { width: 210px; height: 330px; }
@media (max-width: 720px) {
    .bg-promo--submitted .bg-promo__stage { width: 130px; height: 220px; }
    .bg-promo--submitted .bg-promo__row   { bottom: 1vh; }
}

/* ── 3. ONE LINE IN THE CLOUD ─────────────────────────────────────────────────
   The cloud used to carry three lines, two of which repeated a thank-you the form
   had already given. It now carries only the cross-sell question, so it gets the
   full inner area and can be read at a glance. */
.bg-promo__title.has-links.is-single-line {
    justify-content: center;
    text-align: center;
}
.bg-promo__title.has-links.is-single-line .bg-promo__l3 {
    font-size: clamp(14px, 1.6vw, 18px);
    line-height: 1.35;
    white-space: normal;
}
@media (max-width: 720px) {
    .bg-promo__title.has-links.is-single-line .bg-promo__l3 { font-size: 12px; }
}

/* ── 4. REDUCED MOTION ────────────────────────────────────────────────────────
   A customer who has asked for no animation still gets the whole message: he is
   simply already standing there. The cloud, the question and both links are fully
   readable and clickable with every transition switched off. The form's own
   confirmation is untouched by any of this and never depends on the animation. */
@media (prefers-reduced-motion: reduce) {
    .bg-promo--submitted .bg-promo__row { transition: none !important; }
    .bg-promo--submitted.bg-promo--enter .bg-promo__row { transform: translate(-50%, 0); }
    body.bg-promo-active #beadguy-player,
    #beadguy-player { transition: none !important; }
}

/* ── 5. THE LINKS MUST BE READABLE, MEASURED FROM PIXELS ──────────────────────
   The cross-sell links inherited the site green. Sampled from the RENDERED cloud on
   2026-09-08, not from the stylesheet: ink #00A651 on the cloud's white #FFFFFF is
   3.19:1 at 18px/800. 18px bold is 13.5pt, below the 14pt-bold threshold for "large
   text", so the 4.5:1 AA floor applies and green fails it.
   This site already solved the same problem on the term descriptions with its OWN card
   title purple, sampled from its own rendered card titles rather than invented. Same
   colour here. The underline stays: colour alone must never be the only affordance.
   Hover/focus swap to the green so the state change is still visible. */
.bg-promo__cat { color: var(--beadguy-purple, #6A0DAD); }
.bg-promo__cat:hover,
.bg-promo__cat:focus-visible { color: var(--beadguy-green, #00A651); }

/* ── 6. HE STANDS IN FRONT OF THE FORM, NOT BEHIND IT ─────────────────────────
   Tony 2026-09-08: "we kind of wanted him to actually show up in front of the
   submission form, not behind it".

   THIS IS NOT A STACKING-CONTEXT PROBLEM, AND I CHECKED BEFORE ASSUMING IT WAS.
   Measured in a real headless Chrome on the live product page with the quote
   lightbox OPEN and the mascot walked in. Full ancestry of #beadguy-promo is
   DIV -> BODY -> HTML. BODY computes position:relative with z-index:auto, which
   creates NO stacking context, and nothing in the chain carries a transform, a
   filter, opacity below 1, isolation, will-change or contain. So he was never
   trapped: he and the lightbox are siblings competing in the ROOT stacking
   context, and he simply lost on the number.

   THE MEASURED NUMBERS, read off the live page, not guessed:
       #beadguy-promo                       z-index      99,000
       .jt-dimmer            (JotForm)      z-index  10,000,000
       .jt-feedback          (JotForm)      z-index  10,000,001
   The dimmer is a black sheet at opacity .8 across the whole viewport, which is
   why he read as a washed-out silhouette in Tony's screenshot rather than as
   missing. Two orders of magnitude, so 99,000 was never going to win.

   SCOPED TO THE SUBMITTED LANE ON PURPOSE. Both production entry points, the
   JotForm postMessage and wpcf7mailsent, add .bg-promo--submitted before they
   call show(), so this covers every appearance a customer can ever get. The
   bare .bg-promo lane keeps 99,000 and stays under the site's own modals, which
   is what the /?bg-promo=show debug preview uses.

   The root keeps pointer-events:none, so raising him does NOT put a sheet over
   the form. Only .bg-promo__cloud takes pointer events, and it sits low in the
   viewport, clear of the lightbox's own close control at the top right.

   Ten above the lightbox rather than one, so a future JotForm layer between the
   dimmer and the frame does not silently put him back underneath. */
.bg-promo--submitted { z-index: 10000010; }

/* ── 7. THE CLOUD WAITS UNTIL THE FORM IS DONE TALKING ────────────────────────
   Tony 2026-09-08: "still looks doubled when stopped". His screenshot shows the
   quote lightbox on its green-check Thank You panel with the rainbow cloud parked
   across it: only "Th" of "Thank You" was readable.

   MEASURED FIRST, in real headless Chrome on the live product page, driven through
   the production submission path, before a line of this was written:
       #beadguy-promo x1 . .bg-promo__cloud x1 . .bg-promo__stage x1
       .bg-promo__mascot x2, walk at opacity 0 and idle at opacity 1 (cross-fade)
       beadguy-promo.js enqueued once
   Nothing is duplicated, so this was never a double-init. The overlap is:
       1440x900 : cloud [544,452,500x430] over frame [355,132,710x654]
       390x844  : cloud [102,536,292x300] over frame [20,104,351x636] = 24.6% of it
   and JotForm centres its success text inside that frame.

   THE MASCOT IS UNTOUCHED. Measured at both widths he stands at the bottom-left and
   never reaches the frame's centre, and Tony asked for him in front of the form, so
   rule 6 above and its z-index stay exactly as they are.

   ONLY THE CLOUD STANDS DOWN, ONLY WHILE THE LIGHTBOX IS UP. The class is added and
   removed by beadguy-promo.js from the live presence of .jt-dimmer / .jt-feedback, so
   the moment the customer closes the form the cloud fades in with the cross-sell
   question and both its links. Nothing is deleted and nothing is lost.
   visibility rather than display so it fades instead of popping, matching how the
   theme-song widget already steps aside for him above. */
.bg-promo__cloud {
    transition: opacity .25s ease, visibility 0s linear 0s;
}
.bg-promo--form-open .bg-promo__cloud {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, visibility 0s linear .25s;
}