/* ===================== BADDIE POPS — QUIZ TAKEOVER =====================
   Uses the site's existing tokens only: --ink, --paper, --blush, --mono,
   GC Nordix for display. No new design language.

   Mobile is the priority: full-bleed sheet, dvh units so Safari's chrome
   doesn't clip the CTA, safe-area padding, and the panel scrolls internally
   only if content genuinely overflows.                                     */

.bq{
  position:fixed; inset:0; z-index:9995;
  display:none; align-items:center; justify-content:center;
  padding:20px;
}
.bq.is-open{ display:flex; }

.bq__scrim{
  position:absolute; inset:0;
  background:rgba(44,44,44,.42);
  opacity:0; transition:opacity .32s ease;
}
.bq.is-in .bq__scrim{ opacity:1; }

.bq__panel{
  position:relative;
  width:min(460px,100%);
  background:var(--paper,#FBF7F7);
  border-radius:22px;
  box-shadow:0 40px 90px -30px rgba(44,44,44,.5);
  opacity:0; transform:translateY(12px) scale(.99);
  transition:opacity .36s ease, transform .36s cubic-bezier(.22,1,.36,1);
}
.bq.is-in .bq__panel{ opacity:1; transform:none; }

.bq__inner{
  padding:clamp(34px,5vw,46px) clamp(26px,4vw,38px) clamp(28px,4vw,36px);
  max-height:86vh; max-height:86dvh; overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

.bq__x{
  position:absolute; top:8px; right:10px;
  width:44px; height:44px; padding:0;
  background:none; border:none; cursor:pointer;
  font-size:22px; line-height:1; color:rgba(44,44,44,.38);
  transition:color .2s ease; z-index:2;
}
@media(hover:hover){ .bq__x:hover{ color:var(--ink,#2C2C2C); } }

/* ---- screens ---- */
.bq-screen{ display:none; }
.bq-screen.is-active{ display:block; animation:bq-in .34s cubic-bezier(.22,1,.36,1) both; }
@keyframes bq-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .bq-screen.is-active{ animation:none; }
  .bq__panel,.bq__scrim{ transition:none; }
}

/* ---- type ---- */
.bq-eyebrow,.bq-count{
  font-family:var(--mono); text-transform:uppercase; letter-spacing:.22em;
  font-size:10px; font-weight:600; color:rgba(44,44,44,.45); margin:0 0 12px;
}
.bq-h,.bq-q,.bq-arch{
  font-family:"GC Nordix",sans-serif; font-weight:700; text-transform:lowercase;
  letter-spacing:-.025em; color:var(--ink,#2C2C2C); margin:0;
}
.bq-h{ font-size:clamp(1.9rem,7.6vw,2.4rem); line-height:1.02; }
.bq-q{ font-size:clamp(1.5rem,6.2vw,1.9rem); line-height:1.1; margin-bottom:22px; }
/* GC Nordix Demo has no question mark — same Azeret Mono fix used sitewide */
.bq-qm{
  font-family:"Azeret Mono",monospace; font-weight:700; font-size:.78em;
  letter-spacing:0; margin:0 -.1em 0 -.07em; vertical-align:baseline;
}
.bq-sub,.bq-pers{
  font-family:"GC Nordix","Azeret Mono",sans-serif; font-weight:500;
  text-transform:lowercase; font-size:1rem; line-height:1.55;
  color:#4a423e; margin:10px 0 24px;
}

/* ---- answers: whole row is the target, no confirm button ---- */
.bq-answers{ display:flex; flex-direction:column; gap:10px; }
.bq-answer{
  display:block; width:100%; box-sizing:border-box;
  min-height:66px; padding:18px 20px; text-align:left;
  background:#fff; border:1.5px solid rgba(44,44,44,.14); border-radius:15px;
  cursor:pointer;
  font-family:"GC Nordix","Azeret Mono",sans-serif; font-weight:500;
  text-transform:lowercase; font-size:1rem; line-height:1.3;
  color:var(--ink,#2C2C2C);
  transition:border-color .2s ease, background .2s ease, transform .12s ease;
}
@media(hover:hover){ .bq-answer:hover{ border-color:rgba(44,44,44,.42); } }
.bq-answer.is-picked{ background:var(--ink,#2C2C2C); border-color:var(--ink,#2C2C2C); color:#F7EFE9; }
.bq-answer:active{ transform:scale(.99); }

/* ---- CTAs ---- */
.bq-cta{
  display:flex; align-items:center; justify-content:center;
  width:100%; box-sizing:border-box; min-height:54px; padding:0 22px;
  margin-top:18px; border:none; border-radius:14px; cursor:pointer;
  background:var(--ink,#2C2C2C); color:#F7EFE9; text-decoration:none;
  font-family:var(--mono); text-transform:uppercase; letter-spacing:.14em;
  font-size:12px; font-weight:600;
  transition:background .25s ease;
}
@media(hover:hover){ .bq-cta:hover{ background:#1a1a1a; } }

/* secondary escape: deliberately quiet, reads as a text link */
.bq-quiet{
  display:block; width:100%; margin-top:14px; min-height:44px;
  background:none; border:none; cursor:pointer;
  font-family:var(--mono); text-transform:lowercase; letter-spacing:.06em;
  font-size:11.5px; color:rgba(44,44,44,.42);
  text-decoration:underline; text-underline-offset:4px;
  transition:color .2s ease;
}
@media(hover:hover){ .bq-quiet:hover{ color:rgba(44,44,44,.7); } }

/* ---- email ---- */
.bq-form{ display:block; }
.bq-input{
  width:100%; box-sizing:border-box; min-height:54px; padding:0 16px;
  font-size:16px;                    /* 16px stops iOS zooming on focus */
  font-family:var(--mono); color:var(--ink,#2C2C2C);
  background:#fff; border:1.5px solid rgba(44,44,44,.2); border-radius:14px;
}
.bq-input:focus{ outline:none; border-color:var(--ink,#2C2C2C); }
.bq-err{
  margin:9px 0 0; font-family:var(--mono); font-size:11.5px; color:#8C3B4A;
}
.bq-err[hidden]{ display:none; }

/* ---- result ---- */
.bq-arch{ font-size:clamp(2.4rem,10vw,3.1rem); line-height:.98; }
.bq-flavor{
  font-family:var(--mono); text-transform:uppercase; letter-spacing:.18em;
  font-size:12px; font-weight:600; margin:10px 0 0; color:var(--ink,#2C2C2C);
}
.bq__panel[data-arch="chic"]       .bq-flavor{ color:#C78590; }
.bq__panel[data-arch="unbothered"] .bq-flavor{ color:#DD8161; }
.bq__panel[data-arch="seductive"]  .bq-flavor{ color:#CA1F41; }

/* ===================== MOBILE ===================== */
@media (max-width:860px){
  .bq{ align-items:flex-end; padding:0; }
  .bq__panel{
    width:100%;
    border-radius:24px 24px 0 0;
    /* near-full-screen, but the campaign stays visible along the top edge */
    min-height:88vh; min-height:88dvh;
    display:flex; flex-direction:column;
    transform:translateY(20px);
  }
  .bq.is-in .bq__panel{ transform:none; }
  .bq__inner{
    flex:1; display:flex; flex-direction:column; justify-content:center;
    max-height:none;
    padding:calc(30px + env(safe-area-inset-top,0px)) 22px
            calc(26px + env(safe-area-inset-bottom,0px));
  }
  .bq-answer{ min-height:70px; }

  /* Deliberately NO layout change on focus. An earlier version switched the
     panel from centred to top-aligned when the field gained focus, which moved
     the CTA mid-tap — a real layout-shift bug. The panel stays put; the field
     is scrolled into view instead (see bp-quiz.js), and dvh units keep the CTA
     clear of Safari's chrome. */
}

/* Body lock while the takeover is open */
body.bq-open{ overflow:hidden; }

/* ===================== RESULT =====================
   Not a card. The takeover becomes a small personalised landing page:
   identity first, product second, function third, confirmation last.
   Deliberately unboxed — hierarchy comes from scale and whitespace. */
.bq-result{ text-align:left; }
/* reads as one sentence with the archetype — not a metadata eyebrow */
.bq-article{
  font-family:"GC Nordix",sans-serif; font-weight:700; text-transform:lowercase;
  font-size:clamp(1.25rem,5vw,1.5rem); line-height:1.1; letter-spacing:-.02em;
  color:rgba(44,44,44,.72); margin:0 0 2px;
}

.bq-arch{
  font-size:clamp(2.5rem,11vw,3.4rem); line-height:.96; margin:0;
}
.bq-flavor{
  font-family:var(--mono); text-transform:uppercase; letter-spacing:.2em;
  font-size:11.5px; font-weight:600; margin:12px 0 0;
}
.bq__panel[data-arch="chic"]       .bq-flavor{ color:#C78590; }
.bq__panel[data-arch="unbothered"] .bq-flavor{ color:#DD8161; }
.bq__panel[data-arch="seductive"]  .bq-flavor{ color:#CA1F41; }

.bq-pers{ margin:18px 0 0; }
.bq-pers__l{
  display:block;
  font-family:"GC Nordix","Azeret Mono",sans-serif; font-weight:500;
  text-transform:lowercase; font-size:1.02rem; line-height:1.5; color:#4a423e;
}
.bq-pers__l:last-child{ margin-top:12px; color:var(--ink,#2C2C2C); }

/* transition into the product */
.bq-match{
  font-family:var(--mono); text-transform:lowercase; letter-spacing:.14em;
  font-size:11px; color:rgba(44,44,44,.45);
  margin:clamp(24px,4.5vw,32px) 0 10px;
}

/* product */
.bq-prod{
  font-family:"GC Nordix",sans-serif; font-weight:700; text-transform:lowercase;
  letter-spacing:-.02em; font-size:clamp(1.5rem,6vw,1.8rem); line-height:1.05;
  color:var(--ink,#2C2C2C); margin:0;
}
.bq-flavline{
  font-family:"GC Nordix","Azeret Mono",sans-serif; font-weight:500;
  text-transform:lowercase; font-size:1rem; line-height:1.5;
  color:#4a423e; margin:9px 0 0;
}
/* desire first — brand line reads as copy, ingredients as quiet substantiation */
/* legacy name kept out of use */
.bq-brandline--unused{
  font-family:"GC Nordix","Azeret Mono",sans-serif; font-weight:500;
  text-transform:lowercase; font-size:1rem; line-height:1.5;
  color:var(--ink,#2C2C2C); margin:18px 0 0;
}
.bq-ingredients{
  font-family:var(--mono); text-transform:uppercase; letter-spacing:.16em;
  font-size:10px; font-weight:600; color:rgba(44,44,44,.42); margin:8px 0 0;
}

.bq-thats{
  font-family:"GC Nordix",sans-serif; font-weight:700; text-transform:lowercase;
  letter-spacing:-.015em; font-size:1.12rem; line-height:1.3;
  color:var(--ink,#2C2C2C); margin:14px 0 clamp(26px,5vw,34px);
}
.bq-prop{
  font-family:"GC Nordix","Azeret Mono",sans-serif; font-weight:500;
  text-transform:lowercase; font-size:.98rem; line-height:1.5;
  color:var(--ink,#2C2C2C); margin:16px 0 0;
}
.bq-consent{
  font-family:var(--mono); text-transform:lowercase; letter-spacing:.02em;
  font-size:10.5px; line-height:1.5; color:rgba(44,44,44,.42); margin:12px 0 0;
}

/* action block — the ask is separate from the email that revealed the result */
.bq-act{
  margin-top:clamp(26px,5vw,34px); padding-top:20px;
  border-top:1px solid rgba(44,44,44,.1);
}
.bq-ask{
  font-family:"GC Nordix",sans-serif; font-weight:700; text-transform:lowercase;
  letter-spacing:-.015em; font-size:1.15rem; color:var(--ink,#2C2C2C); margin:0 0 12px;
}
.bq-done{
  font-family:var(--mono); text-transform:lowercase; letter-spacing:.04em;
  font-size:12px; color:#4C8A6B; margin:0;
}
.bq-done[hidden],.bq-ask[hidden]{ display:none; }
.bq-quiet--link{ text-align:center; text-decoration:underline; text-underline-offset:4px; }
.bq-result .bq-cta{ margin-top:22px; }

/* The result is longer than the viewport, so the SHEET itself scrolls.
   Without a bound the panel simply grew past the screen and nothing could be
   reached — the CTA sat below the fold with no way to get to it. */
@media (max-width:860px){
  .bq[data-bq-screen="result"] .bq__panel{
    min-height:0;
    height:92vh; height:92dvh;
  }
  .bq[data-bq-screen="result"] .bq__inner{
    justify-content:flex-start;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
}
@media (min-width:861px){
  .bq[data-bq-screen="result"] .bq__panel{ width:min(500px,100%); }
  .bq[data-bq-screen="result"] .bq__inner{ max-height:88vh; overflow-y:auto; }
}

/* ---- intro: the type is the screen ---- */
.bq-intro{ text-align:center; }
.bq-hero{
  font-family:"GC Nordix",sans-serif; font-weight:700; text-transform:lowercase;
  font-size:clamp(3rem,17vw,4.6rem); line-height:.92; letter-spacing:-.035em;
  color:var(--ink,#2C2C2C); margin:0 0 clamp(28px,6vw,40px);
}
.bq-intro .bq-cta{ margin-top:0; }

/* ---- /quiz: same module, inline instead of an overlay ---- */
.bq--page{ position:static; display:block; padding:0; z-index:auto; }
.bq--page .bq__scrim{ display:none; }
.bq--page .bq__panel{
  width:min(560px,100%); margin:0 auto; box-shadow:none; background:transparent;
  opacity:1; transform:none; min-height:0; height:auto; border-radius:0;
}
.bq--page .bq__x{ display:none; }
.bq--page .bq__inner{
  max-height:none; overflow:visible; padding:clamp(40px,7vw,72px) 22px clamp(60px,8vw,90px);
}
@media (max-width:860px){
  .bq--page .bq__panel{ height:auto; }
  .bq--page[data-bq-screen="result"] .bq__panel{ height:auto; }
  .bq--page[data-bq-screen="result"] .bq__inner{ overflow:visible; }
}

/* ===================== RESULT — MOBILE LAYOUT REFINEMENT =====================
   Copy unchanged. This pass is purely hierarchy, weight and rhythm so the CTA
   is reachable almost immediately on an iPhone.
     1  archetype down ~18%
     2  "you're a/an" stays present, still secondary
     3  personality lighter + tighter
     4  duplicate product heading gone (markup)
     5  support block compressed
     6  action area pulled up                                             */

/* 1. archetype: still the only hero, ~18% smaller than before.
      ch-based cap keeps "unbothered baddie" from dwarfing "chic baddie". */
.bq-arch{
  font-size:clamp(2rem,8.6vw,2.7rem);
  line-height:.98;
  letter-spacing:-.03em;
}

/* 2. present, clearly secondary, reads as one sentence with the archetype */
.bq-article{
  font-size:clamp(1.05rem,4.2vw,1.25rem);
  color:rgba(44,44,44,.62);
  margin:0 0 1px;
}

.bq-flavor{ margin:10px 0 0; }

/* 3. relaxed body treatment — lighter, smaller, tighter */
.bq-pers{ margin:14px 0 0; }
.bq-pers__l{
  font-weight:400;
  font-size:.94rem;
  line-height:1.4;
  color:#5a524e;
}
.bq-pers__l:last-child{ margin-top:8px; color:#5a524e; }

/* the flavour assignment — a beat, not a headline */
.bq-thats{
  font-size:1rem;
  margin:14px 0 0;
}

/* 5. support block: quieter and tighter than the identity block */
.bq-flavline{
  font-size:.92rem; line-height:1.4; color:#5a524e; margin:16px 0 0;
}
.bq-prop{
  font-size:.92rem; line-height:1.4; margin:8px 0 0; color:rgba(44,44,44,.78);
}
.bq-ingredients{ margin:6px 0 0; }

/* 6. action area pulled up */
.bq-act{ margin-top:20px; padding-top:16px; }
.bq-ask{ font-size:1.05rem; margin:0 0 10px; }
.bq-result .bq-cta{ margin-top:0; }
.bq-quiet--link{ margin-top:10px; }

@media (max-width:860px){
  /* result no longer needs the full sheet height — it ends where it ends */
  .bq[data-bq-screen="result"] .bq__panel{ height:auto; max-height:92dvh; }
  .bq[data-bq-screen="result"] .bq__inner{ padding-top:26px; padding-bottom:26px; }
}

/* ===================== RESULT — TWO-ZONE COMPOSITION =====================
   Reference direction: centred, airy, product-forward, one clear CTA.
   Zone 1 = identity reveal (type only). Zone 2 = a tinted product feature
   anchored by a single centred packshot. Not a stacked text page.        */

.bq-result{ text-align:center; }

/* ---- zone 1: identity ---- */
.bq-id{ padding-bottom:clamp(26px,5vw,34px); }
.bq-article{
  font-size:clamp(1rem,4vw,1.15rem); color:rgba(44,44,44,.55);
  margin:0 0 2px; letter-spacing:-.01em;
}
.bq-arch{ font-size:clamp(1.95rem,8.2vw,2.5rem); line-height:.98; }
.bq-flavor{
  margin:12px 0 0; letter-spacing:.22em; font-size:11px;
}
.bq-pers{ margin:18px auto 0; max-width:30ch; }
.bq-pers__l{ font-size:.93rem; line-height:1.45; color:#5a524e; }
.bq-pers__l:last-child{ margin-top:7px; }
.bq-thats{
  font-size:1.02rem; margin:16px 0 0; color:var(--ink,#2C2C2C);
}

/* ---- zone 2: product feature ---- */
.bq-feature{
  margin:0 -22px; padding:clamp(28px,5vw,38px) 22px clamp(26px,5vw,34px);
  background:var(--bq-tint,#F3E7E1);
  border-radius:20px 20px 0 0;
}
.bq-shot{
  width:min(150px,42vw); margin:0 auto clamp(18px,3.5vw,24px);
}
.bq-shot img{
  display:block; width:100%; height:auto;
  filter:drop-shadow(0 18px 28px rgba(44,44,44,.18));
}
.bq-pname{
  font-family:"GC Nordix",sans-serif; font-weight:700; text-transform:lowercase;
  letter-spacing:-.02em; font-size:clamp(1.4rem,5.6vw,1.7rem); line-height:1.05;
  color:var(--ink,#2C2C2C); margin:0;
}
.bq-flavline{
  font-size:.92rem; line-height:1.4; color:#5a524e;
  margin:8px auto 0; max-width:28ch;
}
.bq-prop{
  font-size:.9rem; line-height:1.4; color:rgba(44,44,44,.72);
  margin:14px auto 0; max-width:30ch;
}
.bq-ingredients{ margin:7px 0 0; opacity:.75; }

/* one clear action, quiet secondary beneath */
.bq-feature .bq-cta{ margin-top:clamp(20px,4vw,26px); }
.bq-feature .bq-quiet--link{ margin-top:12px; }
.bq-done{ margin-top:clamp(20px,4vw,26px); }

/* the feature panel bleeds to the bottom of the sheet */
@media (max-width:860px){
  .bq[data-bq-screen="result"] .bq__inner{ padding:26px 22px 0; }
  .bq-feature{ padding-bottom:calc(30px + env(safe-area-inset-bottom,0px)); }
}
@media (min-width:861px){
  .bq-feature{ margin:0 -38px; border-radius:20px; }
}

/* ---- email gate: centred, minimal ---- */
.bq-gate{ text-align:center; }
.bq-gate .bq-h{ font-size:clamp(1.5rem,6vw,1.85rem); line-height:1.1; }
.bq-gate .bq-sub{ margin:12px 0 22px; }
.bq-consent{ max-width:32ch; margin-left:auto; margin-right:auto; }

/* ===================== RESULT — LIGHTER PASS =====================
   Archetype lands harder at the top; product moment gets more air and less
   bulk; flavour named twice instead of four times. Target: most of the
   result inside one iPhone view.                                        */

/* 3. archetype unmistakable at the top */
.bq-id{ padding-bottom:clamp(20px,4vw,26px); }
.bq-article{ font-size:clamp(1.05rem,4.2vw,1.2rem); color:rgba(44,44,44,.5); }
.bq-arch{ font-size:clamp(2.15rem,9vw,2.7rem); line-height:.96; }
.bq-flavor{ margin:11px 0 0; font-size:10.5px; letter-spacing:.24em; }
.bq-pers{ margin:16px auto 0; max-width:29ch; }
.bq-pers__l{ font-size:.9rem; line-height:1.42; }

/* 5. product floats with air, not oversized */
.bq-feature{ padding:clamp(22px,4vw,30px) 22px clamp(22px,4vw,28px); }
.bq-shot{ width:min(112px,30vw); margin:0 auto clamp(14px,2.8vw,18px); }
.bq-shot img{ filter:drop-shadow(0 14px 22px rgba(44,44,44,.16)); }

/* 6. concise product block */
.bq-pname{ font-size:clamp(1.3rem,5.2vw,1.55rem); }
.bq-flavline{ font-size:.88rem; margin-top:6px; max-width:26ch; }
.bq-prop{ font-size:.88rem; line-height:1.35; margin-top:12px; max-width:26ch; }
.bq-ingredients{ font-size:9.5px; letter-spacing:.18em; margin-top:6px; }
.bq-feature .bq-cta{ margin-top:clamp(16px,3vw,20px); min-height:52px; }
.bq-feature .bq-quiet--link{ margin-top:10px; }

@media (max-width:860px){
  .bq[data-bq-screen="result"] .bq__inner{ padding-top:22px; }
}

/* the product image doubles as a shortcut to the same action */
.bq-shot{
  display:block; border:none; background:none; padding:0; margin:0 auto;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}

/* ---- first-taste confirmation + error (result) ---- */
.bq-done{ margin-top:clamp(16px,3vw,22px); }
.bq-done[hidden]{ display:none; }
.bq-done__h{
  font-family:"GC Nordix",sans-serif; font-weight:700; text-transform:lowercase;
  letter-spacing:-.015em; font-size:1.05rem; color:var(--ink,#2C2C2C); margin:0;
}
.bq-done__p{
  font-family:"GC Nordix","Azeret Mono",sans-serif; font-weight:500;
  text-transform:lowercase; font-size:.9rem; line-height:1.4;
  color:rgba(44,44,44,.6); margin:5px 0 0;
}
.bq-taste-err{
  margin:10px 0 0; font-family:var(--mono); text-transform:lowercase;
  letter-spacing:.02em; font-size:11.5px; color:#8C3B4A;
}
.bq-taste-err[hidden]{ display:none; }
.bq-cta.is-busy,.bq-shot.is-busy{ opacity:.55; pointer-events:none; }

/* ===================== RESULT — ONE CONTINUOUS CANVAS =====================
   The result used to change from paper into a separate coloured product block.
   The tint now covers the whole panel so archetype and product read as one
   page. Tints are near-neutral so the packaging is always the strongest
   colour in the composition. */
.bq__panel[data-arch]{ background:var(--bq-tint,var(--paper,#FBF7F7)); }
.bq-feature{
  background:none; margin:0; padding:0; border-radius:0;
}
.bq-id{ padding-bottom:clamp(18px,3.5vw,24px); }

/* ---- your match ---- */
.bq-match{
  font-family:var(--mono); text-transform:uppercase; letter-spacing:.22em;
  font-size:9.5px; font-weight:600; color:rgba(44,44,44,.45);
  margin:0 0 5px;
}
.bq-matchname{
  font-family:"GC Nordix",sans-serif; font-weight:700; text-transform:lowercase;
  letter-spacing:-.02em; font-size:clamp(1.25rem,5vw,1.5rem); line-height:1.05;
  color:var(--ink,#2C2C2C); margin:0 0 clamp(14px,3vw,20px);
}

/* ---- packshot: materially smaller, with air around it ---- */
.bq-shot{ width:min(78px,22vw); margin:0 auto clamp(14px,3vw,18px); }
.bq-shot img{ filter:drop-shadow(0 12px 20px rgba(44,44,44,.14)); }

/* ---- compact support block, CTA arrives in normal flow ---- */
.bq-flavline{ margin-top:0; }
.bq-prop{ margin-top:10px; }
.bq-ingredients{ margin-top:6px; }
.bq-result .bq-cta{ margin-top:clamp(18px,3.5vw,24px); }
.bq-quiet--link{ margin-top:10px; }

@media (max-width:860px){
  .bq[data-bq-screen="result"] .bq__inner{ padding-bottom:26px; }
  .bq-shot{ width:74px; }
}


/* ===================== DELAYED STICKY CTA (mobile) =====================
   Hidden on arrival. Revealed when YOUR MATCH approaches the viewport, and
   retracted while the in-flow CTA is on screen — never two black buttons at
   once. Sticky inside the result's own scroller, so it rides above Safari's
   chrome without any vh/dvh trickery. */
.bq-tray{ display:none; }
.bq-tray[hidden]{ display:none !important; }

@media (max-width:860px){
  .bq-tray{
    display:block; position:sticky; bottom:0; z-index:3;
    margin:0 -22px -26px;
    padding:12px 22px calc(12px + env(safe-area-inset-bottom,0px));
    background:linear-gradient(rgba(251,247,247,0), var(--bq-tint,#FBF7F7) 42%);
    animation:bq-tray-in .28s ease both;
  }
  .bq-tray .bq-cta{ margin-top:0; }
  @keyframes bq-tray-in{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
  @media (prefers-reduced-motion: reduce){ .bq-tray{ animation:none; } }

  /* clearance so the tray never sits on the last line of the result */
  .bq[data-bq-screen="result"] .bq__inner{ padding-bottom:26px; }
  .bq-result .bq-quiet--link{ margin-bottom:64px; }
}

/* ---- YOUR MATCH: flavour name in its own flavour colour ----
   Same accents already used elsewhere for each archetype. Size, weight and
   position unchanged — colour only. */
.bq__panel[data-arch="chic"]       .bq-matchname{ color:#C15E72; }
.bq__panel[data-arch="unbothered"] .bq-matchname{ color:#C9663F; }
.bq__panel[data-arch="seductive"]  .bq-matchname{ color:#B81733; }