/* BLRB Digital Onboarding — self-contained styling (no theme required) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=Space+Grotesk:wght@300;500;700&display=swap');

:root{
  --bg:#030014;
  --text:#ffffff;
  --muted:rgba(255,255,255,0.65);

  --brand-primary:#6366f1;
  --brand-secondary:#a855f7;
  --brand-accent:#00d4ff;

  --card-bg: rgba(255,255,255,0.03);
  --card-border: rgba(255,255,255,0.10);

  --shadow: 0 24px 80px rgba(0,0,0,0.55);
  --radius: 22px;

  --focus: 0 0 0 3px rgba(99,102,241,0.35);
}

.blrbd-ob-root, .blrbd-ob-root * { box-sizing: border-box; }
body.blrbd-onboarding-page{ margin:0 !important; padding:0 !important; background: var(--bg) !important; }
body.blrbd-onboarding-page > header,
body.blrbd-onboarding-page > footer,
body.blrbd-onboarding-page #masthead,
body.blrbd-onboarding-page #colophon,
body.blrbd-onboarding-page .site-header,
body.blrbd-onboarding-page .site-footer,
body.blrbd-onboarding-page header.wp-block-template-part,
body.blrbd-onboarding-page footer.wp-block-template-part,
body.blrbd-onboarding-page .wp-site-blocks > header,
body.blrbd-onboarding-page .wp-site-blocks > footer{ display:none !important; }
body.blrbd-onboarding-page main,
body.blrbd-onboarding-page #page,
body.blrbd-onboarding-page #content{ margin:0 !important; padding:0 !important; max-width:none !important; }

.blrbd-ob-root{
  min-height: 100vh;
  width: 100%;
  position: relative;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  overflow: hidden;
}

.blrbd-ob-root ::selection{ background: rgba(99,102,241,0.35); color: #fff; }

/* Background */
.blrbd-ob-canvas{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.8;
}
.blrbd-ob-bg{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.blrbd-ob-grid{
  position: absolute;
  inset: 0;
  background-size: 44px 44px;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
  mask-image: radial-gradient(circle at center, #000 38%, transparent 80%);
  opacity: 0.9;
}
.blrbd-ob-orb{
  position: absolute;
  border-radius: 999px;
  filter: blur(110px);
  opacity: 0.40;
  transform: translateZ(0);
  animation: blrbdPulse 9s ease-in-out infinite;
}
.blrbd-ob-orb.orb-a{
  width: 420px; height: 420px;
  left: -110px; top: -120px;
  background: rgba(99,102,241,1);
}
.blrbd-ob-orb.orb-b{
  width: 560px; height: 560px;
  right: -160px; bottom: -180px;
  background: rgba(168,85,247,1);
  animation-delay: 1.2s;
}
@keyframes blrbdPulse{
  0%, 100%{ transform: scale(1); opacity: .35; }
  50%{ transform: scale(1.08); opacity: .45; }
}

/* Header */
.blrbd-ob-header{
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 18px 18px 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}
.blrbd-ob-brand{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 999px;
  background: rgba(15,23,42,0.70);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.15);
}
.blrbd-ob-logo{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--brand-accent), var(--brand-primary));
  color: #03101a;
}
.blrbd-ob-brandname{
  font-family: "Space Grotesk", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.blrbd-ob-tagline{
  font-size: 12px;
  color: rgba(255,255,255,0.70);
  margin-top: 2px;
}
.blrbd-ob-progress{
  flex: 1;
  max-width: 560px;
  padding: 12px 14px;
  border-radius: 999px;
  background: rgba(15,23,42,0.70);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.15);
}
.blrbd-ob-progress-meta{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: rgba(255,255,255,0.75);
  margin-bottom: 8px;
}
.blrbd-ob-steptext{
  font-family: "Space Grotesk", ui-monospace, monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.blrbd-ob-progressbar{
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
}
.blrbd-ob-progressfill{
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--brand-accent), var(--brand-secondary), var(--brand-primary));
  box-shadow: 0 0 18px rgba(99,102,241,0.22);
  border-radius: 999px;
  transition: width .28s cubic-bezier(0.16,1,0.3,1);
}

/* Main layout */
.blrbd-ob-main{
  position: relative;
  z-index: 2;
  padding: 26px 18px 60px;
  display:flex;
  justify-content:center;
}
.blrbd-ob-card{
  width: min(880px, 100%);
  border-radius: var(--radius);
  background: var(--card-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.blrbd-ob-cardhead{
  padding: 34px 28px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent);
}
.blrbd-ob-title{
  font-size: clamp(30px, 4vw, 44px);
  margin: 0 0 10px;
  font-weight: 900;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.70) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.blrbd-ob-subtitle{
  margin: 0;
  color: rgba(255,255,255,0.70);
  font-size: 15px;
  font-weight: 300;
}

/* Form */
.blrbd-ob-form{
  padding: 24px 28px 26px;
}
.blrbd-ob-hp{ position:absolute; left:-9999px; opacity:0; }

.blrbd-ob-steps{ min-height: 340px; }
.blrbd-step{ display:none; animation: blrbdFadeUp .35s cubic-bezier(0.16,1,0.3,1); }
.blrbd-step.is-active{ display:block; }
@keyframes blrbdFadeUp{
  from{ opacity:0; transform: translateY(14px) scale(0.99); filter: blur(8px); }
  to{ opacity:1; transform: translateY(0) scale(1); filter: blur(0); }
}

.blrbd-q{ margin-bottom: 18px; }
.blrbd-q-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family: "Space Grotesk", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}
.blrbd-q-title{
  margin: 10px 0 6px;
  font-size: 26px;
  letter-spacing: -0.02em;
  font-weight: 800;
}
.blrbd-q-sub{
  margin: 0;
  color: rgba(255,255,255,0.65);
  font-size: 14px;
  font-weight: 300;
}

/* Choices */
.blrbd-choice-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 16px;
}
@media (max-width: 720px){
  .blrbd-ob-header{ flex-direction: column; align-items: stretch; }
  .blrbd-ob-progress{ max-width: 100%; }
  .blrbd-choice-grid{ grid-template-columns: 1fr; }
  .blrbd-ob-form{ padding: 18px 16px 18px; }
  .blrbd-ob-cardhead{ padding: 26px 18px 6px; }
}

.blrbd-choice{
  position: relative;
  display:flex;
  align-items:flex-start;
  gap: 14px;
  padding: 16px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  cursor: pointer;
  transition: transform .2s cubic-bezier(0.16,1,0.3,1), border-color .2s, background .2s;
  outline: none;
}
.blrbd-choice:hover{
  transform: translateY(-2px);
  border-color: rgba(99,102,241,0.45);
  background: rgba(255,255,255,0.06);
}
.blrbd-choice:focus-within{ box-shadow: var(--focus); }
.blrbd-choice input{
  appearance:none;
  width: 18px; height: 18px;
  margin-top: 3px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.35);
  background: transparent;
  flex: 0 0 auto;
}
.blrbd-choice input:checked{
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 4px rgba(0,212,255,0.12);
  background: radial-gradient(circle at 50% 50%, var(--brand-accent) 0 45%, transparent 46% 100%);
}
.blrbd-choice-title{ font-weight: 900; letter-spacing: -0.02em; }
.blrbd-choice-desc{ color: rgba(255,255,255,0.65); font-size: 13px; margin-top: 2px; }
.blrbd-choice-chip{
  position:absolute;
  right: 12px; top: 12px;
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 999px;
  font-family: "Space Grotesk", ui-monospace, monospace;
  background: rgba(99,102,241,0.18);
  border: 1px solid rgba(99,102,241,0.28);
  color: rgba(255,255,255,0.85);
}
.blrbd-choice-chip.alt{
  background: rgba(168,85,247,0.16);
  border: 1px solid rgba(168,85,247,0.26);
}

/* Inputs */
.blrbd-field{ margin-top: 14px; }
.blrbd-field label{
  display:block;
  margin-bottom: 8px;
  font-size: 13px;
  color: rgba(255,255,255,0.80);
  font-weight: 600;
}
.blrbd-field input,
.blrbd-field select,
.blrbd-field textarea{
  width: 100%;
  padding: 13px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.35);
  color: #fff;
  outline: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.blrbd-field textarea{ resize: vertical; min-height: 120px; }
.blrbd-field input::placeholder,
.blrbd-field textarea::placeholder{ color: rgba(255,255,255,0.35); }
.blrbd-field input:focus,
.blrbd-field select:focus,
.blrbd-field textarea:focus{
  border-color: rgba(99,102,241,0.6);
  box-shadow: var(--focus);
}
.blrbd-help{
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}
.blrbd-grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 720px){
  .blrbd-grid-2{ grid-template-columns: 1fr; }
}

/* Privacy box */
.blrbd-privacy{
  margin-top: 16px;
  display:flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 14px;
  border-radius: 16px;
  background: rgba(15,23,42,0.60);
  border: 1px solid rgba(255,255,255,0.10);
}
.blrbd-lock{ font-size: 18px; margin-top: 1px; }
.blrbd-privacy-title{ font-weight: 800; letter-spacing: -0.01em; }
.blrbd-privacy-sub{ font-size: 12px; color: rgba(255,255,255,0.65); margin-top: 2px; }

/* Actions */
.blrbd-ob-actions{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding-top: 18px;
  margin-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.blrbd-ob-actions-right{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
  justify-content:flex-end;
}
.blrbd-btn{
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color:#fff;
  padding: 12px 16px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 700;
  transition: transform .15s cubic-bezier(0.16,1,0.3,1), background .15s, border-color .15s;
  text-decoration: none;
  display:inline-flex;
  align-items:center;
  gap: 10px;
  user-select: none;
}
.blrbd-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.22);
}
.blrbd-btn:active{ transform: translateY(0); }
.blrbd-btn:focus{ outline: none; box-shadow: var(--focus); }
.blrbd-btn[disabled]{ opacity: .45; cursor:not-allowed; transform:none !important; }
.blrbd-btn.primary{
  border-color: rgba(99,102,241,0.35);
  background: linear-gradient(90deg, rgba(99,102,241,0.95), rgba(168,85,247,0.92));
  box-shadow: 0 18px 60px rgba(99,102,241,0.18);
  color: #07031d;
}
.blrbd-btn.primary:hover{ border-color: rgba(0,212,255,0.55); }
.blrbd-btn.ghost{
  background: transparent;
}
.is-hidden{ display:none !important; }

.blrbd-ob-status{
  margin-top: 12px;
  min-height: 22px;
  font-size: 13px;
  color: rgba(255,255,255,0.75);
}
.blrbd-ob-status.error{ color: rgba(255, 107, 107, 0.95); }
.blrbd-ob-status.ok{ color: rgba(0, 212, 255, 0.95); }

/* Success */
.blrbd-ob-success{ width: min(880px, 100%); }
.success-card{ padding: 34px 28px; }
.success-badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(0,212,255,0.14);
  border: 1px solid rgba(0,212,255,0.22);
  font-family: "Space Grotesk", ui-monospace, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 11px;
}
.success-title{
  margin: 14px 0 6px;
  font-size: 34px;
  letter-spacing: -0.03em;
  font-weight: 900;
}
.success-sub{ margin: 0 0 18px; color: rgba(255,255,255,0.70); }
.success-actions{ display:flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.success-meta{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.65);
  font-size: 13px;
}

/* Footer */
.blrbd-ob-footer{
  position: relative;
  z-index: 2;
  padding: 12px 18px 18px;
  color: rgba(255,255,255,0.50);
  font-size: 12px;
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 12px;
}
.blrbd-ob-footlinks{
  display:flex;
  align-items:center;
  gap: 10px;
}
.blrbd-ob-footlinks a{
  color: rgba(255,255,255,0.50);
  text-decoration: none;
}
.blrbd-ob-footlinks a:hover{ color: rgba(255,255,255,0.75); }
.blrbd-ob-footlinks .dot{ opacity: .5; }


/* Invalid flash */
.blrbd-ob-invalid{ box-shadow: 0 0 0 3px rgba(255,107,107,0.35) !important; border-color: rgba(255,107,107,0.55) !important; }