/* ==== the /onboard sequence: zero JS ============================================================== */
.onb { padding: 52px 0 168px; }
.onb-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 404px); gap: 56px; align-items: start; }
.onb-main { min-width: 0; }
.onb-side { display: grid; gap: 30px; min-width: 0; padding-top: 64px; }


.onb-alert { margin-bottom: 18px; padding: 16px 20px; border-radius: 12px; background: rgba(var(--bad-rgb), .05); border: 1px solid rgba(var(--bad-rgb), .32); font-size: 15px; line-height: 1.55; color: var(--t2); }
.onb-alert b { color: var(--bad); font-weight: 600; }
.onb-errlead { display: flex; gap: 10px; align-items: baseline; margin-bottom: 18px; font-size: 15px; font-weight: 500; color: var(--bad); }
.onb-errlead::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--bad); transform: translateY(-1px); }

.onb-card { padding: 38px 44px 40px; }
.onb-of { margin-bottom: 14px; }
.onb-of span { margin: 0 2px; }
.onb-title { font-size: 40px; line-height: 1.08; }
.onb-sub { margin-top: 14px; max-width: 54ch; font-size: 17px; line-height: 1.55; color: var(--t3); text-wrap: pretty; }
.onb-form { display: grid; gap: 26px; margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--ls); }
.onb-btns { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.onb-back { margin-right: auto; }
.onb-go { margin-left: auto; }
.onb-fwd { margin-top: 22px; max-width: 56ch; font-size: 15px; color: var(--t3); }
.onb-fwd .tlink { display: inline; white-space: normal; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* the companion: the firm's console as the answers arrive (CSS :has() reflects this step's picks) */
.onb-side > * { min-width: 0; }
.onb-form { container-type: inline-size; }
@container (max-width: 600px) { .opts.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 380px) { .opts, .opts.three { grid-template-columns: minmax(0, 1fr); } }

.cmp { border-color: #DAD6CC; }
.cmp-top { gap: 10px; padding: 0 14px; }
.cmp-tile { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 5px; background: var(--ui-violet); color: #fff; font: 600 9px/1 var(--font); letter-spacing: .02em; }
.cmp-tile:empty { background: var(--ui-line-2); }
.cmp-state { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12px; color: var(--ui-mute); white-space: nowrap; }
.cmp-state .ui-g { width: 12px; height: 12px; }
.cmp-state .ui-g.done::after { left: 3.8px; top: 2.3px; width: 3px; height: 5.4px; }
.cmp-head { display: grid; gap: 3px; padding: 16px 16px 14px; border-bottom: 1px solid var(--ui-line); }
.cmp-firm { font-size: 15px; line-height: 1.3; font-weight: 600; letter-spacing: -.012em; color: var(--ui-ink); }
.cmp-person { font-size: 12px; color: var(--ui-mute); }
.cmp-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 36px; padding: 6px 16px; border-bottom: 1px solid var(--ui-line); }
.cmp-k { font-size: 12px; color: var(--ui-mute); }
.cmp-v { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; font-size: 13px; font-weight: 500; color: var(--ui-ink); }
.cv-e { font-weight: 400; color: var(--ui-mute); }
.cv-o, .cv-r { display: none; }
.cv-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 5px; border: 1px solid var(--ui-line-2); font-size: 12px; font-weight: 500; color: var(--ui-ink-2); white-space: nowrap; }
.cv-o.cv-tag { display: none; }
.cmp-end { display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 16px; background: var(--ui-sub); font-size: 12px; color: var(--ui-mute); }
.cmp-end .ui-g { width: 12px; height: 12px; }
.cmp .band.on { background: var(--ui-violet-bg); box-shadow: inset 2px 0 0 var(--ui-violet); }
.onb-ledger .label { margin-bottom: 10px; }
.onb-ledger dl { border-top: 1px solid var(--rule); }
.onb-ledger dl > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--ls); }
.onb-ledger dt { font: 400 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--t4); }
.onb-ledger dd { font-size: 15px; color: var(--t2); }

/* closing screens */
.onb-end .onb-side { padding-top: 120px; }
.onb-endh { margin-top: 4px; font-size: 56px; }
.rcpt { margin-top: 30px; }
.rcpt dl > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 15px 22px; border-bottom: 1px solid var(--ls); }
.rcpt dl > div:last-child { border-bottom: 0; }
.rcpt dt { font: 400 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--t4); }
.rcpt dd { font-size: 16px; color: var(--t1); overflow-wrap: anywhere; }
.onb-sentence { margin-top: 30px; max-width: 40ch; color: var(--t1); text-wrap: balance; }
.onb-donebody { margin-top: 12px; max-width: 56ch; font-size: 16px; color: var(--t3); }
.ws-fwd { display: block; margin-top: 30px; border-radius: 18px; transition: box-shadow .16s var(--ease); }
.ws-fwd-in { display: flex; align-items: center; gap: 18px; min-width: 0; padding: 18px 22px; font-size: 16px; line-height: 1.5; color: var(--t3); }
.ws-fwd-in b { color: var(--t1); font-weight: 600; text-decoration: underline; text-decoration-color: var(--ls2); text-underline-offset: .2em; }
.ws-fwd-in .ar { margin-left: auto; color: var(--t1); }
.ws-fwd:hover { box-shadow: inset 0 0 0 1px var(--l2), var(--frame-shadow); }
.ws-fwd:hover b { text-decoration-color: var(--accent-text); }
.ws-fwd:hover .ar { transform: translateX(2px); }
.onb-links { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 26px; font-size: 15px; }


/* the workspace: the grain's own view, sandbox said out loud */
.ws-wrap > * { max-width: 1080px; }
.ws-head { display: grid; justify-items: start; gap: 18px; }
.ws-badge { height: 28px; padding: 0 12px; font-size: 12.5px; }
.ws-lede { margin-top: 20px; max-width: 58ch; }
.ws-frame { margin-top: 36px; }
.ws-facts { grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0 var(--ui-x); border-top: 0; }
.ws-facts > div { padding: 12px 0 13px 14px; }
.ws-facts dt { font-size: 12px; color: var(--ui-mute); white-space: nowrap; }
.ws-facts dd { font-size: 13px; font-weight: 500; color: var(--ui-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-row { height: auto; min-height: 40px; padding-top: 8px; padding-bottom: 8px; grid-template-columns: 14px 52px minmax(0, 1fr) 136px 64px; }
.ws-row .ui-t { white-space: normal; line-height: 1.45; }
.ws-type { font-size: 12px; color: var(--ui-mute); overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 760px) { .ws-row { grid-template-columns: 14px 52px minmax(0, 1fr) 64px; } .ws-type { display: none; } }
@container (max-width: 520px) { .ws-win > * { --ui-x: 16px; } .ws-row { grid-template-columns: 14px minmax(0, 1fr) 56px; } .ws-win .ui-id, .ws-win .ui-top .ui-date { display: none; } .ws-facts { grid-template-columns: minmax(0, 1fr); padding: 0 16px; } .ws-facts > div { display: flex; justify-content: space-between; gap: 12px; border-left: 0; padding: 10px 0; border-bottom: 1px solid var(--ui-line); } .ws-facts > div:last-child { border-bottom: 0; } }
.ws-ttl { margin-top: 20px; max-width: 70ch; }
.ws-act { margin-top: 34px; }

@media (max-width: 1100px) { .onb-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 40px; } .cmp-row { grid-template-columns: 108px minmax(0, 1fr); } }
@media (max-width: 960px) {
  .onb-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .onb-side, .onb-end .onb-side { padding-top: 0; max-width: 560px; }
}

@media (max-width: 640px) {
  .onb { padding: 32px 0 104px; }
  .onb-card { padding: 26px 20px 26px; }
  .onb-title { font-size: 31px; }
  .onb-sub { font-size: 16px; }
  .onb-btns { flex-direction: column-reverse; align-items: stretch; }
  .onb-btns .btn { width: 100%; height: 48px; }
  .onb-back { margin-right: 0; }
  .onb-go { margin-left: 0; }
  .onb-endh { font-size: 38px; }
  .rcpt dl > div { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 13px 16px; }
  .ws-bar { padding: 0 12px; gap: 10px; }
  .ws-sb { display: none; }
  .ws-body { padding: 10px; }
  .ws-act .btn { width: 100%; height: 48px; }
  .cmp-row { grid-template-columns: 104px minmax(0, 1fr); padding: 6px 14px; }
  .ws-win .ui-id { display: none; }
}
.onb:has(input[name="role"]:checked) .cmp [data-f="role"] .cv-e{display:none}.onb:has(input[name="role"][value="managing-partner"]:checked) .cmp [data-f="role"] .cv-o[data-v="managing-partner"]{display:inline-flex}.onb:has(input[name="role"][value="firm-owner"]:checked) .cmp [data-f="role"] .cv-o[data-v="firm-owner"]{display:inline-flex}.onb:has(input[name="role"][value="practice-group-lead"]:checked) .cmp [data-f="role"] .cv-o[data-v="practice-group-lead"]{display:inline-flex}.onb:has(input[name="role"][value="another-firm-role"]:checked) .cmp [data-f="role"] .cv-o[data-v="another-firm-role"]{display:inline-flex}.onb:has(input[name="firmSize"]:checked) .cmp [data-f="firmSize"] .cv-e{display:none}.onb:has(input[name="firmSize"][value="2-5"]:checked) .cmp [data-f="firmSize"] .cv-o[data-v="2-5"]{display:inline-flex}.onb:has(input[name="firmSize"][value="6-10"]:checked) .cmp [data-f="firmSize"] .cv-o[data-v="6-10"]{display:inline-flex}.onb:has(input[name="firmSize"][value="11-20"]:checked) .cmp [data-f="firmSize"] .cv-o[data-v="11-20"]{display:inline-flex}.onb:has(input[name="firmSize"][value="another-size"]:checked) .cmp [data-f="firmSize"] .cv-o[data-v="another-size"]{display:inline-flex}.onb:has(input[name="areas"]:checked) .cmp [data-f="areas"] .cv-e{display:none}.onb:has(input[name="areas"][value="patent"]:checked) .cmp [data-f="areas"] .cv-o[data-v="patent"]{display:inline-flex}.onb:has(input[name="areas"][value="trademark"]:checked) .cmp [data-f="areas"] .cv-o[data-v="trademark"]{display:inline-flex}.onb:has(input[name="areas"][value="corporate"]:checked) .cmp [data-f="areas"] .cv-o[data-v="corporate"]{display:inline-flex}.onb:has(input[name="areas"][value="litigation"]:checked) .cmp [data-f="areas"] .cv-o[data-v="litigation"]{display:inline-flex}.onb:has(input[name="areas"][value="another-area"]:checked) .cmp [data-f="areas"] .cv-o[data-v="another-area"]{display:inline-flex}.onb:has(input[name="software"]:checked) .cmp [data-f="software"] .cv-e{display:none}.onb:has(input[name="software"][value="clio"]:checked) .cmp [data-f="software"] .cv-o[data-v="clio"]{display:inline-flex}.onb:has(input[name="software"][value="mycase"]:checked) .cmp [data-f="software"] .cv-o[data-v="mycase"]{display:inline-flex}.onb:has(input[name="software"][value="another-system"]:checked) .cmp [data-f="software"] .cv-o[data-v="another-system"]{display:inline-flex}.onb:has(input[name="software"][value="none"]:checked) .cmp [data-f="software"] .cv-o[data-v="none"]{display:inline-flex}.onb:has(input[name="collab"]:checked) .cmp [data-f="collab"] .cv-e{display:none}.onb:has(input[name="collab"][value="slack"]:checked) .cmp [data-f="collab"] .cv-o[data-v="slack"]{display:inline-flex}.onb:has(input[name="collab"][value="teams"]:checked) .cmp [data-f="collab"] .cv-o[data-v="teams"]{display:inline-flex}.onb:has(input[name="collab"][value="neither"]:checked) .cmp [data-f="collab"] .cv-o[data-v="neither"]{display:inline-flex}.onb:has(input[name="suite"]:checked) .cmp [data-f="suite"] .cv-e{display:none}.onb:has(input[name="suite"][value="google"]:checked) .cmp [data-f="suite"] .cv-o[data-v="google"]{display:inline-flex}.onb:has(input[name="suite"][value="microsoft-365"]:checked) .cmp [data-f="suite"] .cv-o[data-v="microsoft-365"]{display:inline-flex}.onb:has(input[name="suite"][value="another-suite"]:checked) .cmp [data-f="suite"] .cv-o[data-v="another-suite"]{display:inline-flex}.onb:has(input[name="posture"]:checked) .cmp [data-f="posture"] .cv-e{display:none}.onb:has(input[name="posture"][value="now"]:checked) .cmp [data-f="posture"] .cv-o[data-v="now"]{display:inline-flex}.onb:has(input[name="posture"][value="this-quarter"]:checked) .cmp [data-f="posture"] .cv-o[data-v="this-quarter"]{display:inline-flex}.onb:has(input[name="posture"][value="watching"]:checked) .cmp [data-f="posture"] .cv-o[data-v="watching"]{display:inline-flex}.onb:has(input[name="role"][value="managing-partner"]:checked) .cmp-person [data-v="managing-partner"]{display:inline}.onb:has(input[name="role"][value="firm-owner"]:checked) .cmp-person [data-v="firm-owner"]{display:inline}.onb:has(input[name="role"][value="practice-group-lead"]:checked) .cmp-person [data-v="practice-group-lead"]{display:inline}.onb:has(input[name="role"][value="another-firm-role"]:checked) .cmp-person [data-v="another-firm-role"]{display:inline}.onb:has(input[name="role"]:checked) .cmp-person .cv-e{display:none}