/* =========================================================
   BUY ENGINE BASE (qtbe2)
   - Tokens
   - Section shell/wrap
   - Hero
   - Grid / cards
   - Step headers
   ========================================================= */

/* -------------------------
   TOKENS
------------------------- */
:where(#packlist.qtbe2, #qtbe2Modal.qtbe2-modal){
  --be-accent: var(--qt-buy-accent, var(--accent, #6a7eff));
  --be-accent-soft: color-mix(in srgb, var(--be-accent) 26%, transparent);
  --be-accent-soft2: color-mix(in srgb, var(--be-accent) 16%, transparent);

  --be-ink: #0f172a;
  --be-muted: #64748b;
  --be-bd: rgba(15,23,42,.11);

  --be-radius: 18px;
  --be-radius-lg: 26px;
  --be-shadow: 0 18px 55px rgba(2,6,23,.10);
  --be-shadow-soft: 0 10px 26px rgba(15,23,42,.10);
  --be-focus: 0 0 0 4px var(--be-accent-soft);

  color: var(--be-ink);
}

/* -------------------------
   SECTION
------------------------- */
#packlist.qtbe2{
  position: relative;
  padding: 18px 0 56px;
  overflow: hidden;
  isolation: isolate;
} 

#packlist.qtbe2 *,
#packlist.qtbe2 *::before,
#packlist.qtbe2 *::after{
  box-sizing: border-box;
}

#packlist.qtbe2::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 560px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(980px 420px at 16% 6%, var(--be-accent-soft), transparent 62%),
    radial-gradient(920px 380px at 84% 0%, var(--be-accent-soft2), transparent 58%),
    linear-gradient(180deg, #f5f7ff, #fff);
}

/* -------------------------
   SHELL / WRAP
------------------------- */
.qtbe2-shell{
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
}

.qtbe2-wrap{
  width: min(1180px, calc(100% - 32px));
}

@media (min-width:980px){
  .qtbe2-wrap{
    width: min(1180px, calc(100% - 40px));
  }
}

/* -------------------------
   HERO
------------------------- */
.qtbe2-hero{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--be-bd);
  border-radius: var(--be-radius-lg);
  background:
    radial-gradient(980px 240px at 18% 0%, rgba(255,255,255,.76), transparent 55%),
    radial-gradient(980px 240px at 86% 0%, var(--be-accent-soft2), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.72));
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 52px rgba(2,6,23,.09);
}

.qtbe2-hero__icon{
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #fff;
  background:
    radial-gradient(160px 70px at 30% 20%, rgba(255,255,255,.22), rgba(255,255,255,0) 58%),
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0)),
    var(--be-accent);
  box-shadow: 0 18px 44px rgba(2,6,23,.18);
  filter: saturate(1.10) contrast(1.02);
}

.qtbe2-hero__icon .qt-ic{
  width: 22px;
  height: 22px;
  display: block;
  color: currentColor;
}

.qtbe2-hero__icon .qt-ic *{
  vector-effect: non-scaling-stroke;
}

.qtbe2-hero__icon .qt-ic [fill]:not([fill="none"]){
  fill: currentColor;
}

.qtbe2-hero__icon .qt-ic [stroke]{
  stroke: currentColor;
}

.qtbe2-hero__icon i{
  display: none !important;
}

.qtbe2-hero__text{
  min-width: 0;
  flex: 1 1 auto;
}

.qtbe2-hero__title{
  margin: 0 0 4px;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 950;
}

.qtbe2-hero__desc{
  margin: 0;
  color: var(--be-muted);
  font-size: 13.5px;
  line-height: 1.55;
}

/* -------------------------
   REVIEWS JUMP
------------------------- */
.qtbe2-revJump{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  text-decoration: none;
  font-weight: 950;
  font-size: 14px;
  line-height: 1.2;
  color: rgba(0,0,0,.86);
}

.qtbe2-revJump:hover{
  text-decoration: underline;
}

.qtbe2-revJump__avg{
  font-weight: 950;
}

.qtbe2-revJump__count{
  font-weight: 950;
  color: color-mix(in srgb, var(--be-accent) 70%, #111);
  white-space: nowrap;
}

.qtbe2-revJump__stars{
  display: inline-flex;
  gap: 2px;
  transform: translateY(1px);
}

.qtbe2-revJump__stars .qt-ic--star{
  width: 16px;
  height: 16px;
}

.qtbe2-revJump__stars .is-on{
  color: #f59e0b;
}

.qtbe2-revJump__stars .is-off{
  color: rgba(0,0,0,.18);
}

@media (max-width:560px){
  .qtbe2-hero{
    padding: 12px;
  }

  .qtbe2-hero__title{
    font-size: 20px;
  }

  .qtbe2-revJump{
    flex-wrap: wrap;
    gap: 6px;
    font-size: 13px;
  }

  .qtbe2-revJump__count{
    white-space: normal;
  }
}

/* -------------------------
   GRID / CARDS
------------------------- */
.qtbe2-grid{
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width:980px){
  .qtbe2-grid{
    grid-template-columns: 1.06fr .94fr;
    gap: 20px;
    align-items: start;
  }
}

.qtbe2-card{
  position: relative;
  border: 1px solid var(--be-bd);
  border-radius: var(--be-radius-lg);
  background: rgba(255,255,255,.76);
  backdrop-filter: blur(10px);
  box-shadow: var(--be-shadow);
  overflow: hidden;
}

.qtbe2-card::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  opacity: .9;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,.74),
    rgba(255,255,255,0) 45%,
    var(--be-accent-soft2)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.qtbe2-card__in{
  position: relative;
  padding: 16px;
  background:
    radial-gradient(900px 220px at 20% 0%, rgba(255,255,255,.62), transparent 58%),
    rgba(255,255,255,.66);
}

@media (min-width:980px){
  .qtbe2-card__in{
    padding: 18px;
  }

  .qtbe2-card--right{
    position: sticky;
    top: 18px;
  }
}

/* -------------------------
   STEP HEAD
------------------------- */
.qtbe2-stepHead{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid rgba(15,23,42,.09);
  border-radius: 16px;
  background:
    radial-gradient(760px 160px at 12% 0%, rgba(255,255,255,.76), transparent 58%),
    radial-gradient(760px 160px at 88% 0%, var(--be-accent-soft2), transparent 58%),
    rgba(255,255,255,.74);
}

.qtbe2-stepHead--mt{
  margin-top: 14px;
}

.qtbe2-stepHead__l{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  min-width: 0;
}

.qtbe2-stepNum{
  width: 28px;
  height: 28px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  font-weight: 950;
  color: #fff;
  background:
    radial-gradient(120px 60px at 30% 20%, rgba(255,255,255,.18), rgba(255,255,255,0) 58%),
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0)),
    var(--be-accent);
  box-shadow: 0 14px 34px rgba(2,6,23,.16);
}

.qtbe2-stepText{
  min-width: 0;
}

.qtbe2-stepTitle{
  font-size: 13px;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 1px 0 4px;
}

.qtbe2-stepSub{
  font-size: 13px;
  line-height: 1.45;
  color: var(--be-muted);
}

.qtbe2-stepHead--right{
  margin-bottom: 12px;
}

.qtbe2-stepHead--right .qtbe2-stepTitle{
  text-transform: none;
  letter-spacing: -0.02em;
  font-size: 18px;
  margin: 0 0 4px;
}

.qtbe2-stepHead--right .qtbe2-stepSub{
  font-size: 12.5px;
  font-weight: 900;
}

.qtbe2-stepHead--right .qtbe2-stepHead__l{
  min-width: 0;
}

/* -------------------------
   SMALL MOBILE
------------------------- */
@media (max-width:560px){
  .qtbe2-wrap{
    width: calc(100% - 24px);
  }

  .qtbe2-card__in{
    padding: 14px;
  }
}


/* =========================
   QTBE2 WAITLIST — COMPACT
   ========================= */

.qtbe2-grid--unavailable{
  margin-top:8px;
}

.qtbe2-grid--unavailable .qtbe2-card--right{
  max-width:980px;
  margin:0 auto;
}

.qtbe2-grid--unavailable .qtbe2-card__in{
  padding:20px 20px 18px;
}

.qtbe2-grid--unavailable .qtbe2-stepHead{
  margin-bottom:10px;
}

.qtbe2-grid--unavailable .qtbe2-stepHead__l{
  gap:12px;
}

.qtbe2-grid--unavailable .qtbe2-stepNum{
  width:42px;
  height:42px;
  min-width:42px;
  font-size:18px;
  border-radius:999px;
}

.qtbe2-grid--unavailable .qtbe2-stepTitle{
  font-size:clamp(24px,3vw,34px);
  line-height:1.08;
  letter-spacing:-.03em;
}

.qtbe2-grid--unavailable .qtbe2-stepSub{
  font-size:13px;
  line-height:1.35;
  opacity:.78;
}

.qtbe2-grid--unavailable .qtbe2-unavail{
  display:grid;
  gap:12px;
}

.qtbe2-grid--unavailable .qtbe2-hero__desc{
  margin:0;
  font-size:14px;
  line-height:1.6;
  color:var(--qt-muted, #667085);
}

.qtbe2-grid--unavailable .qtbe2-form{
  display:grid;
  gap:10px;
}

.qtbe2-grid--unavailable .qtbe2-field{
  margin:0;
}

.qtbe2-grid--unavailable .qtbe2-field__l{
  display:none;
}

.qtbe2-grid--unavailable .qtbe2-field__i{
  min-height:54px;
  padding:0 18px;
  border-radius:18px;
  font-size:15px;
}

.qtbe2-grid--unavailable .qtbe2-btn{
  min-height:54px;
  border-radius:18px;
  font-size:15px;
  letter-spacing:.01em;
}

.qtbe2-grid--unavailable .qtbe2-unavail__row{
  display:grid;
  gap:12px;
  align-items:stretch;
}

.qtbe2-grid--unavailable .qtbe2-unavail__row--main{
  grid-template-columns:minmax(0,1fr) 220px;
}

.qtbe2-grid--unavailable .qtbe2-unavail__row--sub{
  grid-template-columns:1fr 1fr;
}

.qtbe2-grid--unavailable .qtbe2-unavail__meta{
  margin-top:2px;
  font-size:13px;
  line-height:1.55;
  color:var(--qt-muted, #667085);
}

#qtWaitlistMsg{
  margin-top:2px !important;
  padding:11px 13px !important;
  border-radius:14px !important;
  border:1px solid var(--line, rgba(148,163,184,.22));
  font-size:13px !important;
  line-height:1.45 !important;
}

#qtWaitlistMsg.is-ok{
  background:color-mix(in srgb, var(--qt-buy-accent, #5d74ff) 8%, white);
  border-color:color-mix(in srgb, var(--qt-buy-accent, #5d74ff) 22%, transparent);
  color:#16345f;
}

#qtWaitlistMsg.is-err{
  background:rgba(220,38,38,.06);
  border-color:rgba(220,38,38,.18);
  color:#991b1b;
}

@media (max-width:767px){
  .qtbe2-grid--unavailable .qtbe2-card__in{
    padding:16px 16px 15px;
  }

  .qtbe2-grid--unavailable .qtbe2-stepTitle{
    font-size:clamp(22px,7vw,30px);
  }

  .qtbe2-grid--unavailable .qtbe2-unavail__row--main,
  .qtbe2-grid--unavailable .qtbe2-unavail__row--sub{
    grid-template-columns:1fr;
  }

  .qtbe2-grid--unavailable .qtbe2-btn,
  .qtbe2-grid--unavailable .qtbe2-field__i{
    min-height:52px;
  }
}
.qtbe2-unavail{display:grid;gap:14px}
#qtWaitlistMsg.is-ok{
  border-color:color-mix(in srgb,var(--qt-buy-accent) 26%, transparent);
  background:color-mix(in srgb,var(--qt-buy-accent) 10%, transparent);
  color:var(--ink, #111);
}
#qtWaitlistMsg.is-err{
  border-color:rgba(239,68,68,.24);
  background:rgba(239,68,68,.08);
  color:var(--ink, #111);
}