/* ════════════════════════════════════════════════════════════════════
   MARQEE — member onboarding / intake wizard
   Self-contained. Relies on tokens + fonts from app.css.
═════════════════════════════════════════════════════════════════════ */
.ob-body{
  min-height:100vh;
  color:var(--tx);
  font-family:'Inter',system-ui,sans-serif;
  background:radial-gradient(120% 80% at 50% -12%,#1A47A0,transparent 56%),
             radial-gradient(90% 70% at 100% 110%,rgba(77,162,255,.22),transparent 60%),
             var(--ink);
  overflow-x:hidden;
}
.ob-body h1,.ob-body h2,.ob-body h3{color:#fff}

/* ── ambient marquee bulbs ─────────────────────────────────────────── */
.ob-bulbs{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ob-bulbs span{position:absolute;width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle,#cfe6ff,rgba(143,200,255,.2));
  box-shadow:0 0 10px rgba(143,200,255,.7);opacity:.5;animation:obtwinkle 3.4s ease-in-out infinite}
@keyframes obtwinkle{0%,100%{opacity:.18;transform:scale(.8)}50%{opacity:.85;transform:scale(1.15)}}

/* ── shell ─────────────────────────────────────────────────────────── */
.ob-shell{position:relative;z-index:2;max-width:760px;margin:0 auto;padding:34px 24px 72px;min-height:100vh;display:flex;flex-direction:column}
.ob-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:26px}
.ob-brand{display:inline-flex;align-items:center;gap:10px;font-family:'Hanken Grotesk';font-weight:700;font-size:20px;color:#fff;letter-spacing:-.02em}
.ob-brand .mk{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--aqua-2),var(--aqua));display:grid;place-items:center;flex:0 0 auto}
.ob-trial{display:inline-flex;align-items:center;gap:8px;font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.06em;color:var(--aqua-2);
  background:rgba(77,162,255,.1);border:1px solid rgba(143,200,255,.26);padding:7px 13px;border-radius:999px;white-space:nowrap}
.ob-trial .dot{width:7px;height:7px;border-radius:50%;background:var(--aqua);box-shadow:0 0 8px var(--aqua);animation:obpulse 1.8s ease-in-out infinite}
@keyframes obpulse{0%,100%{opacity:.5;transform:scale(.85)}50%{opacity:1;transform:scale(1.1)}}

/* ── progress stepper ──────────────────────────────────────────────── */
.ob-prog{margin-bottom:30px}
.ob-bar{height:5px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.ob-bar i{display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--aqua),var(--cyan));box-shadow:0 0 14px rgba(127,230,255,.5);
  transition:width .5s cubic-bezier(.16,1,.3,1)}
.ob-steps{display:flex;justify-content:space-between;margin-top:14px;gap:4px}
.ob-steps .st{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.04em;color:var(--tx-d3);text-align:center;transition:color .3s}
.ob-steps .st .pip{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:600;
  background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.14);color:var(--tx-d3);transition:all .35s cubic-bezier(.16,1,.3,1)}
.ob-steps .st .lbl{display:none}
.ob-steps .st.active{color:#fff}
.ob-steps .st.active .pip{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 6px 18px rgba(46,107,255,.5);transform:scale(1.08)}
.ob-steps .st.done{color:var(--aqua-2)}
.ob-steps .st.done .pip{background:var(--aqua);border-color:var(--aqua);color:#04101f}
@media(min-width:620px){.ob-steps .st .lbl{display:block}}

/* ── card / steps ──────────────────────────────────────────────────── */
.ob-card{position:relative;background:rgba(11,17,36,.72);backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.1);border-radius:22px;padding:38px 34px;
  box-shadow:0 40px 100px rgba(0,0,0,.5);flex:1}
.ob-step{display:none}
.ob-step.show{display:block;animation:obstepin .5s cubic-bezier(.16,1,.3,1) both}
@keyframes obstepin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.ob-eb{font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--aqua-2);display:inline-flex;align-items:center;gap:9px;margin-bottom:16px}
.ob-eb .sq{width:8px;height:8px;border-radius:2px;background:var(--aqua)}
.ob-step h2{font-size:clamp(26px,4.4vw,38px);line-height:1.05;letter-spacing:-.03em;margin-bottom:12px}
.ob-step h2 .gl{background:linear-gradient(95deg,#9FCBFF,#fff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ob-lead{color:var(--tx-d2);font-size:16px;max-width:520px;margin-bottom:24px}
.ob-lead b{color:#fff;font-weight:600}

/* ── concierge reassurance card ────────────────────────────────────── */
.ob-conc{display:flex;align-items:center;gap:16px;background:rgba(77,162,255,.07);border:1px solid rgba(143,200,255,.2);border-radius:16px;padding:18px 20px;margin:8px 0 26px}
.ob-conc .av{width:52px;height:52px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font-family:'Hanken Grotesk';font-weight:700;font-size:19px;color:#04101f;
  background:linear-gradient(135deg,var(--aqua-2),var(--aqua));box-shadow:0 8px 22px rgba(77,162,255,.4)}
.ob-conc .ct b{display:block;color:#fff;font-size:15px}
.ob-conc .ct span{display:block;color:var(--tx-d2);font-size:13.5px;margin-top:2px;line-height:1.45}

/* ── form fields ───────────────────────────────────────────────────── */
.ob-grid{display:grid;gap:18px}
.ob-grid.two{grid-template-columns:1fr 1fr}
@media(max-width:560px){.ob-grid.two{grid-template-columns:1fr}}
.ob-fld{display:flex;flex-direction:column;gap:7px}
.ob-fld>label{font-size:13px;font-weight:600;color:#fff}
.ob-fld .hint{font-size:12px;color:var(--tx-d3);font-weight:400;margin-left:4px}
.ob-fld input[type=text],.ob-fld input[type=url],.ob-fld input[type=email],.ob-fld textarea,.ob-fld select{
  width:100%;border:1px solid rgba(255,255,255,.14);border-radius:11px;padding:13px 14px;font-size:15px;font-family:inherit;
  background:rgba(255,255,255,.04);color:var(--tx);transition:border-color .2s,background .2s,box-shadow .2s}
.ob-fld textarea{min-height:90px;resize:vertical;line-height:1.5}
.ob-fld select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238FC8FF' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px;cursor:pointer}
.ob-fld input::placeholder,.ob-fld textarea::placeholder{color:var(--tx-d3)}
.ob-fld input:focus,.ob-fld textarea:focus,.ob-fld select:focus{outline:none;border-color:var(--aqua);background:rgba(255,255,255,.07);box-shadow:0 0 0 3px rgba(77,162,255,.18)}
.ob-fld select option{background:#0C1124;color:var(--tx)}
.ob-fld.err input,.ob-fld.err textarea,.ob-fld.err select{border-color:#ff7a7a;box-shadow:0 0 0 3px rgba(255,122,122,.16)}
.ob-msg{font-size:12px;color:#ffb0b0;margin-top:2px;display:none}
.ob-fld.err .ob-msg{display:block}

/* ── choice chips (single + multi) ─────────────────────────────────── */
.ob-chips{display:flex;flex-wrap:wrap;gap:10px}
.ob-chip{cursor:pointer;user-select:none;font-size:14px;color:var(--tx-d2);
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:10px 16px;
  display:inline-flex;align-items:center;gap:8px;transition:all .2s}
.ob-chip:hover{border-color:rgba(143,200,255,.5);color:#fff}
.ob-chip input{position:absolute;opacity:0;pointer-events:none}
.ob-chip.on{background:rgba(46,107,255,.18);border-color:var(--aqua);color:#fff;box-shadow:0 4px 16px rgba(46,107,255,.28)}
.ob-chip .ck{width:15px;height:15px;border-radius:5px;border:1.5px solid rgba(255,255,255,.3);display:grid;place-items:center;flex:0 0 auto;transition:all .2s}
.ob-chip.on .ck{background:var(--aqua);border-color:var(--aqua);color:#04101f}
.ob-chip .ck svg{width:10px;height:10px;opacity:0;transition:opacity .2s}
.ob-chip.on .ck svg{opacity:1}

/* ── selectable option cards (radio) ───────────────────────────────── */
.ob-opts{display:grid;gap:12px}
.ob-opts.two{grid-template-columns:1fr 1fr}
@media(max-width:560px){.ob-opts.two{grid-template-columns:1fr}}
.ob-opt{cursor:pointer;position:relative;display:flex;gap:14px;align-items:flex-start;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.13);border-radius:14px;padding:16px 18px;transition:all .2s}
.ob-opt:hover{border-color:rgba(143,200,255,.45)}
.ob-opt input{position:absolute;opacity:0;pointer-events:none}
.ob-opt .ic{width:38px;height:38px;border-radius:10px;flex:0 0 auto;display:grid;place-items:center;background:rgba(77,162,255,.12);color:var(--aqua-2);transition:all .25s}
.ob-opt .ic svg{width:19px;height:19px}
.ob-opt b{display:block;color:#fff;font-size:15px;font-weight:600}
.ob-opt span{display:block;color:var(--tx-d3);font-size:13px;margin-top:2px;line-height:1.4}
.ob-opt.on{border-color:var(--aqua);background:rgba(46,107,255,.14);box-shadow:0 8px 26px rgba(46,107,255,.24)}
.ob-opt.on .ic{background:var(--aqua);color:#04101f}

/* ── file upload ───────────────────────────────────────────────────── */
.ob-drop{position:relative;border:1.5px dashed rgba(143,200,255,.35);border-radius:16px;padding:28px 22px;text-align:center;
  background:rgba(255,255,255,.03);transition:all .25s;cursor:pointer}
.ob-drop:hover{border-color:var(--aqua);background:rgba(77,162,255,.06)}
.ob-drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.ob-drop .ui{width:46px;height:46px;border-radius:12px;margin:0 auto 12px;display:grid;place-items:center;background:rgba(77,162,255,.14);color:var(--aqua-2)}
.ob-drop b{display:block;color:#fff;font-size:15px}
.ob-drop span{display:block;color:var(--tx-d3);font-size:13px;margin-top:4px}
.ob-drop.has{border-color:var(--aqua);border-style:solid;background:rgba(46,107,255,.1)}
.ob-drop.has .ui{background:var(--aqua);color:#04101f}

/* ── confidential toggle ───────────────────────────────────────────── */
.ob-toggle{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.13);border-radius:14px;padding:16px 18px;cursor:pointer;transition:all .25s}
.ob-toggle:hover{border-color:rgba(143,200,255,.4)}
.ob-toggle.on{border-color:var(--aqua);background:rgba(46,107,255,.12)}
.ob-toggle .tt{flex:1}
.ob-toggle .tt b{display:block;color:#fff;font-size:15px;display:flex;align-items:center;gap:8px}
.ob-toggle .tt span{display:block;color:var(--tx-d3);font-size:13px;margin-top:3px;line-height:1.45}
.ob-toggle input{position:absolute;opacity:0;pointer-events:none}
.ob-sw{width:46px;height:27px;border-radius:999px;background:rgba(255,255,255,.16);flex:0 0 auto;position:relative;transition:background .25s}
.ob-sw::after{content:'';position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff;transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.ob-toggle.on .ob-sw{background:var(--aqua)}
.ob-toggle.on .ob-sw::after{transform:translateX(19px)}
.ob-lock{font-size:11px;font-family:'Space Mono',monospace;letter-spacing:.05em;color:var(--aqua-2);background:rgba(77,162,255,.14);border-radius:5px;padding:2px 7px}

.ob-sec-title{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-d3);margin:22px 0 12px}

/* ── confirm summary ───────────────────────────────────────────────── */
.ob-trialcard{background:linear-gradient(160deg,rgba(46,107,255,.18),rgba(11,17,36,.4));border:1px solid rgba(143,200,255,.28);border-radius:18px;padding:24px;margin-bottom:22px}
.ob-trialcard .th{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.ob-trialcard .th b{font-family:'Hanken Grotesk';font-weight:700;font-size:20px;color:#fff}
.ob-trialcard .pill{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.05em;color:#04101f;background:var(--aqua);border-radius:999px;padding:5px 12px}
.ob-perks{display:grid;gap:11px}
.ob-perks li{display:flex;align-items:flex-start;gap:11px;list-style:none;color:var(--tx-d2);font-size:14.5px}
.ob-perks li b{color:#fff;font-weight:600}
.ob-perks .ck{width:20px;height:20px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;background:rgba(77,162,255,.18);color:var(--aqua-2);margin-top:1px}
.ob-perks .ck svg{width:11px;height:11px}

.ob-review{display:grid;gap:1px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);border-radius:14px;overflow:hidden;margin-bottom:8px}
.ob-rrow{display:flex;gap:16px;justify-content:space-between;background:rgba(11,17,36,.55);padding:13px 16px}
.ob-rrow .k{font-size:13px;color:var(--tx-d3);flex:0 0 auto}
.ob-rrow .v{font-size:14px;color:#fff;text-align:right;font-weight:500}
.ob-rrow .v.muted{color:var(--tx-d3);font-weight:400}

/* ── nav buttons ───────────────────────────────────────────────────── */
.ob-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:28px}
.ob-back{background:transparent;border:1px solid rgba(255,255,255,.18);color:#fff;border-radius:11px;padding:13px 22px;font-size:15px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:all .2s;font-family:inherit}
.ob-back:hover{border-color:rgba(255,255,255,.5);transform:translateX(-2px)}
.ob-back[hidden]{visibility:hidden}
.ob-next{background:var(--blue);color:#fff;border:none;border-radius:11px;padding:13px 26px;font-size:15px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:all .2s;font-family:inherit;box-shadow:0 10px 28px rgba(46,107,255,.35)}
.ob-next:hover{background:var(--blue-press);transform:translateY(-2px)}
.ob-next .arr{transition:transform .2s}.ob-next:hover .arr{transform:translateX(3px)}
.ob-start{background:linear-gradient(135deg,var(--aqua),var(--blue));font-size:16px;padding:15px 30px;box-shadow:0 14px 34px rgba(77,162,255,.45)}
.ob-skip{color:var(--tx-d3);font-size:13px;text-align:center;margin-top:14px}
.ob-skip a{color:var(--aqua-2);cursor:pointer;font-weight:600}

/* ── DONE step ─────────────────────────────────────────────────────── */
.ob-done{text-align:center;padding:14px 0}
.ob-marquee{position:relative;width:160px;height:160px;margin:6px auto 26px}
.ob-marquee .ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(143,200,255,.25);animation:obspin 14s linear infinite}
.ob-marquee .ring .b{position:absolute;width:9px;height:9px;border-radius:50%;background:#cfe6ff;box-shadow:0 0 12px 2px rgba(143,200,255,.9);top:-5px;left:50%;margin-left:-4.5px}
.ob-marquee .core{position:absolute;inset:30px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 35%,#8FC8FF,#2E6BFF);box-shadow:0 0 50px rgba(77,162,255,.6),inset 0 0 24px rgba(255,255,255,.3);animation:obpop .7s cubic-bezier(.34,1.56,.64,1) both}
.ob-marquee .core svg{width:46px;height:46px}
@keyframes obspin{to{transform:rotate(360deg)}}
@keyframes obpop{from{transform:scale(0)}to{transform:scale(1)}}
.ob-done h2{font-size:clamp(28px,5vw,42px);margin-bottom:14px}
.ob-done .ob-lead{margin:0 auto 26px}
.ob-meet{display:inline-flex;align-items:center;gap:14px;background:rgba(77,162,255,.08);border:1px solid rgba(143,200,255,.24);border-radius:16px;padding:14px 22px;margin-bottom:30px;text-align:left}
.ob-meet .av{width:50px;height:50px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font-family:'Hanken Grotesk';font-weight:700;font-size:18px;color:#04101f;background:linear-gradient(135deg,var(--aqua-2),var(--aqua))}
.ob-meet b{display:block;color:#fff;font-size:15px}
.ob-meet span{display:block;color:var(--tx-d2);font-size:13px;margin-top:2px}

/* confetti */
.ob-confetti{position:fixed;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.ob-confetti i{position:absolute;top:-12px;width:9px;height:14px;border-radius:2px;opacity:0;animation:obfall linear forwards}
@keyframes obfall{0%{opacity:1;transform:translateY(-10px) rotate(0)}100%{opacity:0;transform:translateY(105vh) rotate(540deg)}}

@media(max-width:560px){
  .ob-card{padding:28px 20px}
  .ob-shell{padding:24px 16px 56px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;transition-duration:.05s!important}
}