.demo-body { margin:0; background:#f5f5f7; color:#1d1d1f; font-family:"Inter",system-ui,sans-serif; }
.demo-main { min-height:100dvh; box-sizing:border-box; padding:0 clamp(20px,4vw,64px) 64px; }
.demo-topbar { display:flex; align-items:center; gap:24px; position:sticky; top:0; z-index:20; min-height:76px; background:rgb(245 245 247 / .96); backdrop-filter:blur(16px); border-bottom:1px solid #dedee3; margin-bottom:36px; }
.demo-body .demo-main>.demo-topbar { display:flex; margin:0 0 36px; padding:0; }
.demo-brand { font-size:1.25rem; font-weight:750; letter-spacing:-.04em; color:#1d1d1f; text-decoration:none; min-height:44px; display:inline-flex; align-items:center; }
.demo-location { font-size:.875rem; color:#28282e; }
.demo-top-actions { margin-left:auto; display:flex; gap:12px; }
.demo-top-actions .button { background:#fff; }
.demo-page-heading { margin:0 0 22px; }
.demo-page-heading h1 { margin:0; font-size:clamp(2rem,3.4vw,3rem); line-height:1.15; font-weight:750; letter-spacing:-.055em; overflow-wrap:anywhere; }
.demo-lead { max-width:860px; line-height:1.7; margin:0 0 28px; }
.demo-studies { display:grid; gap:18px; }
.demo-study { display:flex; align-items:center; gap:26px; padding:32px; border:1px solid #dedee3; border-radius:22px; background:#fff; box-shadow:0 8px 32px #1d1d1f04; transition:box-shadow 180ms,transform 180ms; }
.demo-study:hover { box-shadow:0 12px 36px #1d1d1f0b; transform:translateY(-2px); }
.demo-study-example { background:linear-gradient(110deg,#f0fbf5,#fff 60%); }
.demo-study-trial { background:linear-gradient(110deg,#fff9ef,#fff 60%); }
.demo-study-icon { flex-shrink:0; width:56px; height:56px; background:#fff; border-radius:16px; display:grid; place-items:center; color:#983100; }
.demo-study-info { flex:1; min-width:0; }
.demo-study h2 { font-size:1.375rem; margin:0 0 10px; letter-spacing:-.035em; }
.demo-study p { margin:0; line-height:1.6; }
.demo-study-count { display:flex; flex-direction:column; align-items:center; gap:4px; min-width:90px; }
.demo-study-count strong { font-size:2.5rem; line-height:1; letter-spacing:-.055em; }
.demo-access-note { margin-top:30px; line-height:1.7; color:#28282e; }
.demo-feedback:not([hidden]),.demo-recovery:not([hidden]) { padding:16px 0; line-height:1.7; }
.demo-feedback[role="alert"] { color:#53151b; }
.demo-recovery { position:relative; z-index:30; }
.demo-recovery .button { margin-top:8px; }
.demo-main:has(.demo-login-form) { max-width:960px; margin:auto; }
.demo-main:has(.demo-login-form) .demo-page-heading { margin-top:clamp(40px,8vh,120px); }
.demo-login-form { display:grid; gap:22px; max-width:600px; padding:32px; background:#fff; border:1px solid #dedee3; border-radius:22px; }
.demo-login-hint { max-width:600px; line-height:1.7; margin-top:24px; }
.demo-body :is(input,select) { color:#1d1d1f; font:inherit; }
.demo-login-form input,.demo-question-setup>div>input,.demo-question-setup>div>select { box-sizing:border-box; min-height:50px; width:100%; border:1px solid #c7c7cc; border-radius:12px; padding:12px 14px; background:#f5f5f7; }
.demo-question-setup { max-width:1120px; margin:auto; background:#fff; border:1px solid #dedee3; border-radius:24px; padding:clamp(20px,4vw,48px); display:grid; gap:26px; }
.demo-question-setup > [hidden] { display:none !important; }
.demo-question-setup label { color:#1d1d1f; }
.demo-question-setup .source-respondent-functions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.demo-question-setup .source-respondent-configuration { display:grid; gap:22px; }
.demo-question-setup .source-respondent-questions { max-height:55vh; overflow:auto; }
.demo-trial-actions { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:28px; }
.demo-draft-list { margin:0 0 32px; background:#fff; border:1px solid #dedee3; border-radius:18px; padding:24px; }
.demo-draft-list h2 { margin:0 0 12px; font-size:1.25rem; }
.demo-draft-row { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 0; border-bottom:1px solid #dedee3; }
.demo-draft-row:last-child { border:0; }
.demo-draft-row p { margin:6px 0 0; }
.demo-receipt { max-width:850px; margin:60px auto; padding:40px; border-radius:24px; background:#fff; }
.demo-receipt-icon { display:inline-grid; place-items:center; width:64px; height:64px; border-radius:50%; background:#e6f7ef; color:#175538; margin-bottom:24px; }
.demo-questionnaire { background:#fff; padding-bottom:0; }
.demo-questionnaire .demo-topbar { background:rgb(255 255 255 / .96); }
.demo-questionnaire .demo-page-heading,.demo-questionnaire>.demo-content { max-width:1600px; margin-inline:auto; }
.demo-questionnaire .demo-page-heading h1 { font-size:clamp(1.7rem,2.7vw,2.8rem); }
.demo-form-host { width:100%; }
.demo-questionnaire .source-form { max-width:none; width:100%; margin:0; }
.demo-body .demo-questionnaire [data-demo-form] .source-form[data-source-layout="orbita"] { width:100%; max-width:1600px; margin-inline:auto; }
.demo-body :focus-visible { outline:3px solid #9b3000; outline-offset:4px; }
.demo-loading { padding:48px; }
@media(max-width:900px) { .demo-study { flex-wrap:wrap; padding:24px; gap:18px; } .demo-study-info { flex-basis:calc(100% - 80px); } .demo-study .button { margin-left:auto; } .demo-topbar { gap:14px; margin-bottom:26px; } .demo-location { display:none; } .demo-top-actions .button { font-size:.875rem; } }
@media(max-width:540px) { .demo-study .button { width:100%; margin:0; } .demo-study-count { align-items:flex-start; } .demo-question-setup .source-respondent-functions { grid-template-columns:1fr; } .demo-login-form { padding:24px; } .demo-questionnaire { padding-inline:12px; } .demo-topbar { flex-wrap:wrap; padding:10px 0; } .demo-receipt { padding:24px; } }
@media(prefers-reduced-motion:reduce) { .demo-study { transition:none; } .demo-study:hover { transform:none; } }
@media(forced-colors:active) { .demo-study,.demo-receipt,.demo-question-setup,.demo-login-form { border-color:CanvasText; } }

.demo-body h1[tabindex="-1"]:focus { outline:none; }

#demo-app:has(> .auditor-shell) { display:block; padding:0; }
.demo-body .auditor-shell .demo-page-heading { margin-bottom:28px; }
.demo-body .auditor-shell .demo-page-heading h1,.demo-body .auditor-shell .source-heading h1 { margin:0; font-size:clamp(1.75rem,3vw,2.35rem); line-height:1.1; font-weight:720; letter-spacing:-.035em; }
.demo-body .auditor-shell .demo-content > .source-heading { margin-block-end:28px; }
.demo-body .auditor-shell .source-heading p { max-width:70ch; margin-top:10px; }
.demo-body .auditor-company-toolbar { padding:20px; margin:0; }
.demo-body .auditor-company-toolbar .source-field { width:min(100%,420px); }
.demo-template-list { border:1px solid var(--source-border); border-radius:20px; background:var(--source-surface); overflow:clip; }
.demo-template-row { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px; border-bottom:1px solid var(--source-border); }
.demo-template-row:last-child { border-bottom:0; }
.demo-template-row h2 { font-size:1.0625rem; font-weight:630; margin:0; }
.demo-body .source-company-example h2 { font-size:1.125rem; margin:0 0 8px; }
@media(max-width:640px) { .demo-template-row { flex-wrap:wrap; gap:12px; padding:20px; } }