/* Onboarding: guided first-run setup, activation checklist, first payout preview, register and start pages.
   Brand palette only (ink, teal, coral, apricot, mauve); no green or beige surfaces. */

/* ---------- shared bits ---------- */
.ob-kicker{font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--teal-d);text-transform:none}
.ob-pill{display:inline-flex;align-items:center;gap:6px;border-radius:99px;padding:3px 11px;font-size:12px;font-weight:700;background:var(--tint);color:var(--ink);white-space:nowrap}
.ob-pill.next{background:var(--ink);color:#fff}
.ob-pill.done{background:var(--teal-t);color:var(--teal-dd)}
.ob-pill.opt{background:transparent;border:1px dashed var(--platinum);color:var(--muted)}
.ob-pill.wait{background:var(--w-b);color:var(--w-t)}

/* ---------- welcome band on the setup page ---------- */
.ob-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--ink) 0%,#4E4160 60%,#5C4D6E 100%);color:#fff;border-radius:var(--r-panel);padding:26px 28px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;align-items:center;margin-bottom:18px}
.ob-hero::after{content:"";position:absolute;inset-inline-end:-60px;top:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(32,182,165,.28),transparent 70%);pointer-events:none}
.ob-hero h2{font-size:22px;line-height:1.45;color:#fff}
.ob-hero p{color:#DCD6E3;font-size:14px;margin-top:6px;max-width:640px}
.ob-hero .ob-trial{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.ob-hero .ob-trial span{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);border-radius:99px;padding:4px 12px;font-size:12.5px;color:#fff}
.ob-hero .ob-trial b{color:var(--apricot)}
.ob-ring{--p:0;position:relative;width:118px;height:118px;border-radius:50%;background:conic-gradient(var(--teal) calc(var(--p)*1%),rgba(255,255,255,.14) 0);display:grid;place-items:center;flex:none;z-index:1}
.ob-ring::before{content:"";position:absolute;inset:10px;border-radius:50%;background:#45395A}
.ob-ring div{position:relative;text-align:center;line-height:1.2}
.ob-ring b{display:block;font:700 26px var(--num);color:#fff}
.ob-ring span{font-size:11.5px;color:#DCD6E3}

/* ---------- layout ---------- */
.ob-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:start}
.ob-aside{position:sticky;top:calc(var(--sticky-top) + 14px);display:flex;flex-direction:column;gap:14px}
.ob-nav{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.ob-nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;font-size:14px;font-weight:600;color:var(--ink)}
.ob-nav a:hover{background:var(--tint-2)}
.ob-nav .n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:700 12px var(--num);border:2px solid var(--border);color:var(--muted);flex:none;background:#fff}
.ob-nav li.done .n{background:var(--ink);border-color:var(--ink);color:var(--teal)}
.ob-nav li.next a{background:var(--teal-t)}
.ob-nav li.next .n{border-color:var(--teal-d);color:var(--teal-d)}
.ob-nav .grow{flex:1;min-width:0}

/* ---------- steps ---------- */
.ob-steps{display:flex;flex-direction:column;gap:14px;counter-reset:ob}
.ob-step{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);scroll-margin-top:calc(var(--sticky-top) + 16px)}
.ob-step.next{border-color:var(--teal-d);box-shadow:0 0 0 3px var(--teal-t)}
.ob-step>summary{list-style:none;display:flex;align-items:center;gap:14px;padding:18px 20px;cursor:pointer;border-radius:var(--r-card)}
.ob-step>summary::-webkit-details-marker{display:none}
.ob-step>summary:focus-visible{outline:3px solid var(--teal-d);outline-offset:2px}
.ob-step>summary .s-n{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:700 14px var(--num);border:2px solid var(--border);color:var(--muted);flex:none;background:#fff}
.ob-step.done>summary .s-n{background:var(--ink);border-color:var(--ink);color:var(--teal)}
.ob-step.next>summary .s-n{border-color:var(--teal-d);color:var(--teal-d)}
.ob-step>summary h2{font-size:17px;line-height:1.4;color:var(--ink)}
.ob-step>summary .sub{font-size:13px;color:var(--muted);margin-top:2px;line-height:1.55}
.ob-step>summary .chev{transition:transform .2s var(--ease);color:var(--muted);flex:none}
.ob-step[open]>summary .chev{transform:rotate(180deg)}
.ob-step .ob-body{padding:0 20px 20px;border-top:1px solid var(--line);padding-top:18px}
.ob-step .ob-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:space-between;margin-top:16px;padding-top:14px;border-top:1px dashed var(--line)}
.ob-skip{font-size:13px;font-weight:600;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.ob-skip:hover{color:var(--ink)}

/* path choice: deed or manual */
.ob-paths{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.ob-path{border:1px solid var(--border);border-radius:14px;background:var(--tint-2)}
.ob-path[open]{grid-column:1/-1;background:#fff;border-color:var(--ink-3)}
.ob-path>summary{list-style:none;display:flex;gap:12px;align-items:flex-start;padding:16px;cursor:pointer;border-radius:14px}
.ob-path>summary::-webkit-details-marker{display:none}
.ob-path>summary:focus-visible{outline:3px solid var(--teal-d);outline-offset:2px}
.ob-path>summary .p-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#fff;border:1px solid var(--border);color:var(--ink);flex:none}
.ob-path[open]>summary .p-ic{background:var(--ink);color:var(--teal);border-color:var(--ink)}
.ob-path>summary b{display:block;font-size:15px;color:var(--ink)}
.ob-path>summary span.xs{display:block;color:var(--muted);margin-top:2px;line-height:1.55}
.ob-path .p-body{padding:0 16px 16px}
.ob-paths:has(.ob-path[open]) .ob-path:not([open]){grid-column:1/-1}

.ob-modes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.ob-modes .option{font-size:13.5px;line-height:1.55}
.ob-seg{display:flex;flex-wrap:wrap;gap:8px}
.ob-seg .option{flex:1 1 150px}
.ob-custom{display:none;margin-top:10px}
.ob-seg:has(input[value=custom]:checked)+.ob-custom{display:grid}
fieldset.ob-fs{border:0;padding:0;margin:0 0 16px;min-width:0}
fieldset.ob-fs>legend{font-weight:700;font-size:14px;color:var(--ink);margin-bottom:8px;padding:0}

/* quick beneficiary rows */
.ob-rows{display:flex;flex-direction:column;gap:8px}
.ob-row{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr) 76px minmax(0,2fr);gap:8px;align-items:end}
.ob-row .field{margin:0}
.ob-row label{font-size:12px}
.ob-row[hidden]{display:none}
.ob-rows .ob-row:not(:first-child) label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ob-tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:14px;flex-wrap:wrap}
.ob-tabs a{padding:8px 12px;font-size:14px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.ob-tabs a[aria-current=true],.ob-tabs a:hover{color:var(--ink);border-bottom-color:var(--teal)}
.ob-chips{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 12px}
.ob-chips span{display:inline-flex;align-items:center;gap:6px;background:var(--tint-2);border:1px solid var(--line);border-radius:99px;padding:3px 10px;font-size:12.5px;color:var(--ink)}
.ob-chips span i{font-style:normal;color:var(--muted);font-family:var(--num);font-size:11px}
.ob-csv-err{list-style:none;margin:8px 0 0;padding:0;font-size:13px;max-height:180px;overflow:auto}
.ob-csv-err li{padding:4px 0;border-bottom:1px solid var(--line);color:var(--e-t)}

/* ---------- first payout preview ---------- */
.ob-preview{border-radius:var(--r-card);border:1px solid var(--border);background:#fff;overflow:hidden}
.ob-preview .pv-tag{display:flex;align-items:center;gap:8px;padding:9px 16px;background:var(--tint);color:var(--ink);font-size:12.5px;font-weight:600}
.ob-preview .pv-tag .ic{color:var(--ink-3)}
.ob-preview .pv-in{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;padding:16px}
.ob-preview .pv-in .field{margin:0;flex:1 1 200px}
.pv-sentence{padding:0 16px 6px;font-size:15.5px;line-height:1.8;color:var(--ink)}
.pv-sentence b.num{font-size:17px}
.pv-fall{display:flex;height:14px;border-radius:99px;overflow:hidden;margin:10px 16px 6px;background:var(--line)}
.pv-fall i{display:block;height:100%}
.pv-fall .f-net{background:var(--teal)}.pv-fall .f-mnt{background:var(--apricot)}.pv-fall .f-inv{background:var(--mauve)}.pv-fall .f-res{background:var(--platinum)}.pv-fall .f-fee{background:var(--coral)}
.pv-legend{display:flex;flex-wrap:wrap;gap:6px 16px;padding:0 16px 12px;font-size:12.5px;color:var(--muted)}
.pv-legend span{display:inline-flex;align-items:center;gap:6px}
.pv-legend span::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--c)}
.pv-legend b{color:var(--ink);font-family:var(--num)}
.pv-lines{list-style:none;margin:0;padding:0 16px 8px}
.pv-lines li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}
.pv-lines .who{font-weight:600;font-size:14px;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.pv-lines .who small{display:block;font-weight:500;color:var(--muted);font-size:12px}
.pv-lines .amt{font:700 15px var(--num);color:var(--ink);text-align:end;white-space:nowrap}
.pv-lines .amt small{display:block;font:500 11.5px var(--num);color:var(--muted)}
.pv-lines li.held .amt{color:var(--w-t)}
.pv-lines .meter{grid-column:1/-1;height:5px;border-radius:99px;background:var(--line);overflow:hidden}
.pv-lines .meter i{display:block;height:100%;background:var(--ink-3);border-radius:99px}
.pv-lines li.held .meter i{background:var(--apricot)}
.pv-foot{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--tint-2);border-top:1px solid var(--line)}
.pv-lock{display:flex;flex-direction:column;gap:8px;padding:16px}
.pv-lock .req-li{display:flex;align-items:center;gap:10px;font-size:14px}
.pv-lock .req-li .d{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--border);flex:none;color:var(--teal-dd);background:#fff}
.pv-lock .req-li.ok .d{background:var(--ink);border-color:var(--ink);color:var(--teal)}

/* trial card */
.ob-trialcard h3{font-size:15px}
.ob-trialcard ul{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:13px;line-height:1.6}
.ob-trialcard li{display:flex;gap:8px;align-items:flex-start}
.ob-trialcard li .ic{margin-top:4px;color:var(--teal-d);flex:none}
.ob-days{display:flex;align-items:baseline;gap:8px;margin-top:6px}
.ob-days b{font:700 28px var(--num);color:var(--ink)}

/* firm portfolio list */
.ob-port{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ob-port li{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.ob-port li:first-child{border-top:0}
.ob-port .grow{min-width:0}
.ob-port .grow b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ob-port .bar{height:6px;margin-top:6px}

/* ---------- activation checklist (dashboard, start page, fragment) ---------- */
.checklist.ob-cl{padding:0;overflow:hidden;container-type:inline-size}
.ob-cl .cl-top{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;padding:18px 20px;border-bottom:1px solid var(--line)}
.ob-cl .cl-top h3{font-size:16px;display:flex;align-items:center;gap:8px}
.ob-cl .cl-top .sub{font-size:12.5px;color:var(--muted);margin-top:2px}
.ob-cl .cl-prog{display:flex;align-items:center;gap:10px;min-width:170px;flex:1 1 170px;max-width:280px;margin-inline-start:auto}
.ob-cl .cl-prog .bar{flex:1;height:8px}
.ob-cl .cl-prog .num{font-weight:700;color:var(--ink);font-size:13px;white-space:nowrap}
.ob-cl .cl-track{list-style:none;margin:0;padding:14px 20px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.ob-cl .cl-track li{min-width:0}
.ob-cl .cl-track a{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:10px;border:1px solid var(--line);height:100%;color:var(--ink);background:#fff;transition:border-color .15s,background .15s}
.ob-cl .cl-track a:hover{border-color:var(--platinum);background:var(--tint-2)}
.ob-cl .cl-track .t-n{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:700 11px var(--num);border:2px solid var(--border);color:var(--muted);background:#fff}
.ob-cl .cl-track li.done .t-n{background:var(--ink);border-color:var(--ink);color:var(--teal)}
.ob-cl .cl-track li.next a{border-color:var(--teal-d);background:var(--teal-t)}
.ob-cl .cl-track li.next .t-n{border-color:var(--teal-d);color:var(--teal-d)}
.ob-cl .cl-track b{font-size:13px;line-height:1.45}
.ob-cl .cl-track small{font-size:11.5px;color:var(--muted);line-height:1.45}
.ob-cl .cl-track li.done b{color:var(--ink-3)}
.ob-cl .cl-next{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;padding:14px 20px;background:var(--tint-2);border-top:1px solid var(--line)}
.ob-cl .cl-next .grow{flex:1 1 280px;min-width:0}
.ob-cl .cl-next b{display:block;font-size:14.5px;color:var(--ink)}
.ob-cl .cl-next p{font-size:13px;color:var(--muted);line-height:1.6}
.ob-cl .cl-teaser{display:flex;align-items:center;gap:12px;padding:12px 20px;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink)}
.ob-cl .cl-teaser .ic{color:var(--teal-d);flex:none}
.ob-cl .cl-done{padding:14px 20px}

@container (max-width:760px){.ob-cl .cl-track{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container (max-width:420px){.ob-cl .cl-track{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- register ---------- */
.reg-type{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-bottom:18px;border:0;padding:0}
.reg-type legend{font-weight:700;font-size:14px;color:var(--ink);margin-bottom:8px;padding:0}
.reg-type .option{flex-direction:row;align-items:flex-start}
.reg-type .option b{display:block;font-size:14px;color:var(--ink)}
.reg-type .option span{display:block;font-size:12px;color:var(--muted);line-height:1.55}
.reg-firm{display:none}
form:has(input[name=account_type][value=firm]:checked) .reg-firm{display:block}
form:has(input[name=account_type][value=firm]:checked) .reg-trustee{display:none}
.reg-expect{list-style:none;margin:0 0 18px;padding:14px 16px;border-radius:12px;background:var(--tint-2);border:1px solid var(--line);display:grid;gap:10px;font-size:13px;line-height:1.6}
.reg-expect li{display:flex;gap:10px;align-items:flex-start}
.reg-expect .k{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:#fff;border:1px solid var(--border);color:var(--ink)}
.reg-expect b{color:var(--ink)}
.authpanel .reg-steps{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:12px;max-width:440px}
.authpanel .reg-steps li{display:flex;gap:12px;align-items:flex-start;color:#E6E1EC;font-size:14.5px;line-height:1.6}
.authpanel .reg-steps li span.n{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:700 12px var(--num);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:var(--teal)}
.authpanel .reg-steps b{color:#fff;display:block}

/* ---------- start page (firm portfolio) ---------- */
.ob-bulk textarea{min-height:120px;width:100%}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .ob-grid{grid-template-columns:minmax(0,1fr)}
  .ob-aside{position:static}
  .ob-aside>nav{display:none}
  .ob-cl .cl-track{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:720px){
  .ob-hero{grid-template-columns:minmax(0,1fr);padding:20px;gap:14px}
  .ob-hero h2{font-size:19px}
  .ob-ring{width:92px;height:92px;grid-row:1}
  .ob-ring b{font-size:21px}
  .ob-paths,.ob-modes{grid-template-columns:minmax(0,1fr)}
  .ob-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:10px;border:1px solid var(--line);border-radius:10px}
  .ob-row .f-name,.ob-row .f-iban{grid-column:1/-1}
  .ob-rows .ob-row:not(:first-child) label{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  .ob-step>summary{padding:16px;gap:12px}
  .ob-step>summary .ob-pill{display:none}
  .ob-step .ob-body{padding:16px}
  .ob-cl .cl-track{grid-template-columns:repeat(2,minmax(0,1fr));padding:12px 16px}
  .ob-cl .cl-top,.ob-cl .cl-next{padding:14px 16px}
  .ob-cl .cl-prog{max-width:none;margin-inline-start:0}
  .reg-type{grid-template-columns:minmax(0,1fr)}
}
.note.verify .grow{min-width:0}.note.verify .num{overflow-wrap:anywhere;word-break:break-all}
@media (max-width:560px){.note.verify{flex-wrap:wrap}.note.verify .btn{margin-inline-start:28px}}