/* ============================================================
   BPI · liquid-glass hero qualifier — the 22EW pattern in Baumann navy.
   Three quick steps (goal -> timing -> details) in a glass panel on the
   right of the hero, over the globe. Name + mobile are the only required
   fields; everything else is optional (Scalus lead-form standard).
   ============================================================ */

/* two-column hero: copy left, form right. Stats + figures stay full width
   underneath, the same way 22EW keeps its trust strip below the split. */
.hero-split{
  display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(26px,3.4vw,54px); align-items:center;
}
.hero-split .hero-copy{min-width:0}
.hero-split .hero-copy .lead{max-width:56ch}

/* ---- the panel ---------------------------------------------------------- */
.bpq{
  position:relative; padding:22px 22px 24px; min-width:0;
  /* layered glass: the base .glass rim is inherited, this adds depth */
  background:linear-gradient(168deg, rgba(255,255,255,.11), rgba(255,255,255,.035) 42%, rgba(255,255,255,.02));
  backdrop-filter:blur(30px) saturate(165%); -webkit-backdrop-filter:blur(30px) saturate(165%);
  box-shadow:0 40px 110px -38px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.30);
}
/* specular sheen from the top left */
.bpq::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(120% 80% at 8% -6%, rgba(255,255,255,.16), transparent 58%);
}
.bpq > *{position:relative; z-index:1}
@supports not (backdrop-filter: blur(1px)){
  .bpq{background:rgba(12,36,53,.96)}
}

.bpq-logo{display:flex; justify-content:center; padding:2px 0 18px; margin-bottom:18px;
  border-bottom:1px solid rgba(255,255,255,.11)}
.bpq-logo img{height:34px; width:auto; display:block; opacity:.96}

/* Header block: Eli's face, then the title, then the step counter.
   Two rows sharing one avatar column — the portrait spans both, so putting a
   real person on the form costs no extra panel height, it just fills the space
   the title block was already using. */
.bpq-h{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:"face title step" "face who   who";
  align-items:center; column-gap:14px; row-gap:4px;
}
.bpq-face{grid-area:face; width:54px; height:54px; border-radius:50%; object-fit:cover;
  display:block; flex:none; background:#08151f; border:2px solid rgba(255,255,255,.32);
  box-shadow:0 8px 20px -10px rgba(0,0,0,.95)}
.bpq-h h2{grid-area:title; align-self:end; margin:0;
  font-family:"Helvetica Now Display","Helvetica Neue",Inter,Arial,sans-serif;
  font-size:clamp(1.3rem,1.9vw,1.6rem); font-weight:600; letter-spacing:-.01em}
.bpq-h .bpq-step{grid-area:step; align-self:end; font:600 .66rem/1 Inter,sans-serif;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); white-space:nowrap}
.bpq-who{grid-area:who; align-self:start; font:500 .78rem/1.35 Inter,sans-serif; color:var(--ink-soft)}
.bpq-who b{font-weight:600; color:var(--ink)}
.bpq-p{margin:14px 0 0; font-size:.88rem; color:var(--ink-soft)}

.bpq-bar{height:3px; border-radius:3px; background:rgba(255,255,255,.13); margin:18px 0 20px; overflow:hidden}
.bpq-bar i{display:block; height:100%; width:33.33%; border-radius:3px; background:var(--grad-teal);
  transition:width .42s cubic-bezier(.2,.8,.25,1)}

/* ---- steps -------------------------------------------------------------- */
.bpq-step-panel{display:none}
.bpq-step-panel.on{display:block; animation:bpqIn .34s cubic-bezier(.2,.8,.25,1)}
@keyframes bpqIn{from{opacity:0; transform:translateY(9px)}to{opacity:1; transform:none}}

.bpq-label{display:block; font:600 .68rem/1.3 Inter,sans-serif; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-mute); margin-bottom:11px}

.bpq-chips{display:grid; grid-template-columns:1fr 1fr; gap:9px}
.bpq-chips.one{grid-template-columns:1fr}
.bpq-chip{position:relative; display:block; cursor:pointer; -webkit-tap-highlight-color:transparent}
.bpq-chip input{position:absolute; opacity:0; width:0; height:0}
.bpq-chip > span{display:flex; align-items:center; gap:.6em; min-height:52px;
  padding:.7rem .85rem; border-radius:13px; font-size:.86rem; line-height:1.3;
  color:var(--ink); border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.045);
  transition:background .18s, border-color .18s, transform .18s}
.bpq-chip > span svg{width:17px; height:17px; flex:none; opacity:.75}
.bpq-chip:hover > span{background:rgba(255,255,255,.11); border-color:rgba(255,255,255,.30); transform:translateY(-1px)}
.bpq-chip input:focus-visible + span{outline:2px solid rgba(255,255,255,.6); outline-offset:2px}
.bpq-chip input:checked + span{background:rgba(255,255,255,.17); border-color:rgba(255,255,255,.48)}

/* ---- fields ------------------------------------------------------------- */
.bpq-f{margin-bottom:11px}
.bpq-f label{display:block; font:500 .76rem/1 Inter,sans-serif; color:var(--ink-soft); margin-bottom:6px}
.bpq-f input{width:100%; appearance:none; font:400 .92rem inherit; color:#fff;
  padding:.72rem .9rem; border-radius:11px; border:1px solid rgba(255,255,255,.17);
  background:rgba(255,255,255,.055); outline:none; transition:border-color .18s, background .18s}
.bpq-f input::placeholder{color:rgba(255,255,255,.36)}
.bpq-f input:focus{border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.09)}
.bpq-f input:user-invalid{border-color:rgba(255,120,120,.6)}
.bpq-row{display:grid; grid-template-columns:1fr 1fr; gap:10px}

/* honeypot — never visible, never focusable by a human */
.bpq-hp{position:absolute!important; left:-9999px; width:1px; height:1px; overflow:hidden}


/* bpi.css's .lead-form rules assume a standalone centred form — inside the
   panel it must fill the panel, and its buttons must sit side by side rather
   than each taking width:100%. */
.bpq .lead-form{max-width:none; margin:0}
.bpq-nav{display:flex; gap:9px; margin-top:14px}
.bpq-nav .btn{padding:.66rem 1.15rem; font-size:.9rem; margin-top:0; width:auto}
.bpq-nav .bpq-send{flex:1 1 auto; justify-content:center; width:auto}
.bpq-nav .bpq-back{flex:0 0 auto; width:auto}

/* The APP 5 collection notice bpi.js injects into every [data-lead] form. It
   carries an INLINE style (centred, max-width 520px) that suits a wide standalone
   form — inside this narrow panel it needs to align with the fields, and only
   !important can beat an inline style. Scoped to .bpq so every other form keeps
   the shared centred treatment. */
.bpq .scalus-consent{text-align:left!important; margin:11px 0 0!important;
  max-width:none!important; color:var(--ink-mute)}

@media(max-width:1080px){
  .hero-split{grid-template-columns:1fr; gap:30px}
  /* the form replaces the twin hero CTAs on small screens — leaving both
     pushes the panel ~140px further down the page for no gain */
  .hero-split .hero-copy .btn-row{display:none}
  .hero-split .hero-copy .lead{max-width:none}
  .bpq{padding:20px 18px 22px}
}
@media(max-width:520px){
  .bpq-chips{grid-template-columns:1fr}
  .bpq-row{grid-template-columns:1fr}
  .bpq-logo img{height:29px}
}
@media(prefers-reduced-motion:reduce){
  .bpq-step-panel.on{animation:none}
  .bpq-bar i{transition:none}
}