/* OnboardFlow Public v1.5.1 — pixel-perfect match to approved mock */

/* ── Variables & wrap ─────────────────────────────────────────────────────── */
.obf-wrap {
  --brand:#6366f1; --brand-dark:#4f46e5; --brand-light:rgba(99,102,241,.1);
  --text:#1e293b; --muted:#64748b; --subtle:#94a3b8;
  --border:#e2e8f0; --border2:#cbd5e1;
  --bg:#f8fafc; --surface:#ffffff;
  --radius:14px; --radius-sm:9px;
  --shadow:0 4px 24px rgba(0,0,0,.07);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--text); padding:24px 16px; background:transparent;
}
/* Prevent first-load flash.
   1) Full-screen funnels become a fixed overlay immediately (server-rendered class),
      so the page's theme header/title/footer are covered from the very first paint —
      no flash of page chrome before the JS "takeover".
   2) The funnel's own content (card, dots, branding) stays hidden until JS renders
      the first screen, then fades in. A failsafe reveals it even if JS never runs. */
.obf-wrap.obf-fullscreen {
  position:fixed; inset:0; z-index:2147483600; margin:0;
  background:var(--obf-fs-bg,#f8fafc);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding:48px 16px 40px;
}
.obf-wrap.obf-fullscreen > .obf-stage,
.obf-wrap.obf-fullscreen > .obf-dots,
.obf-wrap.obf-fullscreen > .obf-branding,
.obf-wrap.obf-fullscreen > .obf-fs-logo { width:100%; max-width:560px; }
.obf-wrap.obf-fullscreen > .obf-fs-logo { text-align:center; margin-bottom:20px; flex-shrink:0; }
.obf-wrap .obf-stage, .obf-wrap .obf-dots, .obf-wrap .obf-branding, .obf-wrap .obf-fs-logo {
  opacity:0; animation:obf-failsafe-reveal 0s linear 2.5s forwards;
}
.obf-wrap.obf-ready .obf-stage, .obf-wrap.obf-ready .obf-dots, .obf-wrap.obf-ready .obf-branding, .obf-wrap.obf-ready .obf-fs-logo {
  opacity:1; animation:none; transition:opacity .22s ease;
}
@keyframes obf-failsafe-reveal { to { opacity:1; } }
.obf-wrap *, .obf-wrap *::before, .obf-wrap *::after { box-sizing:border-box; }
/* Kill WP theme interference on our elements.
   !important is used ONLY on properties our JS never sets inline,
   so we override aggressive theme rules without fighting our own code. */
.obf-wrap a { text-decoration:none; }
.obf-wrap ul, .obf-wrap ol { list-style:none; padding:0; margin:0; }
.obf-wrap button, .obf-wrap input, .obf-wrap select, .obf-wrap textarea {
  font-family:inherit !important;
  text-transform:none !important;
  letter-spacing:normal !important;
  text-shadow:none !important;
  text-decoration:none !important;
}
.obf-wrap button {
  cursor:pointer;
  background:none; border:none;
  padding:0; margin:0 !important;
  min-height:0 !important; min-width:0 !important;
  outline:none;
}
.obf-wrap h1, .obf-wrap h2, .obf-wrap h3, .obf-wrap p { margin:0; padding:0; }

/* Dark theme */
.obf-wrap.obf-dark {
  --text:#f1f5f9; --muted:#94a3b8; --subtle:#64748b;
  --border:#334155; --border2:#475569;
  --bg:#0f172a; --surface:#1e293b;
  --shadow:0 4px 24px rgba(0,0,0,.3);
  --brand-light:rgba(99,102,241,.18);
}

/* ── Stage & Card ─────────────────────────────────────────────────────────── */
.obf-stage { display:flex; flex-direction:column; align-items:center; }
.obf-card {
  width:100%; max-width:var(--obf-card-maxw,480px);
  background:var(--obf-card-bg,var(--surface)); border:var(--obf-card-border-w,1px) solid var(--obf-card-border-c,var(--border));
  border-radius:var(--obf-card-radius,var(--radius)); padding:var(--obf-card-pad,36px 32px);
  box-shadow:var(--shadow);
  animation:obfIn .26s ease;
  transition:background .3s, border-color .3s;
}
.obf-card.obf-back { animation:obfBack .26s ease; }
@keyframes obfIn   { from{opacity:0;transform:translateX(16px)} to{opacity:1;transform:none} }
@keyframes obfBack { from{opacity:0;transform:translateX(-16px)} to{opacity:1;transform:none} }

/* ── Progress bar ─────────────────────────────────────────────────────────── */
.obf-prog-wrap { margin-bottom:24px; }
.obf-prog-top  { display:flex; justify-content:space-between; font-size:12px; color:var(--muted); margin-bottom:6px; }
.obf-prog-track{ height:4px; border-radius:99px; background:var(--border); overflow:hidden; }
.obf-prog-bar  { height:100%; border-radius:99px; background:var(--brand); transition:width .35s ease; }

/* ── Question ─────────────────────────────────────────────────────────────── */
.obf-q    { font-size:var(--obf-q-size,19px); font-weight:700; color:var(--text); text-align:var(--obf-align,center); line-height:1.3; margin-bottom:6px; }
.obf-qsub { font-size:13px; color:var(--muted); text-align:var(--obf-align,center); margin-bottom:22px; line-height:1.5; }

/* ── Choices — EXACT match to mock ───────────────────────────────────────── */
.obf-wrap .obf-choices { display:grid; gap:8px; margin-bottom:22px; }
.obf-wrap .obf-choices-yn { grid-template-columns:1fr 1fr; }

.obf-wrap .obf-choice {
  /* Full-width row, left-align, generous padding */
  display:flex; align-items:center; gap:12px;
  padding:12px 14px;
  border-radius:var(--obf-opt-radius,9px);
  border:1.5px solid var(--border);
  background:var(--surface);
  cursor:pointer;
  transition:border-color .15s, background .15s;
  width:100%;
  text-align:left;
  font-size:var(--obf-text-size,14px);
  font-weight:500;
  color:var(--text);
  font-family:inherit;
  /* No transform on hover — clean, like the mock */
}

.obf-wrap .obf-choice:hover {
  border-color:var(--brand);
  background:var(--brand-light);
}
/* Light mode: hover text inherits the primary color (and stays readable even if a
   theme tries to force white text on button:hover). Selected choices excluded —
   they have a solid brand background with white text. Dark mode untouched. */
.obf-wrap:not(.obf-dark) .obf-choice:hover:not(.obf-sel) { color:var(--brand) !important; }
.obf-wrap:not(.obf-dark) .obf-choice:hover:not(.obf-sel) .obf-choice-lbl { color:var(--brand); }
.obf-wrap:not(.obf-dark) .obf-choice:hover:not(.obf-sel) .obf-radio { border-color:var(--brand); }

/* Selected: solid indigo background like the mock */
.obf-wrap .obf-choice.obf-sel {
  border-color:var(--brand);
  background:var(--brand);
  color:#fff;
}

/* Icon container — NO separate background box, just the emoji inline */
.obf-wrap .obf-choice-ic {
  font-size:18px;
  line-height:1;
  flex-shrink:0;
  width:24px;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  /* No background, no border, no border-radius — matches mock exactly */
}

.obf-wrap .obf-choice-lbl {
  flex:1;
  font-size:14px;
  font-weight:500;
  line-height:1.3;
}

/* Radio circle */
.obf-radio {
  width:18px; height:18px; border-radius:50%;
  border:1.5px solid var(--border2);
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s;
  margin-left:auto;
}
.obf-sel .obf-radio { background:#fff; border-color:#fff; }
.obf-sel .obf-radio::after { content:''; width:6px; height:6px; border-radius:50%; background:var(--brand); }

/* Square checkbox for multi-select (distinguishes from single-choice radio) */
.obf-checkbox {
  width:18px; height:18px; border-radius:5px;
  border:1.5px solid var(--border2);
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s;
  margin-left:auto;
}
.obf-wrap:not(.obf-dark) .obf-choice:hover:not(.obf-sel) .obf-checkbox { border-color:var(--brand); }
.obf-sel .obf-checkbox { background:#fff; border-color:#fff; }

/* Dark theme adjustments */
.obf-wrap.obf-dark .obf-choice:hover { background:rgba(99,102,241,.15); }
.obf-wrap.obf-dark .obf-choice.obf-sel { background:var(--brand); color:#fff; }

/* ── Star rating ──────────────────────────────────────────────────────────── */
.obf-wrap .obf-stars { display:flex; justify-content:center; gap:10px; margin-bottom:22px; }
.obf-wrap .obf-star {
  font-size:34px; line-height:1; padding:0;
  color:var(--border); transition:color .15s, transform .12s;
  background:none; border:none; cursor:pointer;
}
.obf-wrap .obf-star:hover, .obf-wrap .obf-star.obf-lit { color:#f59e0b; transform:scale(1.1); }

/* ── Info screen ──────────────────────────────────────────────────────────── */
.obf-info { text-align:center; padding:8px 0 22px; }
.obf-info-icon { font-size:52px; margin-bottom:12px; line-height:1; }
.obf-info-body { font-size:14px; color:var(--muted); line-height:1.6; max-width:320px; margin:0 auto; }

/* ── Navigation buttons ───────────────────────────────────────────────────── */
.obf-nav { display:flex; gap:8px; margin-top:4px; }

.obf-wrap .obf-btn-back {
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px;
  border-radius:9px;
  font-size:14px; font-weight:500; font-family:inherit;
  cursor:pointer;
  background:transparent !important;
  border:1.5px solid var(--border) !important;
  color:var(--muted) !important;
  transition:border-color .15s, color .15s;
  line-height:1;
  flex-shrink:0;
}
.obf-wrap .obf-btn-back:hover { border-color:var(--brand) !important; color:var(--brand) !important; }

.obf-wrap .obf-btn-next {
  display:inline-flex; align-items:center; justify-content:center;
  flex:1; padding:13px 20px;
  border-radius:var(--obf-btn-radius,9px);
  font-size:14px; font-weight:600; font-family:inherit;
  cursor:pointer;
  border:none !important;
  color:var(--obf-btn-text,#fff) !important;
  transition:filter .15s;
  line-height:1;
}
.obf-wrap .obf-btn-next:hover { filter:brightness(1.08); }
.obf-wrap .obf-btn-next:disabled { opacity:.5; cursor:not-allowed; }

/* ── Paywall ──────────────────────────────────────────────────────────────── */
.obf-pw-hl  { font-size:21px; font-weight:700; color:var(--text); text-align:center; line-height:1.25; margin-bottom:6px; }
.obf-pw-sub { font-size:13px; color:var(--muted); text-align:center; margin-bottom:18px; line-height:1.5; }
.obf-result-box {
  border-left:3px solid var(--brand);
  border-radius:0 9px 9px 0;
  padding:12px 14px; margin-bottom:16px;
  font-size:13px; line-height:1.6;
  background:var(--brand-light); color:var(--text);
}
.obf-wrap.obf-dark .obf-result-box { color:#c7d2fe; }

/* Plans */
.obf-plans { display:grid; grid-template-columns:1fr; gap:10px; margin-bottom:16px; }
.obf-plans.obf-plans-2col { grid-template-columns:1fr 1fr; }
@media(max-width:520px){ .obf-plans.obf-plans-2col { grid-template-columns:1fr; } }

.obf-plan {
  border-radius:10px; padding:16px;
  cursor:pointer;
  border:1.5px solid var(--border);
  background:var(--surface);
  transition:border-color .15s, box-shadow .15s;
  position:relative;
}
.obf-plan:hover { border-color:var(--brand); }
.obf-plan.obf-psel {
  border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-light);
  background:var(--brand-light);
}
/* Selected plan radio fills with the brand color + white dot — the selection is
   visible at a glance and clearly distinct from the (static) badge pill. */
.obf-plan .obf-radio.obf-psel,
.obf-plan.obf-psel .obf-radio {
  background:var(--brand);
  border-color:var(--brand);
}
.obf-plan .obf-radio.obf-psel::after,
.obf-plan.obf-psel .obf-radio::after {
  content:''; width:6px; height:6px; border-radius:50%; background:#fff;
}
.obf-wrap.obf-dark .obf-plan.obf-psel { background:rgba(99,102,241,.14); }
.obf-plan-badge {
  position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  background:var(--brand); color:#fff;
  font-size:10px; font-weight:600; padding:2px 10px; border-radius:99px; white-space:nowrap;
}
.obf-plan-inner { display:flex; align-items:flex-start; justify-content:space-between; }
.obf-plan-lbl   { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:3px; }
.obf-plan-price { font-size:26px; font-weight:700; color:var(--text); line-height:1; }
.obf-plan-period{ font-size:12px; color:var(--subtle); margin-bottom:10px; }
.obf-plan-feats { font-size:12px; color:var(--muted); }
.obf-plan-feats li { padding:2px 0 2px 13px; position:relative; }
.obf-plan-feats li::before { content:''; position:absolute; left:0; top:8px; width:5px; height:5px; border-radius:50%; background:var(--brand); }

/* Trust & terms */
.obf-trust { display:flex; align-items:center; justify-content:center; gap:5px; font-size:12px; color:var(--subtle); margin-top:10px; }
.obf-terms { text-align:center; font-size:11px; color:var(--subtle); margin-top:10px; line-height:1.5; }
.obf-terms a { color:var(--brand); text-decoration:none; }

/* Payment form */
.obf-order-box    { border-radius:9px; padding:12px 14px; margin-bottom:14px; background:var(--bg); border:1px solid var(--border); }
.obf-order-row    { display:flex; justify-content:space-between; align-items:center; padding:3px 0; font-size:12px; }
.obf-order-lbl    { color:var(--muted); }
.obf-order-val    { font-weight:500; color:var(--text); }
.obf-order-val.obf-green { color:#10b981; }
.obf-order-divider{ height:1px; background:var(--border); margin:8px 0; }
.obf-order-total  { font-size:13px; font-weight:600; color:var(--text); }
.obf-cc-label     { display:block; font-size:11px; font-weight:600; color:var(--muted); margin-bottom:5px; text-transform:uppercase; letter-spacing:.04em; }
.obf-cc-input {
  display:block; width:100%; padding:10px 12px;
  border-radius:9px; font-size:13px; font-family:inherit;
  border:1.5px solid var(--border); background:var(--surface); color:var(--text);
  outline:none; margin-bottom:8px; transition:border-color .15s;
}
.obf-cc-input:focus { border-color:var(--brand); }
.obf-cc-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.obf-secure { display:flex; align-items:center; justify-content:center; gap:5px; font-size:11px; color:var(--subtle); margin-top:6px; }
.obf-secure svg { width:12px; height:12px; opacity:.6; }

/* Dots, branding, spinner, error */
.obf-dots  { display:flex; justify-content:center; gap:5px; margin-top:14px; }
.obf-dot   { width:6px; height:6px; border-radius:50%; background:var(--border); transition:all .2s; }
.obf-dot.obf-on { background:var(--brand); transform:scale(1.35); }
.obf-branding { text-align:center; margin-top:12px; font-size:11px; }
.obf-branding a { color:var(--subtle); text-decoration:none; opacity:.65; }
.obf-branding a:hover { opacity:1; }
.obf-spinner {
  display:inline-block; width:14px; height:14px;
  border:2px solid rgba(255,255,255,.3); border-top-color:#fff;
  border-radius:50%; animation:obfSpin .6s linear infinite;
  vertical-align:middle; margin-right:6px;
}
@keyframes obfSpin { to { transform:rotate(360deg); } }
.obf-error {
  font-size:12px; color:#ef4444; text-align:center; margin-bottom:10px;
  padding:8px; background:#fef2f2; border-radius:9px; border:1px solid #fecaca;
}

/* Fullscreen: handled by JS overlay — no CSS needed */

@media(max-width:520px){
  .obf-card { padding:24px 16px; }
  .obf-q    { font-size:17px; }
.obf-wrap .obf-choices-yn { grid-template-columns:1fr; }
}

/* ════════════════════════════════════════════════════════════════════════
   NEW STEP TYPES (v1.6.0): image choice, number, date, likert, loading,
   testimonial, result
   ════════════════════════════════════════════════════════════════════════ */

/* ── Image choice ──────────────────────────────────────────────────────── */
.obf-wrap .obf-img-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px; }
.obf-wrap .obf-img-choice {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:10px; border:1.5px solid var(--border); border-radius:var(--radius-sm);
  background:var(--card); transition:border-color .15s, box-shadow .15s, transform .1s;
}
.obf-wrap .obf-img-choice:hover { border-color:var(--brand); }
.obf-wrap .obf-img-choice.obf-sel { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-light); }
.obf-wrap .obf-img-thumb {
  width:100%; aspect-ratio:1/1; border-radius:8px; background-size:cover; background-position:center;
  background-color:var(--brand-light);
  display:flex; align-items:center; justify-content:center; font-size:34px;
}
.obf-wrap .obf-img-lbl { font-size:13px; font-weight:500; color:var(--text); text-align:center; }

/* ── Number / measurement ──────────────────────────────────────────────── */
.obf-wrap .obf-num-row { display:flex; align-items:stretch; gap:8px; justify-content:center; }
.obf-wrap .obf-num-input {
  font-size:24px; font-weight:700; text-align:center;
  width:160px; max-width:60%; padding:12px 14px;
  border:1.5px solid var(--border); border-radius:var(--radius-sm);
  background:var(--card); color:var(--text);
}
.obf-wrap .obf-num-input:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-light); }
.obf-wrap .obf-num-unit { display:flex; align-items:center; font-size:15px; font-weight:600; color:var(--muted); }
.obf-wrap .obf-unit-toggle { display:flex; justify-content:center; gap:0; margin-top:12px; }
.obf-wrap .obf-unit-btn {
  font-size:12px; font-weight:600; padding:6px 16px;
  border:1.5px solid var(--border); background:var(--card); color:var(--muted);
}
.obf-wrap .obf-unit-btn:first-child { border-radius:8px 0 0 8px; }
.obf-wrap .obf-unit-btn:last-child  { border-radius:0 8px 8px 0; border-left:none; }
.obf-wrap .obf-unit-btn.obf-unit-active { background:var(--brand); color:#fff; border-color:var(--brand); }

/* ── Date ──────────────────────────────────────────────────────────────── */
.obf-wrap .obf-date-input { font-size:16px; text-align:center; }

/* ── Likert ────────────────────────────────────────────────────────────── */
.obf-wrap .obf-likert { display:flex; gap:8px; justify-content:center; }
.obf-wrap .obf-likert-pt {
  width:44px; height:44px; border-radius:50%;
  border:1.5px solid var(--border); background:var(--card);
  font-size:15px; font-weight:600; color:var(--text);
  transition:all .12s;
}
.obf-wrap .obf-likert-pt:hover { border-color:var(--brand); color:var(--brand); }
.obf-wrap .obf-likert-pt.obf-sel { background:var(--brand); color:#fff; border-color:var(--brand); }
.obf-wrap .obf-likert-ends { display:flex; justify-content:space-between; font-size:11px; color:var(--subtle); margin-bottom:20px; padding:0 2px; }

/* ── Loading screen ────────────────────────────────────────────────────── */
.obf-wrap .obf-loading-screen { display:flex; flex-direction:column; align-items:center; padding:14px 0 24px; }
.obf-wrap .obf-loading-ring { position:relative; width:96px; height:96px; margin-bottom:24px; }
.obf-wrap .obf-loading-ring svg { width:96px; height:96px; transform:rotate(-90deg); }
.obf-wrap .obf-lr-track { fill:none; stroke:var(--border); stroke-width:4; }
.obf-wrap .obf-lr-fill  { fill:none; stroke:var(--brand); stroke-width:4; stroke-linecap:round; transition:stroke-dashoffset .1s linear; }
.obf-wrap .obf-lr-pct {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:20px; font-weight:700; color:var(--text);
}
.obf-wrap .obf-loading-msgs { display:flex; flex-direction:column; gap:10px; width:100%; max-width:320px; }
.obf-wrap .obf-loading-msg {
  display:flex; align-items:center; gap:10px; font-size:14px; color:var(--subtle);
  opacity:.5; transition:opacity .3s, color .3s;
}
.obf-wrap .obf-loading-msg.obf-active { opacity:1; color:var(--text); }
.obf-wrap .obf-lm-check {
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:50%; font-size:11px;
  background:var(--border); color:transparent; flex-shrink:0; transition:all .3s;
}
.obf-wrap .obf-loading-msg.obf-done .obf-lm-check { background:var(--brand); color:#fff; }

/* ── Testimonial ───────────────────────────────────────────────────────── */
.obf-wrap .obf-testimonial { text-align:center; padding:8px 0 20px; }
.obf-wrap .obf-tm-stars { color:#f59e0b; font-size:20px; margin-bottom:14px; letter-spacing:2px; }
.obf-wrap .obf-tm-star { color:var(--border); }
.obf-wrap .obf-tm-star.obf-lit { color:#f59e0b; }
.obf-wrap .obf-tm-quote { font-size:17px; font-style:italic; line-height:1.5; color:var(--text); margin-bottom:16px; }
.obf-wrap .obf-tm-author { display:flex; align-items:center; justify-content:center; gap:10px; }
.obf-wrap .obf-tm-avatar { width:36px; height:36px; border-radius:50%; background-size:cover; background-position:center; background-color:var(--brand-light); }
.obf-wrap .obf-tm-name { font-size:13px; font-weight:600; color:var(--muted); }

/* ── Result / plan reveal ──────────────────────────────────────────────── */
.obf-wrap .obf-result { text-align:center; padding:8px 0 22px; }
.obf-wrap .obf-result-icon { font-size:46px; margin-bottom:14px; }
.obf-wrap .obf-result-body { font-size:15px; line-height:1.6; color:var(--text); }
.obf-wrap .obf-result-body strong { color:var(--brand); }

/* ── Email capture screen ──────────────────────────────────────────────── */
.obf-email-cap { text-align:center; }
.obf-email-cap .obf-q { margin-bottom:6px; }
.obf-email-cap .obf-qsub { margin-bottom:20px; }
.obf-email-field {
  width:100%;
  box-sizing:border-box;
  font-size:16px;
  line-height:1.4;
  padding:14px 16px;
  text-align:center;
  border:1.5px solid var(--border2);
  border-radius:12px;
  color:var(--text);
  background:#fff;
  outline:none;
  transition:border-color .15s, box-shadow .15s;
  margin-bottom:8px;
}
.obf-email-field::placeholder { color:#9aa3af; font-size:16px; }
.obf-email-field:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(0,0,0,.04); }
.obf-email-err { color:#dc2626; font-size:13px; min-height:18px; margin-bottom:10px; }
.obf-email-go { width:100%; }
.obf-wrap.obf-dark .obf-email-field { background:transparent; color:#fff; border-color:rgba(255,255,255,.25); }
.obf-wrap.obf-dark .obf-email-field::placeholder { color:rgba(255,255,255,.5); }


/* ── Image choice: full photo cards ─────────────────────────────────────── */
.obf-wrap .obf-img-photo{ grid-template-columns:1fr 1fr; gap:14px; }
.obf-wrap .obf-img-choice.obf-photo{ position:relative; aspect-ratio:3/4; padding:0; border:none; border-radius:16px; overflow:hidden; display:block; box-shadow:0 2px 10px rgba(15,23,42,.10); }
.obf-wrap .obf-img-choice.obf-photo .obf-img-thumb{ position:absolute; inset:0; width:100%; height:100%; border-radius:0; background-size:cover; background-position:center; }
.obf-wrap .obf-img-choice.obf-photo .obf-img-thumb.obf-img-ph{ display:flex; align-items:center; justify-content:center; font-size:56px; background:var(--brand-light); }
.obf-wrap .obf-img-choice.obf-photo::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.20), transparent 45%); z-index:1; }
.obf-wrap .obf-img-choice.obf-photo .obf-img-lbl{ position:absolute; left:0; right:0; bottom:0; margin:12px; padding:12px 14px; background:#fff; border-radius:12px; font-weight:600; text-align:left; box-shadow:0 2px 8px rgba(15,23,42,.14); z-index:2; }
.obf-wrap .obf-img-choice.obf-photo .obf-img-arrow{ position:absolute; right:26px; bottom:24px; font-size:22px; line-height:1; color:var(--text); z-index:3; }
.obf-wrap .obf-img-choice.obf-photo.obf-sel{ outline:3px solid var(--brand); outline-offset:0; }
@media(max-width:520px){ .obf-wrap .obf-img-photo{ gap:10px; } .obf-wrap .obf-img-choice.obf-photo{ aspect-ratio:2/3; } }

/* ── Intro / welcome step ───────────────────────────────────────────────── */
.obf-wrap .obf-intro{ text-align:center; }
.obf-wrap .obf-intro-logo{ max-height:34px; width:auto; margin:0 auto 18px; display:block; }
.obf-wrap .obf-intro-badge{ display:inline-block; padding:6px 14px; border-radius:99px; background:var(--brand-light); color:var(--brand-dark); font-size:13px; font-weight:600; margin-bottom:14px; }
.obf-wrap .obf-intro-h{ font-size:26px; }
.obf-wrap .obf-intro-sub{ margin-bottom:22px; }
.obf-wrap .obf-intro-consent{ margin-top:18px; font-size:12px; color:var(--muted); line-height:1.5; }
.obf-wrap .obf-intro-consent a{ color:var(--muted); text-decoration:underline; }

/* ── Testimonial: social proof ──────────────────────────────────────────── */
.obf-wrap .obf-tm-stat{ text-align:center; margin-bottom:20px; }
.obf-wrap .obf-tm-statnum{ display:block; font-size:40px; font-weight:800; line-height:1; color:var(--brand-dark); letter-spacing:-.02em; }
.obf-wrap .obf-tm-statlbl{ display:block; font-size:14px; color:var(--muted); margin-top:6px; }
.obf-wrap .obf-tm-card{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:20px; text-align:center; }
.obf-wrap .obf-tm-platform{ text-align:center; margin-top:14px; font-size:14px; color:var(--text); }
.obf-wrap .obf-tm-platform .obf-tm-pf-star{ color:#00b67a; }
.obf-wrap .obf-tm-press{ margin-top:18px; text-align:center; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 14px; }
.obf-wrap .obf-tm-press-lbl{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--subtle); width:100%; margin-bottom:2px; }
.obf-wrap .obf-tm-press-item{ font-family:Georgia,'Times New Roman',serif; font-size:15px; font-weight:600; color:var(--muted); opacity:.75; }