.obpl-root {
  --obpl-deep: #0a4c61;
  --obpl-teal: #258ca0;
  --obpl-mint: #80ca95;
  --obpl-bg: #edf7f0;
  --obpl-soft: #f5fbf8;
  --obpl-border: #d3e6e2;
  --obpl-text: #173f4a;
  --obpl-muted: #62808a;
  --obpl-danger: #b54747;
  box-sizing: border-box;
  padding: 28px 24px 44px;
  border-radius: 24px;
  background: var(--obpl-bg);
  color: var(--obpl-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;
}
.obpl-root *, .obpl-root *::before, .obpl-root *::after { box-sizing: border-box; }
/*
 * The wide layout stays inside the active theme and centers itself in the
 * available content area. No relative offset is used, so full-width page
 * templates and shortcode blocks cannot push the questionnaire to the right.
 */
.obpl-root--wide {
  position: static;
  display: block;
  float: none;
  clear: both;
  width: calc(100% - 32px);
  max-width: 1040px;
  margin: 32px auto 56px !important;
  transform: none;
}
.obpl-root--contained {
  width: 100%;
  max-width: 920px;
  margin: 32px auto 56px;
}
.obpl-container { width: min(900px, 100%); margin: 0 auto; }
.obpl-brandbar { display: flex; align-items: center; justify-content: center; padding: 4px 0 20px; margin-bottom: 22px; border-bottom: 1px solid var(--obpl-border); }
.obpl-brand-logo { display: block; width: auto; height: 46px; object-fit: contain; }
.obpl-card { position: relative; overflow: hidden; padding: 38px 36px; border: 1px solid rgba(10,76,97,.05); border-radius: 20px; background: #fff; box-shadow: 0 15px 45px rgba(10,76,97,.11); }
.obpl-intro h1, .obpl-step h2, .obpl-thanks h2 { margin: 0; color: var(--obpl-deep); line-height: 1.24; }
.obpl-intro h1 { max-width: 620px; margin-bottom: 15px; font-size: clamp(1.6rem, 4vw, 2.15rem); }
.obpl-intro p { margin: 0 0 12px; color: var(--obpl-muted); font-size: 1rem; }
.obpl-meta-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0; }
.obpl-meta-pill { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border: 1px solid #c8e5df; border-radius: 999px; background: var(--obpl-soft); color: var(--obpl-deep); font-size: .86rem; font-weight: 650; }
.obpl-start-button { margin-top: 2px; }
.obpl-privacy-note { padding-top: 18px; margin-top: 25px !important; border-top: 1px solid var(--obpl-border); font-size: .8rem !important; }
.obpl-progress-wrap { margin-bottom: 28px; }
.obpl-progress-label { display: flex; justify-content: space-between; margin-bottom: 8px; color: var(--obpl-muted); font-size: .78rem; font-weight: 700; }
.obpl-progress-track { overflow: hidden; height: 7px; border-radius: 999px; background: #dbeee8; }
.obpl-progress-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--obpl-teal), var(--obpl-mint)); transition: width .28s ease; }
.obpl-step { animation: obpl-fade .22s ease; }
@keyframes obpl-fade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.obpl-step-hint { display: inline-flex; margin-bottom: 10px; padding: 4px 10px; border-radius: 999px; background: #dff2ed; color: var(--obpl-deep); font-size: .74rem; font-weight: 750; }
.obpl-step h2 { margin-bottom: 18px; font-size: clamp(1.25rem, 3vw, 1.55rem); }
.obpl-step-sub { margin: -8px 0 18px; color: var(--obpl-muted); font-size: .88rem; }
.obpl-options { display: grid; gap: 10px; }
.obpl-option { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--obpl-border); border-radius: 12px; background: #fff; cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.obpl-option:hover { border-color: #68b4bd; background: #f8fcfb; }
.obpl-option.is-selected { border-color: var(--obpl-teal); background: #edf8f5; }
.obpl-option.is-disabled { opacity: .42; cursor: not-allowed; }
.obpl-option input { width: 18px; height: 18px; margin: 0; accent-color: var(--obpl-deep); flex: 0 0 auto; }
.obpl-option-label { flex: 1; color: var(--obpl-text); font-size: .95rem; }
.obpl-option-rank { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--obpl-mint); color: var(--obpl-deep); font-size: .75rem; font-weight: 800; }
.obpl-group-title { margin: 22px 0 8px; color: var(--obpl-muted); font-size: .77rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.obpl-group-title:first-of-type { margin-top: 0; }
.obpl-input, .obpl-textarea { display: block; width: 100%; padding: 12px 14px; border: 1.5px solid var(--obpl-border); border-radius: 11px; background: #fff; color: var(--obpl-text); font: inherit; }
.obpl-input:focus, .obpl-textarea:focus { outline: none; border-color: var(--obpl-teal); box-shadow: 0 0 0 3px rgba(37,140,160,.14); }
.obpl-textarea { min-height: 110px; resize: vertical; }
.obpl-option-other-input { width: calc(100% - 32px); margin: 10px 0 0 32px; }
.obpl-extra-block, .obpl-conditional { margin-top: 22px; padding: 17px; border: 1px solid #cce5df; border-radius: 13px; background: var(--obpl-soft); }
.obpl-field-label { display: block; margin-bottom: 9px; color: var(--obpl-deep); font-size: .86rem; font-weight: 700; }
.obpl-scale { display: grid; gap: 8px; }
.obpl-ranking-summary { display: grid; gap: 8px; min-height: 8px; margin-bottom: 17px; }
.obpl-rank-empty { padding: 12px; border: 1px dashed var(--obpl-border); border-radius: 11px; color: var(--obpl-muted); font-size: .85rem; text-align: center; }
.obpl-rank-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 11px; background: var(--obpl-deep); color: #fff; }
.obpl-rank-badge { display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 25px; border-radius: 50%; background: var(--obpl-mint); color: var(--obpl-deep); font-size: .78rem; font-weight: 800; }
.obpl-rank-text { flex: 1; font-size: .9rem; }
.obpl-rank-controls { display: flex; gap: 4px; }
.obpl-rank-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 7px; background: rgba(255,255,255,.14); color: #fff; cursor: pointer; }
.obpl-rank-btn:hover { background: rgba(255,255,255,.25); }
.obpl-rank-btn:disabled { opacity: .3; cursor: not-allowed; }
.obpl-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 30px; }
.obpl-btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 11px 24px; border: 0; border-radius: 999px; font: inherit; font-size: .94rem; font-weight: 750; line-height: 1; cursor: pointer; transition: background .15s ease, transform .12s ease, box-shadow .15s ease; }
.obpl-btn:active { transform: translateY(1px); }
.obpl-btn-primary { background: var(--obpl-deep); color: #fff; box-shadow: 0 7px 18px rgba(10,76,97,.22); }
.obpl-btn-primary:hover { background: #12667a; }
.obpl-btn-primary:disabled { opacity: .55; cursor: wait; }
.obpl-btn-ghost { padding-inline: 10px; background: transparent; color: var(--obpl-muted); }
.obpl-btn-ghost:hover { color: var(--obpl-deep); }
.obpl-btn-ghost:disabled { visibility: hidden; }
.obpl-error { display: none; margin-top: 13px; color: var(--obpl-danger); font-size: .84rem; font-weight: 650; }
.obpl-error.is-visible { display: block; }
.obpl-resume-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 18px; padding: 12px 14px; border: 1px solid #c7e1da; border-radius: 12px; background: var(--obpl-soft); color: var(--obpl-deep); font-size: .86rem; }
.obpl-resume-banner button { padding: 6px 12px; border: 1px solid var(--obpl-teal); border-radius: 999px; background: #fff; color: var(--obpl-deep); font-weight: 700; cursor: pointer; }
.obpl-thanks { text-align: center; }
.obpl-checkmark { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; margin-bottom: 18px; border-radius: 50%; background: #dff2e4; color: #267d47; font-size: 1.7rem; font-weight: 900; }
.obpl-thanks h2 { margin-bottom: 12px; font-size: 1.7rem; }
.obpl-thanks p { max-width: 580px; margin: 0 auto 12px; color: var(--obpl-muted); }
.obpl-cta { display: inline-flex; margin-top: 15px; color: var(--obpl-deep); font-weight: 750; text-decoration: none; }
.obpl-footer { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 22px; padding: 12px 16px; border: 1px solid var(--obpl-border); border-radius: 12px; background: rgba(255,255,255,.58); color: var(--obpl-muted); font-size: .8rem; }
.obpl-nn-logo { display: block; width: auto; height: 31px; object-fit: contain; }
.obpl-sponsor-name { color: var(--obpl-deep); font-weight: 700; }
.obpl-hp { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
.obpl-empty-state { color: var(--obpl-muted); text-align: center; }
@media (min-width: 620px) { .obpl-scale-row { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); } .obpl-scale-row .obpl-option { flex-direction: column; justify-content: center; text-align: center; } }
@media (max-width: 620px) {
  .obpl-root { padding: 14px 10px 32px; border-radius: 16px; }
  .obpl-root--wide { width: calc(100% - 16px); margin-top: 18px !important; margin-bottom: 38px !important; }
  .obpl-brandbar { margin-bottom: 14px; padding-bottom: 14px; }
  .obpl-brand-logo { height: 40px; }
  .obpl-card { padding: 26px 19px; border-radius: 16px; }
  .obpl-btn { min-height: 46px; padding-inline: 18px; }
  .obpl-footer { flex-wrap: wrap; text-align: center; }
  .obpl-rank-row { align-items: flex-start; }
  .obpl-rank-controls { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { .obpl-step, .obpl-progress-fill, .obpl-option, .obpl-btn { animation: none; transition: none; } }