.demo-onboarding-main {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(420px, 1.15fr);
  gap: clamp(28px, 6vw, 84px);
  width: min(1180px, calc(100% - 28px));
  margin: 0 auto;
  padding: clamp(42px, 7vw, 96px) 0;
}

.demo-onboarding-intro { align-self: start; position: sticky; top: 110px; }
.demo-onboarding-intro h1 { margin: 8px 0 20px; font-size: clamp(2.4rem, 5vw, 5rem); line-height: .98; letter-spacing: -.05em; }
.demo-onboarding-intro > p { color: var(--muted); font-size: 1.1rem; line-height: 1.65; }
.demo-onboarding-intro ul { display: grid; gap: 11px; padding-left: 1.25rem; line-height: 1.5; }
.demo-onboarding-card { padding: clamp(24px, 4vw, 44px); border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
.demo-onboarding-card h2 { margin: 5px 0 24px; font-size: clamp(1.8rem, 3vw, 2.8rem); }
.demo-onboarding-form { grid-template-columns: 1fr 1fr; }
.demo-onboarding-form .demo-form-divider,
.demo-onboarding-form .demo-authority,
.demo-onboarding-form .demo-context-picker,
.demo-onboarding-form .demo-context-scope-note,
.demo-onboarding-form .demo-context-confirmation,
.demo-onboarding-form .website-field,
.demo-onboarding-form > button,
.demo-onboarding-form > .form-note { grid-column: 1 / -1; }
.demo-form-divider { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 20px; border-top: 1px solid var(--line); }
.demo-form-divider span { color: var(--muted); font-size: .88rem; }
.demo-context-picker { padding: 18px; background: #f8fbfa; }
.demo-context-picker .checkbox-line { align-items: flex-start; min-height: 104px; padding: 13px; border: 1px solid #d5e1de; border-radius: 10px; background: #fff; cursor: pointer; }
.demo-context-picker .checkbox-line:has(input:checked) { border-color: var(--green); background: #eaf6f1; box-shadow: inset 0 0 0 1px var(--green); }
.demo-context-picker .checkbox-line input { flex: 0 0 auto; margin-top: 2px; }
.demo-context-picker .checkbox-line span { display: grid; gap: 5px; }
.demo-context-picker .checkbox-line strong { color: var(--deep); line-height: 1.25; }
.demo-context-picker .checkbox-line small { color: #52645f; font-weight: 650; line-height: 1.4; }
.demo-context-scope-note { display: grid; gap: 5px; padding: 16px 18px; border-left: 5px solid var(--green); border-radius: 8px; background: #eef8f4; line-height: 1.5; }
.demo-context-scope-note span { color: var(--muted); }
.demo-context-confirmation { align-items: flex-start; padding: 14px; border: 1px solid #a9cbc1; border-radius: 10px; background: #f5faf8; line-height: 1.45; }
.demo-context-confirmation input { margin-top: 2px; }

.vo-dashboard { width: min(1180px, calc(100% - 28px)); }
.demo-role-banner,
.demo-account-banner,
.vo-role-help { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-bottom: 24px; padding: clamp(22px, 4vw, 38px); border: 1px solid #7eb6a7; border-radius: 16px; background: linear-gradient(140deg, #dff2eb, #fff); }
.demo-role-banner h1, .demo-account-banner h2, .vo-role-help h2 { margin: 4px 0 10px; }
.demo-account-actions { display: grid; flex: 0 0 auto; gap: 10px; }
.demo-account-actions form, .demo-role-banner form { margin: 0; }
.vo-boundary { display: grid; gap: 6px; margin: 0 0 24px; padding: 18px 22px; border-left: 5px solid var(--deep); background: #eef5f3; }
.vo-next-step { margin: 28px 0; padding: clamp(24px, 4vw, 40px); border-radius: 16px; background: var(--deep); color: #fff; }
.vo-next-step h2 { margin: 5px 0 18px; font-size: clamp(1.7rem, 3vw, 2.7rem); }
.vo-next-step ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; padding-left: 1.25rem; line-height: 1.5; }
.vo-run-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 28px 0; }
.vo-run-card { padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 10px 32px rgba(8, 37, 32, .07); }
.vo-run-card.is-example { border-style: dashed; }
.vo-reminder-form { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.vo-reminder-form small { color: var(--muted); }

@media (max-width: 820px) {
  .demo-onboarding-main, .vo-run-grid { grid-template-columns: 1fr; }
  .demo-onboarding-intro { position: static; }
  .demo-onboarding-form { grid-template-columns: 1fr; }
  .demo-onboarding-form > * { grid-column: 1 !important; }
  .demo-context-picker .checkbox-grid { grid-template-columns: 1fr; }
  .demo-role-banner, .demo-account-banner, .vo-role-help { align-items: stretch; flex-direction: column; }
  .vo-next-step ol { grid-template-columns: 1fr; }
  .vo-reminder-form { align-items: stretch; flex-direction: column; }
}