/* ── ONBOARDING PAGE ── */
.onboarding {
  padding-top: 64px;
  min-height: 100vh;
  background: var(--white);
}

/* ── "OTHER" INLINE DETAIL (industry step) ── */
.ob-other-detail {
  max-width: 560px;
  margin: 18px auto 0;
  padding: 16px 20px;
  background: var(--gray-50, #fafafa);
  border: 1px solid var(--gray-200, #eee);
  border-radius: 14px;
  animation: obOtherFadeIn .25s ease;
}
.ob-other-detail-label {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gray-500, #888);
  margin-bottom: 8px;
}
.ob-other-detail input {
  width: 100%;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--black);
  padding: 6px 0;
  outline: none;
  border-bottom: 1px solid var(--gray-300, #ddd);
  transition: border-color .15s ease;
}
.ob-other-detail input:focus { border-bottom-color: var(--black); }
.ob-other-detail input::placeholder { color: var(--gray-400, #aaa); font-weight: 300; }
@keyframes obOtherFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* ── LEGAL NOTE (under step 1 Continue) ── */
.ob-legal-note {
  text-align: center;
  font-size: 12px;
  font-weight: 300;
  color: var(--gray-500, #888);
  line-height: 1.6;
  margin: 16px auto 0;
  max-width: 520px;
}
.ob-legal-note a {
  color: var(--gray-700, #333);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ob-legal-note a:hover { color: var(--black); }

/* ── PROGRESS BAR ── */
.ob-progress {
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gray-100);
  z-index: 99;
}

.ob-progress-fill {
  height: 100%;
  background: var(--accent);
  width: 25%;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── STEP INDICATOR ── */
.ob-steps-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 32px 20px 0;
  max-width: 560px;
  margin: 0 auto;
}

.ob-step-dot {
  width: 28px;
  height: 28px;
}

.ob-step-dot span {
  font-size: 11px;
}

.ob-step-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gray-100);
  border: 2px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-400);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.ob-step-dot.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--black);
}

.ob-step-dot.completed {
  background: var(--black);
  border-color: var(--black);
  color: var(--white);
}

.ob-step-line {
  flex: 1;
  height: 2px;
  background: var(--gray-200);
  transition: background 0.4s ease;
}

.ob-step-line.filled {
  background: var(--black);
}

/* ── STEP CONTAINER ── */
.ob-container {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}

.ob-step {
  display: none;
  padding: 48px 0 100px;
}

.ob-step.active {
  display: block;
}

/* ── FADE ANIMATION ── */
.ob-fade {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.ob-fade.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Fade out */
.ob-step.exiting .ob-fade {
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* ── TYPOGRAPHY ── */
.ob-eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-400);
  margin-bottom: 16px;
}

.ob-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -2px;
  color: var(--black);
  margin-bottom: 12px;
}

.ob-title span {
  color: var(--gray-400);
}

.ob-subtitle {
  font-size: 16px;
  font-weight: 300;
  color: var(--gray-600);
  line-height: 1.6;
  margin-bottom: 40px;
}

/* ── FORM FIELDS ── */
.ob-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ob-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.ob-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ob-field label {
  font-size: 13px;
  font-weight: 500;
  color: var(--black);
}

.ob-field label .req {
  color: #ef4444;
}

.ob-field label .opt {
  color: var(--gray-400);
  font-weight: 400;
}

.ob-field input,
.ob-field textarea {
  font-family: var(--font-body);
  font-size: 15px;
  padding: 12px 16px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--black);
  outline: none;
  transition: border-color var(--transition);
  resize: none;
}

.ob-field input:focus,
.ob-field textarea:focus {
  border-color: var(--black);
}

.ob-field input::placeholder,
.ob-field textarea::placeholder {
  color: var(--gray-400);
}

/* Optional-step "skip the rest" link + warning notice */
.ob-skip-finish {
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-600);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 8px 4px;
  transition: color 0.15s ease;
}
.ob-skip-finish:hover { color: var(--black); }
.ob-notice.ob-notice-warn {
  border: 1px solid #fecaca;
  background: #fef2f2;
}

/* Geolocation helper on the base-location field */
.ob-loc-geo-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.ob-loc-geo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--black);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 100px;
  padding: 8px 15px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.ob-loc-geo:hover { border-color: var(--black); background: var(--gray-50); }
.ob-loc-geo:disabled { opacity: 0.6; cursor: default; }
.ob-loc-geo-msg { font-size: 12.5px; color: var(--gray-600); }

/* Base-location autocomplete */
/* z-index lifts the whole field above later .ob-fade siblings — their
   retained transform makes each one a stacking context that would
   otherwise paint the Work Radius UI over the open dropdown. */
.ob-field-loc { position: relative; z-index: 40; }
.ob-loc-suggest {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  margin-top: 6px;
  z-index: 30;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  box-shadow: 0 20px 48px -18px rgba(0,0,0,0.32);
  overflow: hidden;
  max-height: 300px;
  overflow-y: auto;
}
.ob-loc-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 16px;
  border: none;
  background: none;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--black);
  cursor: pointer;
  transition: background 0.12s ease;
}
.ob-loc-item:hover,
.ob-loc-item.active { background: var(--gray-50); }
.ob-loc-attr {
  padding: 8px 16px;
  border-top: 1px solid var(--gray-100);
  font-size: 11px;
  color: var(--gray-400);
}

/* Inline validation warning (e.g. cert number over 7 digits) */
.ob-field input.ob-input-error,
.ob-field input.ob-input-error:focus { border-color: #dc2626; }
.ob-field-warn {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: #dc2626;
}

/* ── CHIP SELECT GRID ── */
.ob-select-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.ob-chip {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--gray-600);
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  padding: 14px 18px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ob-chip:hover {
  border-color: var(--gray-600);
  color: var(--black);
}

.ob-chip.selected {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
  font-weight: 500;
}

/* ── Draft-resumed banner ── */
.ob-draft-banner {
  max-width: 720px;
  margin: 16px auto 0;
  padding: 10px 18px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 100px;
  font-size: 13px;
  color: var(--gray-600);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.ob-draft-banner.is-visible { opacity: 1; transform: translateY(0); }
.ob-draft-banner a {
  color: var(--gray-600);
  text-decoration: underline;
  font-size: 12px;
}
.ob-draft-banner a:hover { color: var(--black); }

/* ── DRONE REGISTRATION CARDS (Step 5) ── */
.ob-drone-reg-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
}

.ob-drone-reg-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  padding: 18px 20px;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
.ob-drone-reg-card.is-skipped {
  opacity: 0.5;
  background: var(--gray-50);
}

.ob-drone-reg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gray-100);
}
.ob-drone-reg-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--black);
}
.ob-drone-reg-skip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--gray-600);
  cursor: pointer;
  user-select: none;
}
.ob-drone-reg-skip input { accent-color: var(--black); width: 14px; height: 14px; cursor: pointer; }

.ob-drone-reg-body {
  display: grid;
  grid-template-columns: 1.4fr 1.2fr 1fr;
  gap: 14px;
}
.ob-drone-reg-field { display: flex; flex-direction: column; gap: 6px; }
.ob-drone-reg-field label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray-600);
}
.ob-drone-reg-field .ob-opt {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--gray-400);
}
.ob-drone-reg-input {
  font-family: inherit;
  font-size: 14px;
  padding: 10px 12px;
  border: 1.5px solid var(--gray-200);
  border-radius: 10px;
  background: var(--white);
  color: var(--black);
  outline: none;
  transition: border-color 0.2s ease;
}
.ob-drone-reg-input:focus { border-color: var(--black); }
.ob-drone-reg-input:disabled {
  background: var(--gray-100);
  color: var(--gray-400);
  cursor: not-allowed;
}
.ob-drone-reg-input[type="text"] {
  font-family: 'SF Mono', Monaco, monospace;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

@media (max-width: 700px) {
  .ob-drone-reg-body { grid-template-columns: 1fr; }
}

/* "Add custom" chip — distinct from predefined chips */
.ob-chip-other {
  border-style: dashed !important;
  border-color: var(--gray-300, #d4d4d4) !important;
  color: var(--gray-600);
  background: var(--white);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}
.ob-chip-other:hover {
  border-color: var(--black) !important;
  border-style: solid !important;
  color: var(--black);
  background: var(--gray-50);
}
.ob-chip-other.is-open {
  border-color: var(--black) !important;
  border-style: solid !important;
  background: var(--gray-100);
  color: var(--black);
}
.ob-chip-other-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: var(--gray-100);
  border-radius: 50%;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}
.ob-chip-other.is-open .ob-chip-other-icon {
  background: var(--black);
  color: var(--white);
}

/* Custom-services input panel */
.ob-custom-panel {
  margin-top: 20px;
  padding: 16px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  animation: panelSlideIn 0.25s ease;
}
@keyframes panelSlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.ob-custom-panel-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.ob-custom-panel input {
  flex: 1;
  font-family: inherit;
  font-size: 15px;
  padding: 12px 16px;
  border: 1.5px solid var(--gray-200);
  border-radius: 12px;
  background: var(--white);
  color: var(--black);
  outline: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.ob-custom-panel input:focus { border-color: var(--black); }
.ob-custom-panel input.shake {
  border-color: #dc2626;
  animation: shakeInput 0.3s ease;
}
@keyframes shakeInput {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.ob-custom-add {
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--white);
  background: var(--black);
  border: none;
  padding: 0 22px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.ob-custom-add:hover { background: var(--gray-800); }
.ob-custom-hint {
  font-size: 12px;
  color: var(--gray-600);
  margin: 10px 4px 0;
  line-height: 1.5;
}
.ob-custom-hint kbd {
  font-family: inherit;
  font-size: 11px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  padding: 1px 6px;
  font-weight: 600;
  color: var(--black);
}
.ob-custom-x-demo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gray-200);
  color: var(--gray-600);
  font-size: 11px;
  vertical-align: middle;
}

/* Custom-service chips that get added inline (already .selected) */
.ob-chip-custom {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding-right: 8px !important;
  animation: chipPop 0.25s ease;
}
@keyframes chipPop {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}
.ob-chip-custom-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ob-chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  color: var(--white);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
  flex-shrink: 0;
}
.ob-chip-x:hover { background: rgba(255,255,255,0.32); }

/* Lucide icons inside chips */
.ob-chip svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke-width: 1.75;
}

.ob-notice-icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.75;
  display: inline-block;
  vertical-align: middle;
}

/* ── SECTIONS WITHIN STEPS ── */
.ob-section-label {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 16px;
  letter-spacing: -0.3px;
}

.ob-certs-section {
  margin-bottom: 36px;
}

/* ── RATE INPUT ── */
.ob-pricing-section {
  margin-top: 8px;
}

.ob-rate-input {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 0 16px;
  max-width: 240px;
  transition: border-color var(--transition);
}

.ob-rate-input:focus-within {
  border-color: var(--black);
}

.ob-rate-prefix {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--black);
}

.ob-rate-input input {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  padding: 12px 8px;
  border: none;
  outline: none;
  background: none;
  color: var(--black);
  width: 100px;
}

.ob-rate-input input::placeholder {
  color: var(--gray-400);
}

.ob-rate-suffix {
  font-size: 14px;
  color: var(--gray-400);
  font-weight: 400;
}

/* ── PER-SERVICE PRICING ── */
.ob-service-price-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}

.ob-service-price-row {
  display: grid;
  grid-template-columns: minmax(160px, 1.2fr) 150px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition);
}
.ob-service-price-remove {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border: 1px solid var(--gray-200);
  border-radius: 50%;
  background: var(--white);
  color: var(--gray-600);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ob-service-price-remove:hover { background: #dc2626; color: #fff; border-color: #dc2626; }

.ob-service-price-row:focus-within {
  border-color: var(--black);
}

.ob-service-price-name {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ob-service-price-model {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 10px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--black);
  outline: none;
  cursor: pointer;
  transition: border-color var(--transition);
}

.ob-service-price-model:focus {
  border-color: var(--black);
}

.ob-service-price-amount-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ob-service-price-amount {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  width: 130px;
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 0 12px;
  transition: border-color var(--transition);
}

.ob-service-price-amount:focus-within {
  border-color: var(--black);
}

.ob-service-price-amount .ob-rate-prefix {
  font-size: 16px;
}

.ob-service-price-amount input {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  padding: 8px 6px;
  border: none;
  outline: none;
  background: none;
  color: var(--black);
  width: 100%;
  min-width: 0;
}

.ob-service-price-amount input::placeholder {
  color: var(--gray-400);
}

.ob-service-price-suffix {
  font-size: 13px;
  color: var(--gray-400);
  font-weight: 500;
  white-space: nowrap;
}

.ob-service-price-unit {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 10px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--black);
  outline: none;
  width: 90px;
  transition: border-color var(--transition);
}

.ob-service-price-unit:focus {
  border-color: var(--black);
}

.ob-service-price-quote {
  font-size: 13px;
  color: var(--gray-400);
  font-style: italic;
}

.ob-pricing-fallback {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--gray-100);
}

@media (max-width: 720px) {
  .ob-service-price-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* ── ACTIONS ── */
.ob-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--gray-100);
}

/* ── SUCCESS SCREEN ── */
.ob-success-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 60px;
}

.ob-success-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--black);
  color: var(--white);
  font-size: 36px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
}

/* ── LICENSE CARD ── */
.ob-license-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
}

.ob-license-icon {
  font-size: 32px;
  flex-shrink: 0;
}

.ob-license-label {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 2px;
}

.ob-license-helper {
  font-size: 13px;
  color: var(--gray-400);
  font-weight: 300;
}

/* ── NOTICE ── */
.ob-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 18px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--gray-600);
  font-weight: 300;
  line-height: 1.5;
}

.ob-notice-icon {
  flex-shrink: 0;
  font-size: 16px;
}

/* ── RADIUS SLIDER ── */
.ob-radius-control {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ob-radius-control input[type="range"] {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 100px;
  outline: none;
  cursor: pointer;
  /* Filled portion (black) up to --fill, then gray track. JS sets --fill on input. */
  background: linear-gradient(
    to right,
    var(--black) 0%,
    var(--black) var(--fill, 0%),
    var(--gray-200) var(--fill, 0%),
    var(--gray-200) 100%
  );
}

/* Firefox: native filled-progress pseudo-element handles the black portion */
.ob-radius-control input[type="range"]::-moz-range-track {
  height: 6px;
  background: var(--gray-200);
  border-radius: 100px;
  border: none;
}
.ob-radius-control input[type="range"]::-moz-range-progress {
  height: 6px;
  background: var(--black);
  border-radius: 100px;
}

.ob-radius-control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  background: var(--black);
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid var(--white);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  margin-top: -8px; /* center on 6px track */
}
.ob-radius-control input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  background: var(--black);
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid var(--white);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.ob-radius-value {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--black);
  white-space: nowrap;
  min-width: 80px;
}

.ob-radius-marks {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--gray-400);
  margin-top: 4px;
  padding: 0 2px;
}

/* ── TOGGLES ── */
.ob-toggles {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
}

.ob-toggle {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
}

.ob-toggle input {
  display: none;
}

.ob-toggle-track {
  width: 44px;
  height: 24px;
  background: var(--gray-200);
  border-radius: 100px;
  position: relative;
  transition: background 0.25s ease;
  flex-shrink: 0;
}

.ob-toggle-track::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  background: var(--white);
  border-radius: 50%;
  top: 3px;
  left: 3px;
  transition: transform 0.25s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.ob-toggle input:checked + .ob-toggle-track {
  background: var(--accent);
}

.ob-toggle input:checked + .ob-toggle-track::after {
  transform: translateX(20px);
}

.ob-toggle-label {
  font-size: 14px;
  color: var(--gray-600);
  font-weight: 400;
  line-height: 1.4;
}

/* ── DRONE DROPDOWN ── */
.ob-drone-section {
  margin-bottom: 32px;
  position: relative;
  z-index: 1;
}

.ob-drone-section:first-of-type {
  z-index: 10;
}

.ob-section-desc {
  font-size: 13px;
  color: var(--gray-400);
  font-weight: 300;
  margin-top: -8px;
  margin-bottom: 14px;
}

.ob-dropdown-wrap {
  position: relative;
}

.ob-dropdown-search {
  font-family: var(--font-body);
  font-size: 15px;
  padding: 12px 16px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--black);
  outline: none;
  width: 100%;
  transition: border-color var(--transition);
}

.ob-dropdown-search:focus {
  border-color: var(--black);
}

.ob-dropdown-search::placeholder {
  color: var(--gray-400);
}

.ob-dropdown-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  max-height: 240px;
  overflow-y: auto;
  z-index: 50;
  box-shadow: 0 12px 36px rgba(0,0,0,0.15);
  display: none;
}

.ob-dropdown-list.open {
  display: block;
}

.ob-dropdown-item {
  padding: 10px 16px;
  font-size: 14px;
  color: var(--gray-600);
  background: var(--white);
  cursor: pointer;
  transition: background 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ob-dropdown-item:hover {
  background: var(--gray-100);
  color: var(--black);
}

.ob-dropdown-item.selected {
  background: var(--black);
  color: var(--white);
}

.ob-dropdown-item .ob-check {
  display: none;
}

.ob-dropdown-item.selected .ob-check {
  display: inline;
}

/* ── SELECTED TAGS ── */
.ob-selected-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  min-height: 12px;
}

.ob-selected-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--white);
  background: var(--black);
  padding: 6px 12px;
  border-radius: 100px;
}

.ob-tag-remove {
  cursor: pointer;
  opacity: 0.6;
  font-size: 14px;
  transition: opacity 0.2s;
}

.ob-tag-remove:hover {
  opacity: 1;
}

/* ── GALLERY ── */
.ob-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.ob-gallery-slot {
  aspect-ratio: 1;
  border: 2px dashed var(--gray-200);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--gray-50);
}

.ob-gallery-slot:hover {
  border-color: var(--black);
  background: var(--white);
}

.ob-gallery-slot.filled {
  border-style: solid;
  border-color: var(--gray-200);
  background: var(--white);
  position: relative;
  overflow: hidden;
}

.ob-gallery-plus {
  font-size: 28px;
  color: var(--gray-400);
  font-weight: 300;
  line-height: 1;
  margin-bottom: 4px;
}

.ob-gallery-hint {
  font-size: 11px;
  color: var(--gray-400);
  font-weight: 400;
}

.ob-gallery-note {
  font-size: 12px;
  color: var(--gray-400);
  margin-top: 12px;
  font-weight: 300;
}

.ob-gallery-input {
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-top: 1px solid var(--gray-200);
  font-family: var(--font-body);
  font-size: 12px;
  outline: none;
  background: var(--white);
  color: var(--black);
  position: absolute;
  bottom: 0;
  left: 0;
}

.ob-gallery-preview {
  font-size: 11px;
  color: var(--gray-600);
  padding: 8px;
  text-align: center;
  word-break: break-all;
}

.ob-gallery-type-icon {
  font-size: 24px;
  margin-bottom: 4px;
}

/* Upload / paste-link chooser */
.ob-gallery-slot.choosing { border-style: solid; border-color: var(--black); background: var(--white); }
.ob-gallery-choose {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  width: 100%;
}
.ob-gallery-btn {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--white);
  background: var(--black);
  border: none;
  border-radius: 100px;
  padding: 9px 12px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.ob-gallery-btn:hover { background: var(--gray-800); }
.ob-gallery-btn.ghost { color: var(--black); background: var(--white); border: 1px solid var(--gray-200); }
.ob-gallery-btn.ghost:hover { border-color: var(--black); background: var(--gray-50); }

/* Uploaded media preview */
.ob-gallery-media {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.ob-gallery-status {
  position: absolute;
  left: 8px; bottom: 8px;
  z-index: 2;
  font-size: 11px;
  font-weight: 600;
  color: var(--white);
  background: rgba(10,10,10,0.72);
  padding: 4px 9px;
  border-radius: 100px;
}
.ob-gallery-remove {
  position: absolute;
  top: 6px; right: 6px;
  z-index: 3;
  width: 24px; height: 24px;
  border: none; border-radius: 50%;
  background: rgba(10,10,10,0.68);
  color: var(--white);
  font-size: 11px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.ob-gallery-remove:hover { background: #dc2626; }

/* ── CERTIFICATE UPLOAD ── */
.ob-upload-section {
  margin-top: 4px;
}

.ob-upload-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--black);
  display: block;
  margin-bottom: 6px;
}

.ob-upload-label .req {
  color: #ef4444;
}

.ob-upload-zone {
  border: 2px dashed var(--gray-200);
  border-radius: var(--radius-md);
  padding: 36px 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease;
  background: var(--gray-50);
}

.ob-upload-zone:hover {
  border-color: var(--black);
  background: var(--white);
}

.ob-upload-zone.dragover {
  border-color: var(--black);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}

.ob-upload-zone.uploaded {
  border-style: solid;
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.04);
}

.ob-upload-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.ob-upload-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--black);
  margin-bottom: 4px;
}

.ob-upload-hint {
  font-size: 12px;
  color: var(--gray-400);
  font-weight: 300;
}

/* ── RETAKE BANNER (verifier couldn't read the cert photos) ── */
.ob-retake-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 22px;
  border-radius: var(--radius-md);
  background: #fff4ed;
  border: 1px solid #f6b98a;
  color: #7a3d12;
  font-size: 14px;
  line-height: 1.5;
}
.ob-retake-banner strong { display: block; margin-bottom: 2px; }
.ob-retake-icon { display: inline-flex; color: #e07a2a; flex-shrink: 0; margin-top: 1px; }
.ob-retake-icon svg { width: 20px; height: 20px; }

/* ── CAPTURE GUIDANCE + "TAKE A PHOTO" ── */
.ob-capture-tips {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 20px;
  border-radius: var(--radius-md);
  background: rgba(0, 230, 118, 0.07);
  border: 1px solid rgba(0, 230, 118, 0.28);
  font-size: 13px;
  line-height: 1.45;
  color: var(--black);
}
.ob-capture-tips-icon {
  display: inline-flex;
  color: var(--accent-strong);
  flex-shrink: 0;
  margin-top: 1px;
}
.ob-capture-tips-icon svg { width: 18px; height: 18px; }

/* ── MOBILE GUIDED SCAN BLOCK ──
   Camera capture is a mobile-only affordance. On mobile the scan block is the
   primary path (guided front→back with our framing camera) and the file-upload
   zones are hidden until the pilot taps "upload saved photos". On desktop the
   scan block is hidden and the upload zones are the only path. */
.ob-scan-block { display: none; }
body.is-mobile .ob-scan-block {
  display: block;
  text-align: center;
  padding: 28px 20px;
  margin-bottom: 20px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  background: var(--gray-50);
}
.ob-scan-icon { color: var(--accent-strong); margin-bottom: 8px; }
.ob-scan-icon svg { width: 30px; height: 30px; }
.ob-scan-title { font-size: 16px; font-weight: 600; color: var(--black); }
.ob-scan-sub { font-size: 13px; color: var(--gray-400); margin: 6px auto 16px; max-width: 300px; line-height: 1.45; }
.ob-scan-status { display: flex; justify-content: center; gap: 10px; margin-bottom: 16px; }
.ob-scan-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--gray-200); background: var(--white);
  font-size: 13px; font-weight: 500; color: var(--gray-400);
}
.ob-scan-chip svg { width: 15px; height: 15px; }
.ob-scan-chip.done { color: var(--accent-ink); border-color: #22c55e; background: rgba(34, 197, 94, 0.08); }
.ob-scan-chip.done svg { color: #22c55e; }
.ob-scan-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 13px 16px;
  border: none; border-radius: var(--radius-md);
  background: var(--black); color: var(--white);
  font-size: 15px; font-weight: 600; cursor: pointer;
  transition: opacity 0.2s ease;
}
.ob-scan-btn:hover { opacity: 0.88; }
.ob-scan-btn svg { width: 18px; height: 18px; }
.ob-scan-link {
  display: inline-block; margin-top: 12px; padding: 4px;
  background: none; border: none; cursor: pointer;
  font-size: 13px; color: var(--gray-400); text-decoration: underline;
}
.ob-scan-link:hover { color: var(--black); }

/* On mobile, hide the desktop-style upload zones until the pilot opts into the
   library-upload fallback. On desktop they are always shown. */
body.is-mobile .ob-upload-section { display: none; }
body.is-mobile .ob-upload-section.revealed { display: block; }

/* Camera modal top bar (guided-flow title + step indicator) */
.ob-cam-topbar {
  width: 100%;
  max-width: 720px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  color: #fff;
}
.ob-cam-title { font-size: 16px; font-weight: 600; }
.ob-cam-step { font-size: 13px; color: rgba(255, 255, 255, 0.6); }

/* ── LIVE CAMERA MODAL ── */
.ob-cam-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 24px;
  background: #000;
}
.ob-cam-stage {
  position: relative;
  width: 100%;
  max-width: 720px;
  aspect-ratio: 4 / 3;
  background: #111;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.ob-cam-stage video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Dim mask everywhere except the framing rectangle. */
.ob-cam-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.ob-cam-frame {
  position: relative;
  width: 82%;
  /* FAA / ID-card aspect ratio (~1.586:1) so the license fills the box. */
  aspect-ratio: 1.586 / 1;
  border-radius: 14px;
  /* The cutout: everything outside this box is dimmed by a large spread
     shadow, leaving the framing rectangle clear. A faint hairline marks
     the edge — no heavy border, no coloured corners. */
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.62);
  outline: 1px solid rgba(255, 255, 255, 0.35);
  outline-offset: -1px;
}
.ob-cam-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  text-align: center;
  padding: 0 16px;
  font-size: 13px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}
/* Phone widths: the stage is short and the hint's wrapped lines rode up into
   the bottom of the framing rectangle. Drop it toward the bottom edge and
   compact it so the full frame stays unobstructed. (iPad/desktop keep the
   roomier layout above.) */
@media (max-width: 500px) {
  .ob-cam-hint {
    bottom: 4px;
    font-size: 11.5px;
    line-height: 1.3;
    padding: 0 10px;
  }
}
.ob-cam-error {
  position: absolute;
  left: 0;
  right: 0;
  top: 16px;
  text-align: center;
  padding: 0 16px;
  font-size: 13px;
  color: #ffd7d7;
}
.ob-cam-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
}
.ob-cam-ctl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-md);
  background: transparent;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.ob-cam-ctl:hover { background: rgba(255, 255, 255, 0.12); }
.ob-cam-ctl svg { width: 16px; height: 16px; }
.ob-cam-shutter {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 4px solid #fff;
  background: var(--accent);
  cursor: pointer;
  transition: transform 0.1s ease;
}
.ob-cam-shutter:hover { transform: scale(1.05); }
.ob-cam-shutter:active { transform: scale(0.95); }
.ob-cam-shutter:disabled { opacity: 0.45; cursor: default; transform: none; }

/* Capture feedback: a quick white flash + a "captured" check badge over the
   stage. Together with the shutter being disabled for ~450ms, this makes the
   shot visibly register so a fast second tap can't fire on the next side. */
.ob-cam-flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
.ob-cam-stage.flash .ob-cam-flash { animation: obCamFlash 0.35s ease-out; }
@keyframes obCamFlash { 0% { opacity: 0.85; } 100% { opacity: 0; } }

.ob-cam-check {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.ob-cam-modal.busy .ob-cam-check { display: flex; }
.ob-cam-check span {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: obCamPop 0.2s ease-out;
}
.ob-cam-check svg { width: 34px; height: 34px; }
@keyframes obCamPop { 0% { transform: scale(0.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* ── LOGIN REQUIRED BANNER ── */
.ob-login-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  margin-bottom: 24px;
}

.ob-login-banner-text {
  font-size: 14px;
  color: var(--gray-600);
}

.ob-login-banner a {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
  background: var(--black);
  padding: 8px 20px;
  border-radius: 100px;
  text-decoration: none;
  white-space: nowrap;
}

/* ── INDUSTRY SELECT ── */
.ob-industry-select {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.ob-chip-lg {
  padding: 18px 22px;
  font-size: 15px;
}

.ob-industry-count {
  font-size: 14px;
  color: var(--gray-400);
  margin-top: 16px;
  font-weight: 400;
}

.ob-industry-count span {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--black);
}

/* ── JOB SUMMARY (review on step 5) ── */
.ob-job-summary {
  margin-top: 36px;
  padding: 24px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
}

.ob-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid var(--gray-200);
  gap: 16px;
}

.ob-summary-row:last-child {
  border-bottom: none;
}

.ob-summary-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink: 0;
  width: 140px;
}

.ob-summary-value {
  font-size: 14px;
  color: var(--black);
  font-weight: 400;
  text-align: right;
  flex: 1;
}

.ob-summary-empty {
  color: var(--gray-400);
  font-style: italic;
}

/* ── MATCH STATS (success screen) ── */
.ob-match-stats {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-top: 36px;
  padding: 24px 32px;
  background: var(--gray-50);
  border-radius: var(--radius-lg);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.ob-match-stat {
  text-align: center;
}

.ob-match-stat-num {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 800;
  color: var(--black);
  letter-spacing: -1px;
  line-height: 1;
}

.ob-match-stat-label {
  font-size: 12px;
  color: var(--gray-400);
  margin-top: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
}

/* ── RESPONSIVE ── */
@media (max-width: 600px) {
  .ob-row {
    grid-template-columns: 1fr;
  }

  .ob-select-grid {
    grid-template-columns: 1fr;
  }

  .ob-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ob-steps-indicator {
    max-width: 100%;
    padding: 24px 16px 0;
  }

  .ob-step-dot {
    width: 24px;
    height: 24px;
  }

  .ob-step-dot span {
    font-size: 10px;
  }

  .ob-title {
    font-size: 28px;
    letter-spacing: -1px;
  }

  .ob-step {
    padding: 32px 0 80px;
  }

  .ob-actions {
    flex-direction: column-reverse;
    gap: 12px;
  }

  .ob-actions .btn-hero,
  .ob-actions .btn-hero-outline {
    width: 100%;
    text-align: center;
  }
}

/* ── Phone input with country-code selector ── */
.phone-input-row {
  display: flex;
  gap: 8px;
}
.phone-input-row input {
  flex: 1;
  min-width: 0;
}
.phone-cc {
  font-family: var(--font-body);
  font-size: 14px;
  padding: 12px 10px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--black);
  outline: none;
  cursor: pointer;
  max-width: 118px;
  transition: border-color var(--transition);
}
.phone-cc:focus {
  border-color: var(--black);
}

/* ── Lucide emblems replacing emoji on the pilot flow ── */
.ob-license-icon svg {
  width: 30px;
  height: 30px;
  stroke-width: 1.5;
}
.ob-upload-icon svg {
  width: 30px;
  height: 30px;
  stroke-width: 1.5;
  color: var(--gray-400);
}
.ob-upload-zone.uploaded .ob-upload-icon svg {
  color: #16a34a;
}