@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;600&family=Instrument+Serif:ital@0;1&display=swap');

/* ── Reset scoped to plugin ── */
.gbff-wrap *, .gbff-wrap *::before, .gbff-wrap *::after {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

/* ── Root ── */
.gbff-wrap {
  font-family: 'Inter', Helvetica, Arial, sans-serif;
  background: #D5EAF8;
  color: #0A0A0A;
  padding: 80px 40px;
  min-height: 60vh;
  display: flex;
  align-items: center;
}

@media (max-width: 768px) {
  .gbff-wrap { padding: 50px 20px; }
}

.gbff-mono { font-family: 'JetBrains Mono', monospace; }

.gbff-container {
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

/* ── Utilities ── */
.gbff-hide { display: none !important; }

.gbff-fade-up  { animation: gbffFadeUp  0.6s cubic-bezier(0.16,1,0.3,1) forwards; }
.gbff-fade-in  { animation: gbffFadeIn  0.3s ease forwards; }

@keyframes gbffFadeUp  { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes gbffFadeIn  { from { opacity:0; } to { opacity:1; } }

/* ── Buttons ── */
.gbff-btn {
  transition: all .3s cubic-bezier(.65,0,.35,1);
  cursor: pointer;
  font-family: inherit;
  outline: none;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.gbff-btn-primary { background:#0F51A1; color:#fff; border:1px solid #0F51A1; }
.gbff-btn-primary:hover { background:#13338D; border-color:#13338D; transform:translateY(-1px); box-shadow:0 8px 24px rgba(15,81,161,.25); }
.gbff-btn-outline { background:transparent; color:#0F51A1; border:1px solid rgba(15,81,161,.2); }
.gbff-btn-outline:hover { background:#0F51A1; color:#fff; }
.gbff-btn-invert { background:#fff; color:#13338D; border:1px solid #fff; }
.gbff-btn-invert:hover { background:rgba(255,255,255,.9); }
.gbff-btn-ghost { background:transparent; color:#fff; border:1px solid rgba(255,255,255,.3); }
.gbff-btn-ghost:hover { background:rgba(255,255,255,.1); border-color:#fff; }

/* ── Start Step ── */
.gbff-start-header { font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:#0F51A1; font-weight:600; margin-bottom:24px; }
.gbff-main-title   { font-size:clamp(44px,5.8vw,80px); font-weight:700; line-height:.98; letter-spacing:-.03em; color:#0A0A0A; margin-bottom:28px; }
.gbff-main-title span { color:#0F51A1; font-style:italic; font-weight:400; }
.gbff-desc { font-size:17px; line-height:1.7; color:#4a4a4a; max-width:560px; margin:0 auto 40px; }
.gbff-start-btn { padding:18px 44px; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }

.gbff-variants-row { display:flex; justify-content:center; gap:14px; margin-top:64px; padding-top:40px; border-top:1px solid rgba(15,81,161,.15); flex-wrap:wrap; }
.gbff-variant-item { text-align:center; }
.gbff-variant-color { width:28px; height:28px; border-radius:50%; margin:0 auto 8px; }
.gbff-variant-name  { font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:#0F51A1; opacity:.6; }

/* ── Question Step ── */
.gbff-q-header { font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:#0F51A1; font-weight:600; margin-bottom:16px; }
.gbff-progress-row { display:flex; gap:6px; justify-content:center; margin-bottom:40px; }
.gbff-progress-dot { width:40px; height:2px; background:rgba(15,81,161,.2); transition:background .3s; }
.gbff-progress-dot.active { background:#0F51A1; }
.gbff-q-title { font-size:clamp(36px,4.8vw,60px); font-weight:700; line-height:1.05; letter-spacing:-.025em; color:#0A0A0A; margin-bottom:16px; }
.gbff-q-sub   { font-size:15px; line-height:1.6; color:#5a7d9e; max-width:520px; margin:0 auto 48px; }
.gbff-q-opts  { display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:680px; margin:0 auto; }
@media (max-width:600px) { .gbff-q-opts { grid-template-columns:1fr; } }

.gbff-opt { transition:all .25s cubic-bezier(.65,0,.35,1); cursor:pointer; background:#fff; border:1px solid rgba(15,81,161,.15); color:#0A0A0A; padding:22px 24px; display:flex; justify-content:space-between; align-items:center; text-align:left; font-family:inherit; }
.gbff-opt:hover { border-color:#0F51A1; transform:translateX(4px); box-shadow:0 4px 16px rgba(15,81,161,.08); }
.gbff-opt svg  { color:#0F51A1; opacity:.5; }
.gbff-opt-label  { font-size:16px; font-weight:600; margin-bottom:4px; }
.gbff-opt-detail { font-size:12px; color:#6a7a8a; }

.gbff-back-container { margin-top:32px; display:none; }
.gbff-back-btn  { background:transparent; border:none; color:#0F51A1; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; display:inline-flex; align-items:center; gap:8px; font-family:inherit; }
.gbff-icon { transform:rotate(180deg); display:inline-block; }

/* ── Result Step ── */
.gbff-result-wrapper { text-align:left; }
.gbff-res-header { text-align:center; margin-bottom:40px; }
.gbff-res-badge  { font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:#0F51A1; font-weight:600; margin-bottom:16px; }
.gbff-res-title  { font-family:'Instrument Serif',Georgia,serif; font-size:clamp(24px,2.8vw,36px); font-style:italic; color:#0A0A0A; font-weight:400; }

.gbff-res-card { background:#13338D; color:#fff; display:grid; grid-template-columns:280px 1fr; gap:44px; padding:48px; align-items:center; margin-bottom:20px; }
.gbff-res-img-wrap { aspect-ratio:1; display:flex; align-items:center; justify-content:center; padding:20px; }
.gbff-res-img { width:100%; height:100%; object-fit:contain; }
.gbff-res-tag { font-size:10px; letter-spacing:.15em; text-transform:uppercase; opacity:.6; margin-bottom:10px; font-weight:600; }
.gbff-res-full { font-size:clamp(40px,4.5vw,64px); font-weight:700; letter-spacing:-.025em; line-height:.95; margin-bottom:18px; }
.gbff-res-reason-box { padding:14px 0 16px; border-top:1px solid rgba(255,255,255,.15); border-bottom:1px solid rgba(255,255,255,.15); margin-bottom:20px; }
.gbff-res-reason-lbl { font-size:9px; letter-spacing:.15em; text-transform:uppercase; opacity:.5; margin-bottom:8px; font-weight:600; }
.gbff-res-reason { font-size:14px; line-height:1.6; opacity:.85; font-style:italic; }
.gbff-res-desc { font-size:15px; line-height:1.65; opacity:.75; margin-bottom:28px; }
.gbff-res-btns { display:flex; gap:10px; flex-wrap:wrap; }
.gbff-btn-learn { padding:14px 26px; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.gbff-btn-ws    { padding:13px 24px; font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }

@media (max-width:900px) {
  .gbff-res-card { grid-template-columns:1fr; padding:32px; gap:24px; text-align:center; }
  .gbff-res-img-wrap { max-width:280px; margin:0 auto; }
  .gbff-res-btns { justify-content:center; }
}

/* ── Runner-up ── */
.gbff-runner-card { background:#fff; border:1px solid rgba(15,81,161,.2); padding:28px; display:grid; grid-template-columns:80px 1fr auto; gap:28px; align-items:center; margin-bottom:20px; }
.gbff-runner-img-wrap { width:80px; height:80px; display:flex; align-items:center; justify-content:center; padding:8px; }
.gbff-runner-lbl    { font-size:9px; letter-spacing:.15em; text-transform:uppercase; color:#0F51A1; font-weight:600; margin-bottom:6px; opacity:.7; }
.gbff-runner-full   { font-size:20px; font-weight:700; letter-spacing:-.01em; margin-bottom:4px; color:#0A0A0A; }
.gbff-runner-reason { font-size:13px; color:#6a7a8a; line-height:1.5; }
.gbff-runner-btn    { padding:10px 20px; font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; }

@media (max-width:600px) {
  .gbff-runner-card { grid-template-columns:1fr; text-align:center; gap:16px; padding:20px; }
  .gbff-runner-img-wrap, .gbff-runner-btn { margin:0 auto; }
}

/* ── Email Section ── */
.gbff-email-sec     { background:#0A0A0A; color:#fff; padding:24px; margin-bottom:20px; }
.gbff-email-prompt  { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.gbff-email-title   { font-size:14px; font-weight:600; margin-bottom:4px; }
.gbff-email-sub     { font-size:12px; opacity:.6; }
.gbff-email-btn     { padding:10px 20px; font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; }

.gbff-email-form-title { font-size:14px; font-weight:600; margin-bottom:4px; }
.gbff-email-form-sub   { font-size:11px; opacity:.5; margin-bottom:16px; }
.gbff-email-input-row  { display:flex; border-bottom:1px solid rgba(255,255,255,.3); align-items:center; }
.gbff-email-input  { flex:1; background:transparent; border:none; outline:none; color:#fff; font-size:15px; font-family:inherit; padding:12px 0; }
.gbff-email-input::placeholder { color: rgba(255,255,255,.35); }
.gbff-email-submit { background:transparent; border:none; color:#fff; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; padding:12px 0 12px 20px; font-family:inherit; }
.gbff-email-submit:disabled { opacity:.4; cursor:not-allowed; }

.gbff-email-success { display:flex; align-items:center; gap:12px; }
.gbff-success-icon  { width:28px; height:28px; border-radius:50%; background:#0F51A1; color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.gbff-success-title { font-size:14px; font-weight:600; margin-bottom:2px; }
.gbff-success-sub   { font-size:12px; opacity:.6; }
.gbff-success-email { color:#fff; font-weight:600; }

/* ── Bottom Row ── */
.gbff-bottom-row { display:flex; justify-content:space-between; align-items:center; padding-top:20px; border-top:1px solid rgba(15,81,161,.15); flex-wrap:wrap; gap:16px; }
.gbff-user-answers { font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#0F51A1; opacity:.7; font-weight:600; }
.gbff-retake-btn   { background:transparent; border:none; color:#0F51A1; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; font-family:inherit; }

@media (max-width:600px) {
  .gbff-email-prompt { flex-direction:column; text-align:center; }
  .gbff-bottom-row   { flex-direction:column; text-align:center; }
}