#onboarding:not(.ov) .ov-only { display: none !important; }
#onboarding .ov-k, #onboarding .ov-ehead, #onboarding .ov-hint, #onboarding .ov-side, #onboarding .ov-brand, #onboarding .ov-segs { display: none; }
#onboarding.ov .step-eyebrow:not(.ov-eb) { display: none; }
#onboarding.ov [data-ov-back][hidden] { display: none; }
#onboarding.ov.ov-adv-nodata .ov-hint { display: block; }
#onboarding.ov.ov-adv-nodata #data-no-info { display: none !important; }
#onboarding.ov .step h2 { font-size: 28px; text-wrap: balance; }
#onboarding.ov .step-sub b { color: var(--text); }

#onboarding .ov-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
#onboarding .ov-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#onboarding .ov-pc { position: relative; text-align: left; display: flex; flex-direction: column; gap: 10px; background: var(--bg-elev-2); border: 1px solid var(--border-strong); border-radius: 14px; padding: 18px 18px 16px; color: var(--text); cursor: pointer; font: inherit; transition: border-color .15s, transform .15s, box-shadow .15s; min-width: 0; width: 100%; }
#onboarding .ov-pc:hover { border-color: #3b4658; transform: translateY(-1px); }
#onboarding .ov-pc.sel { border-color: var(--apex); box-shadow: 0 0 0 1px var(--apex), 0 10px 30px rgba(255,107,53,.12); background: linear-gradient(180deg, rgba(255,107,53,.08), var(--bg-elev-2) 60%); }
#onboarding .ov-pc:focus-visible { outline: 2px solid var(--apex); outline-offset: 2px; }
#onboarding .ov-badge { position: absolute; top: -10px; left: 16px; background: var(--apex); color: #07090f; font: 700 10.5px 'IBM Plex Mono', monospace; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; }
#onboarding .ov-pc-top { display: flex; flex-direction: column; gap: 2px; padding-right: 26px; }
#onboarding .ov-pc-name { font-size: 17px; font-weight: 700; }
#onboarding .ov-pc-tag { font-size: 12.5px; color: var(--text-dim); }
#onboarding .ov-pc-price { display: flex; flex-direction: column; gap: 2px; }
#onboarding .ov-was { color: var(--text-faint); font-size: 13px; }
#onboarding .ov-pz { font: 600 26px 'IBM Plex Mono', monospace; }
#onboarding .ov-pz.ov-free { color: var(--gain); }
#onboarding .ov-per { color: var(--text-dim); font-size: 13px; }
#onboarding .ov-pc-sub { font-size: 12.5px; color: var(--text-dim); }
#onboarding .ov-feats { list-style: none; display: grid; gap: 6px; font-size: 13px; color: var(--text-dim); border-top: 1px solid var(--border); padding: 10px 0 0; margin: 0; }
#onboarding .ov-feats li { padding-left: 18px; position: relative; }
#onboarding .ov-feats li::before { content: ''; position: absolute; left: 2px; top: 6px; width: 9px; height: 5px; border-left: 2px solid var(--gain); border-bottom: 2px solid var(--gain); transform: rotate(-45deg); }
#onboarding .ov-radio { position: absolute; top: 18px; right: 16px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border-strong); }
#onboarding .ov-pc.sel .ov-radio { border-color: var(--apex); background: radial-gradient(var(--apex) 0 5px, transparent 6px); }
#onboarding .ov-pc.compact { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 14px 44px 14px 16px; }
#onboarding .ov-pc.compact .ov-pc-price { flex-direction: row; align-items: baseline; gap: 6px; }
#onboarding .ov-pc.compact .ov-pz { font-size: 18px; }
#onboarding .ov-pc.compact .ov-pc-sub { display: none; }
#onboarding .ov-pc.compact .ov-badge { top: -9px; }
#onboarding .ov-pc.compact .ov-radio { top: 50%; transform: translateY(-50%); }
#onboarding .ov-k2 { font: 600 11px 'IBM Plex Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 10px; }
#onboarding .ov-k2.ov-alt { margin-top: 18px; }
#onboarding .ov-chosen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text-dim); background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; }
#onboarding .ov-chosen b { color: var(--text); }
#onboarding .ov-change { margin-left: auto; background: none; border: 0; color: var(--apex); cursor: pointer; font: inherit; font-size: 13px; text-decoration: underline; padding: 2px 0; }
#onboarding .ov-sum { background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 14px; padding: 18px; }
#onboarding .ov-sum-name { font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
#onboarding .ov-sum-price { margin: 6px 0 12px; flex-direction: row; align-items: baseline; gap: 8px; }
#onboarding .ov-betatag { font: 700 10px 'IBM Plex Mono', monospace; color: #07090f; background: var(--gain); border-radius: 5px; padding: 2px 6px; letter-spacing: .06em; }

#onboarding.ov-a .modal { max-width: 820px; }
#onboarding.ov-c .modal { max-width: 760px; }
#onboarding.ov-a .modal-body, #onboarding.ov-c .modal-body { padding: 32px 34px 26px; }
#onboarding.ov-a .step-actions .btn-primary, #onboarding.ov-c .step-actions .btn-primary { flex: 0 1 220px; margin-left: auto; }

#onboarding.ov-b .modal { max-width: 1040px; display: grid; grid-template-columns: 300px minmax(0, 1fr); grid-template-rows: auto auto auto; align-content: start; }
#onboarding.ov-b .modal-header, #onboarding.ov-b .modal-progress { grid-column: 1 / -1; }
#onboarding.ov-b .ov-side { display: flex; flex-direction: column; gap: 22px; background: var(--bg-base); border-right: 1px solid var(--border); padding: 28px 24px; }
#onboarding.ov-b .modal-body { padding: 34px 36px 26px; min-width: 0; }
#onboarding.ov-b .ov-grid { grid-template-columns: minmax(0, 1fr); }
#onboarding.ov-b .ov-pc { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-right: 48px; }
#onboarding.ov-b .ov-pc .ov-pc-top { min-width: 170px; }
#onboarding.ov-b .ov-pc .ov-feats { display: none; }
#onboarding.ov-b .ov-pc .ov-pc-price { flex-direction: row; align-items: baseline; gap: 8px; margin-left: auto; }
#onboarding.ov-b .ov-pc .ov-radio { top: 50%; transform: translateY(-50%); }
#onboarding.ov-b .step-actions .btn-primary { flex: 0 1 220px; margin-left: auto; }
#onboarding .ov-stepper { list-style: none; display: grid; gap: 4px; margin: 0; padding: 0; }
#onboarding .ov-stepper li { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; color: var(--text-faint); font-size: 14px; }
#onboarding .ov-dot { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 600 12px 'IBM Plex Mono', monospace; border: 1px solid var(--border-strong); }
#onboarding .ov-stepper li.cur { color: var(--text); background: var(--bg-elev-2); }
#onboarding .ov-stepper li.cur .ov-dot { background: var(--apex); border-color: var(--apex); color: #07090f; }
#onboarding .ov-stepper li.done { color: var(--text-dim); }
#onboarding .ov-stepper li.done .ov-dot { background: rgba(16,185,129,.15); border-color: transparent; color: var(--gain); }

#onboarding.ov-d { padding: 0; }
#onboarding.ov-d .modal { max-width: none; width: 100%; height: 100%; max-height: none; border: 0; border-radius: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--bg-base); }
#onboarding.ov-d .modal-header { gap: 24px; padding: 14px max(20px, 4vw); }
#onboarding.ov-d .modal-title, #onboarding.ov-d .modal-progress { display: none; }
#onboarding.ov-d .ov-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; flex: none; }
#onboarding .ov-bm { width: 28px; height: 28px; border-radius: 7px; background: linear-gradient(135deg, var(--apex), #ff8c5a); color: #07090f; display: grid; place-items: center; font: 700 15px 'IBM Plex Serif', serif; }
#onboarding.ov-d .ov-segs { display: grid; list-style: none; flex: 1; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; max-width: 720px; margin: 0 auto; padding: 0; }
#onboarding .ov-segs li { border-top: 3px solid var(--bg-elev-3); padding-top: 6px; font: 500 11.5px 'IBM Plex Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
#onboarding .ov-segs li.on { border-color: var(--apex); color: var(--text); }
#onboarding.ov-d .modal-body { flex: 1; overflow: auto; padding: 48px max(20px, 4vw) 0; }
#onboarding.ov-d .step { max-width: 980px; margin: 0 auto; }
#onboarding.ov-d .step h2 { font-size: 40px; }
#onboarding.ov-d .step .step-sub { font-size: 16px; max-width: 62ch; }
#onboarding.ov-d .step > :not(.ov-plans):not(h2):not(.step-sub):not(.step-actions):not(.ov-eb) { max-width: 620px; }
#onboarding.ov-d .step-actions { margin: 32px 0 0; padding: 14px 0 calc(14px + env(safe-area-inset-bottom, 0px)); background: var(--bg-elev-1); border-top: 1px solid var(--border); box-shadow: 0 0 0 100vmax var(--bg-elev-1); clip-path: inset(0 -100vmax); }
#onboarding.ov-d .step-actions .btn-primary { flex: 0 1 240px; margin-left: auto; }
#onboarding.ov-d .step[data-step="3"] .step-actions { background: none; border: 0; box-shadow: none; clip-path: none; margin-top: 14px; }
#onboarding.ov-d .step[data-step="3"], #onboarding.ov-d .success-step { padding-bottom: 40px; }

#onboarding.ov-e .modal { max-width: 1060px; display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: auto auto auto; align-content: start; }
#onboarding.ov-e .modal-header, #onboarding.ov-e .modal-progress { grid-column: 1 / -1; }
#onboarding.ov-e .modal-body { grid-column: 1; grid-row: 3; padding: 30px 34px; min-width: 0; }
#onboarding.ov-e .ov-side { display: block; grid-column: 2; grid-row: 3; border-left: 1px solid var(--border); padding: 30px 24px; background: var(--bg-base); }
#onboarding.ov-e .ov-side .ov-stepper { display: none; }
#onboarding.ov-e .ov-side .ov-sum { position: sticky; top: 20px; }
#onboarding.ov-e:not(.ov-done) .ov-ehead { display: block; }
#onboarding.ov-e:not(.ov-done) .step[data-step="0"], #onboarding.ov-e:not(.ov-done) .step[data-step="1"], #onboarding.ov-e:not(.ov-done) .step[data-step="2"], #onboarding.ov-e:not(.ov-done) .step[data-step="3"] { display: block; animation: none; margin-top: 22px; }
#onboarding.ov-e .ov-k { display: block; font: 600 11px 'IBM Plex Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--apex); margin-bottom: 10px; }
#onboarding.ov-e .ov-k:empty { display: none; }
#onboarding.ov-e .step[data-step="2"] { margin-top: 0 !important; }
#onboarding.ov-e:not(.ov-done) .step .ov-eb, #onboarding.ov-e:not(.ov-done) .step h2, #onboarding.ov-e:not(.ov-done) .step .step-sub,
#onboarding.ov-e:not(.ov-done) .step:not([data-step="3"]) .step-actions, #onboarding.ov-e .step[data-step="3"] .step-actions,
#onboarding.ov-e .step .info-card:not(.ov-hint):not(#magic-direct-box):not(#magic-sent-box), #onboarding.ov-e #data-yes-upgrade, #onboarding.ov-e .ov-chosen { display: none !important; }
#onboarding.ov-e .ov-ehead h2 { font-family: 'IBM Plex Serif', serif; font-size: 28px; font-weight: 500; line-height: 1.2; margin-bottom: 10px; text-wrap: balance; }
#onboarding.ov-e .ov-ehead .step-sub { font-size: 14.5px; color: var(--text-dim); margin: 0; line-height: 1.55; }
#onboarding.ov-e .ov-grid { gap: 10px; }
#onboarding.ov-e .toggle-row { padding: 14px 16px; margin-bottom: 10px; }
#onboarding.ov-e .ov-hint { padding: 10px 14px; }
#onboarding .ov-ejump { display: none; }
#onboarding.ov-e:not(.ov-done):not(.ov-form-seen) .ov-ejump { display: block; position: sticky; bottom: 0; z-index: 3; margin: 18px -34px -30px; padding: 12px 34px calc(14px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to bottom, transparent, var(--bg-elev-1) 14px); }
#onboarding .ov-ejump .btn { width: 100%; justify-content: center; }

@media (max-width: 860px) {
  #onboarding.ov-b .modal, #onboarding.ov-e .modal { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; }
  #onboarding.ov-b .ov-side { border-right: 0; border-bottom: 1px solid var(--border); padding: 12px 16px; }
  #onboarding.ov-b .ov-sumbox, #onboarding.ov-e .ov-side { display: none; }
  #onboarding.ov-e .modal-body { grid-row: auto; }
  #onboarding .ov-stepper { grid-auto-flow: column; grid-auto-columns: 1fr; }
  #onboarding .ov-stepper li { flex-direction: column; gap: 4px; font-size: 11px; padding: 6px 2px; text-align: center; }
}
@media (max-width: 600px) {
  #onboarding.ov-a .modal-body, #onboarding.ov-b .modal-body, #onboarding.ov-c .modal-body, #onboarding.ov-e .modal-body { padding: 22px 18px; }
  #onboarding.ov .step h2, #onboarding.ov-e .ov-ehead h2 { font-size: 24px; }
  #onboarding.ov-d .step h2 { font-size: 28px; }
  #onboarding .ov-grid, #onboarding .ov-grid.two { grid-template-columns: minmax(0, 1fr); }
  #onboarding .ov-pc { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 14px 44px 14px 16px; }
  #onboarding .ov-pc .ov-feats, #onboarding .ov-pc .ov-pc-sub { display: none; }
  #onboarding .ov-radio { top: 50%; transform: translateY(-50%); }
  #onboarding .ov-pc .ov-pc-price { flex-direction: row; align-items: baseline; gap: 6px; }
  #onboarding .ov-pz { font-size: 20px; }
  #onboarding.ov .step-actions .btn-primary { flex: 1; }
  #onboarding.ov-d .modal-header { gap: 12px; }
  #onboarding.ov-d .ov-segs li span { display: none; }
  #onboarding.ov-d .modal-body { padding: 26px 18px 0; }
  #onboarding.ov-e:not(.ov-done):not(.ov-form-seen) .ov-ejump { margin: 18px -18px -22px; padding-left: 18px; padding-right: 18px; }
}
