/* A single, continuous demo surface; all content is preset synthetic data. */
#auth-screen .studio-journey { --journey-ink:#173e34; --journey-accent:#137c5b; --journey-blue:#3676b6; }
#auth-screen .studio-journey:after { display:none; }
#auth-screen .studio-journey .home-studio-pin { position:relative; top:auto; background:#f2f6f5; }
#auth-screen .studio-journey .home-steps { background:#fff; }
#auth-screen .studio-journey .home-steps button { min-height:72px; gap:12px; }
#auth-screen .studio-journey .home-step-number { font-size:12px; display:inline; }
#auth-screen .journey-layout { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.8fr); gap:48px; padding:36px; }
#auth-screen .journey-story { min-width:0; display:flex; flex-direction:column; align-items:flex-start; padding:12px 0; }
#auth-screen .journey-eyebrow { font-size:10px; line-height:1.5; font-weight:650; color:#647d74; }
#auth-screen .journey-big-number { font-size:64px; line-height:1; color:#bad2c9; font-weight:500; margin:26px 0 18px; font-variant-numeric:tabular-nums; }
#auth-screen .journey-story h3 { font-size:28px; line-height:1.3; font-weight:600; margin:0 0 16px; color:#183b32; min-height:74px; }
#auth-screen .journey-story p { font-size:14px; line-height:1.8; color:#5f726b; margin:0; min-height:78px; }
#auth-screen .journey-story .home-link { margin:18px 0 30px; font-size:13px; }
#auth-screen .journey-cover { width:100%; max-width:260px; margin-top:auto; overflow:hidden; border-radius:4px; aspect-ratio:16/8; }
#auth-screen .journey-cover img { width:100%; height:100%; object-fit:cover; }
#auth-screen .journey-workbench { min-width:0; background:#fff; border:1px solid #dae4df; border-radius:8px; box-shadow:0 18px 40px #163a2d0a; overflow:hidden; display:flex; flex-direction:column; }
#auth-screen .journey-document { display:flex; align-items:center; gap:13px; padding:19px 24px; border-bottom:1px solid #e1e9e5; min-height:82px; background:#fff; }
#auth-screen .journey-document>svg { width:29px; height:29px; flex-shrink:0; color:#278362; padding:5px; background:#eaf5ee; border-radius:4px; }
#auth-screen .journey-document>div { display:grid; gap:5px; min-width:0; }
#auth-screen .journey-document>div>span { font-size:9px; color:#789084; }
#auth-screen .journey-document strong { font-size:15px; line-height:1.5; color:#24483b; font-weight:600; }
#auth-screen .journey-document-count { margin-left:auto; white-space:nowrap; font-size:11px; color:#789084; }
#auth-screen .journey-scene { position:relative; padding:22px 26px; height:431px; box-sizing:border-box; background:#fbfdfc; }
#auth-screen .journey-scene-heading { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:20px; min-height:20px; }
#auth-screen .journey-saved,#auth-screen .journey-ready { display:inline-flex; align-items:center; gap:5px; font-size:10px; color:#248663; }
#auth-screen .journey-scene-heading svg { width:13px; height:13px; }
#auth-screen .journey-question-tabs { display:flex; gap:7px; border-bottom:1px solid #e1e9e5; padding-bottom:14px; }
#auth-screen .journey-question-tabs button { display:flex; align-items:center; gap:7px; font-size:11px; padding:7px 10px; color:#688074; background:transparent; border:1px solid transparent; border-radius:4px; min-height:36px; }
#auth-screen .journey-question-tabs button>span { font-size:9px; opacity:.65; }
#auth-screen .journey-question-tabs button[aria-pressed=true] { color:#126849; border-color:#add2c0; background:#edf8f1; }
#auth-screen .journey-question { position:relative; padding-top:19px; }
#auth-screen .journey-question-id { font-size:10px; color:#7e978a; }
#auth-screen .journey-question h4 { font-size:18px; line-height:1.5; margin:7px 0 16px; color:#244637; min-height:27px; }
#auth-screen .journey-question-options { min-height:148px; display:grid; align-content:start; gap:8px; }
#auth-screen .journey-option { position:relative; display:flex; align-items:center; gap:10px; min-height:41px; padding:9px 13px; background:white; border:1px solid #dbe6e0; border-radius:4px; font-size:12px; color:#466354; box-sizing:border-box; }
#auth-screen .journey-option:first-child { border-color:#aad1bf; background:#f0faf4; }
#auth-screen .journey-option>svg { margin-left:auto; width:14px; height:14px; color:#299566; }
#auth-screen .journey-option-mark { width:12px; height:12px; border:1px solid #adc1b6; border-radius:50%; flex-shrink:0; }
#auth-screen .journey-option-mark.is-square { border-radius:2px; }
#auth-screen .journey-answer-preview { padding:16px; border:1px solid #d9e5de; border-radius:4px; background:#fff; font-size:14px; line-height:1.8; min-height:104px; color:#466354; }
#auth-screen .journey-answer-preview i { display:inline-block; width:2px; height:16px; background:#278362; vertical-align:middle; margin-left:5px; }
#auth-screen .journey-draft-flow { display:flex; align-items:center; gap:12px; margin-top:20px; font-size:10px; color:#648475; }
#auth-screen .journey-draft-flow>span { display:flex; align-items:center; gap:6px; white-space:nowrap; }
#auth-screen .journey-draft-flow svg { width:14px; height:14px; flex-shrink:0; }
#auth-screen .journey-draft-flow>i { flex:1; height:1px; background:#c4dacd; }
#auth-screen .journey-filters { display:flex; gap:12px; margin-bottom:20px; }
#auth-screen .journey-filters label { display:flex; flex:1; flex-direction:column; gap:6px; font-size:10px; color:#648475; }
#auth-screen .journey-filters select { width:100%; min-width:0; height:36px; background:white; border:1px solid #ceded4; border-radius:4px; padding:6px 9px; font:inherit; font-size:12px; color:#385e4a; }
#auth-screen .journey-match-count { font-size:11px; color:#247856; }
#auth-screen .journey-people { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:9px; margin:32px 0 25px; }
#auth-screen .journey-person { display:flex; flex-direction:column; align-items:center; padding:0 0 12px; min-width:0; border:0; border-bottom:2px solid transparent; border-radius:0; background:none; opacity:.35; filter:grayscale(1); transition:opacity .4s,filter .4s,transform .4s; }
#auth-screen .journey-person.is-match { opacity:1; filter:none; }
#auth-screen .journey-person[aria-pressed=true] { border-bottom-color:#268561; }
#auth-screen .journey-person:hover { opacity:1; transform:translateY(-4px); }
#auth-screen .journey-portrait { position:relative; display:block; width:100%; aspect-ratio:4/5; margin-bottom:12px; overflow:hidden; border-radius:5px; }
#auth-screen .journey-portrait img { width:100%; height:100%; object-fit:cover; object-position:50% 10%; background:#d3e1da; transform:scale(1.8); transform-origin:50% 0; }
#auth-screen .journey-match-icon { position:absolute; bottom:5px; right:5px; display:grid; place-items:center; width:19px; height:19px; border:2px solid white; border-radius:50%; color:#fff; background:#9aafa3; }
#auth-screen .is-match .journey-match-icon { background:#258564; }
#auth-screen .journey-match-icon svg { width:10px; height:10px; }
#auth-screen .journey-person strong { font-size:11px; color:#3e5b4c; margin-bottom:5px; }
#auth-screen .journey-person small { font-size:9px; color:#71867a; line-height:1.6; }
#auth-screen .journey-profile { font-size:11px; line-height:1.7; color:#618372; margin:16px 0 0; min-height:37px; border-top:1px solid #e1e9e5; padding-top:12px; }
#auth-screen .journey-counter { font-size:18px; font-variant-numeric:tabular-nums; color:#217452; }
#auth-screen .journey-run-track { height:3px; background:#e0ece5; margin-top:-6px; }
#auth-screen .journey-run-track>span { display:block; height:100%; background:#278862; transform-origin:left; transition:transform .5s; }
#auth-screen .journey-run-question { font-size:12px; color:#688070; margin:17px 0 9px; line-height:1.6; }
#auth-screen .journey-responses { display:grid; }
#auth-screen .journey-response { display:grid; grid-template-columns:38px 1fr 16px; gap:13px; align-items:center; border:0; border-bottom:1px solid #e3ebe6; border-radius:0; min-height:71px; background:transparent; padding:10px 0; text-align:left; color:#355746; }
#auth-screen .journey-response img { width:38px; height:44px; border-radius:4px; object-fit:cover; object-position:50% 8%; }
#auth-screen .journey-response>span { position:relative; min-width:0; }
#auth-screen .journey-response small { display:block; color:#819589; font-size:9px; margin-bottom:5px; }
#auth-screen .journey-response-answer { display:block; font-size:12px; line-height:1.65; }
#auth-screen .journey-response>svg { width:14px; height:14px; color:#2e9b70; }
#auth-screen .journey-response[aria-pressed=true] { background:#f0f7f3; }
#auth-screen .journey-thinking { display:none; position:absolute; bottom:0; left:0; height:20px; align-items:center; gap:5px; }
#auth-screen .journey-thinking i { width:4px; height:4px; background:#509c7d; border-radius:50%; }
#auth-screen .journey-thinking i:nth-child(2) { animation-delay:.2s; }
#auth-screen .journey-thinking i:nth-child(3) { animation-delay:.4s; }
#auth-screen .is-pending .journey-response-answer,#auth-screen .is-pending>svg { visibility:hidden; }
#auth-screen .is-pending .journey-thinking { display:flex; }
#auth-screen .journey-export-tools { display:flex; align-items:center; justify-content:space-between; gap:8px; }
#auth-screen .journey-table { margin-top:17px; }
#auth-screen .journey-table table { border-collapse:collapse; table-layout:fixed; width:100%; font-size:12px; }
#auth-screen .journey-table caption { text-align:left; color:#789084; font-size:10px; margin-bottom:9px; }
#auth-screen .journey-table td,#auth-screen .journey-table th { border-bottom:1px solid #e0e9e5; text-align:left; padding:10px 12px; color:#426553; overflow-wrap:anywhere; }
#auth-screen .journey-table th { font-size:10px; background:#edf4f1; font-weight:550; }
#auth-screen .journey-table td:first-child { color:#82988c; font-size:11px; }
#auth-screen .journey-chart { display:grid; gap:9px; margin:20px 0 14px; }
#auth-screen .journey-chart>div { display:grid; grid-template-columns:115px 1fr 15px; align-items:center; gap:14px; font-size:10px; color:#6a8275; }
#auth-screen .journey-chart-track { height:7px; background:#edf2f5; }
#auth-screen .journey-chart-track>i { display:block; width:100%; height:100%; background:#4782b6; transform:scaleX(var(--bar)); transform-origin:left; }
#auth-screen .journey-chart>div:nth-child(2) i { background:#46a987; }
#auth-screen .journey-chart>div:nth-child(3) i { background:#d18a79; }
#auth-screen .journey-export-note,#auth-screen .journey-empty { font-size:11px; line-height:1.6; color:#768e80; margin:10px 0 0; }
#auth-screen .journey-continuity { display:flex; align-items:center; min-height:66px; gap:13px; padding:12px 25px; border-top:1px solid #dfe8e2; background:#f5f9f7; }
#auth-screen .journey-mini-people { display:flex; align-items:center; min-width:62px; }
#auth-screen .journey-mini-people img { width:26px; height:30px; border:2px solid #fff; border-radius:50%; object-fit:cover; object-position:50% 10%; margin-right:-8px; }
#auth-screen .journey-path { position:relative; height:1px; background:#c7ded2; flex:1; overflow:visible; }
#auth-screen .journey-path>i { position:absolute; width:5px; height:5px; border-radius:50%; left:0; top:-2px; background:#2d9770; opacity:0; }
#auth-screen .journey-path>i:nth-child(2) { animation-delay:.7s; }
#auth-screen .journey-path>i:nth-child(3) { animation-delay:1.4s; }
#auth-screen .journey-continuity>svg { width:17px; height:17px; color:#4a8b74; }
#auth-screen .journey-cohort-count { font-size:10px; color:#6c8779; }
#auth-screen .journey-footer { display:flex; justify-content:space-between; gap:16px; align-items:center; padding:0 36px 20px; }
#auth-screen .journey-footer>span { display:flex; gap:7px; align-items:center; color:#7b8e84; font-size:10px; line-height:1.5; }
#auth-screen .journey-footer>span svg { width:13px; height:13px; flex-shrink:0; }
#auth-screen .journey-footer>div { display:flex; gap:8px; }
#auth-screen .journey-tool { display:grid; place-items:center; width:33px; height:33px; padding:7px; border:1px solid #ceddd4; border-radius:4px; color:#4d7863; background:white; flex-shrink:0; }
#auth-screen .journey-tool:hover { background:#e5f3eb; color:#176b4e; }
#auth-screen .journey-tool:disabled { opacity:.4; cursor:not-allowed; background:#fff; }
#auth-screen .journey-tool svg { width:16px; height:16px; }
#auth-screen .studio-journey button:focus-visible,#auth-screen .studio-journey select:focus-visible { outline:2px solid #318c6d; outline-offset:3px; }
#auth-screen .home-motion-live .journey-option { animation:journey-arrive .7s both; animation-delay:calc(var(--item)*.16s); }
#auth-screen .home-motion-live .journey-scene-heading { animation:journey-arrive .6s both; }
#auth-screen .home-motion-live .journey-saved { animation:journey-save 2s both; }
#auth-screen .home-motion-live .journey-answer-preview i { animation:journey-blink .75s infinite; }
#auth-screen .home-motion-live .journey-person.is-match .journey-portrait { animation:journey-hover 3s ease-in-out infinite; animation-delay:calc(var(--item)*.25s); }
#auth-screen .home-motion-live .journey-person.is-match .journey-match-icon { animation:journey-match 2s ease-in-out infinite; animation-delay:calc(var(--item)*.2s); }
#auth-screen .home-motion-live .journey-thinking i { animation:journey-think .8s ease-in-out infinite; }
#auth-screen .home-motion-live .journey-response:not(.is-pending) .journey-response-answer { animation:journey-arrive .6s both; }
#auth-screen .home-motion-live .journey-table tbody tr { animation:journey-arrive .7s both; animation-delay:calc(var(--item)*.24s); }
#auth-screen .home-motion-live .journey-chart-track>i { animation:journey-bar 1.4s both; animation-delay:calc(var(--item)*.16s); }
#auth-screen .home-motion-live .journey-path>i { animation:journey-flow 2.4s linear infinite; }
#auth-screen .home-motion-live .journey-cover img { animation:journey-photo 12s ease-in-out infinite alternate; }
@keyframes journey-arrive { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes journey-save { 0%,50% { opacity:0; } 100% { opacity:1; } }
@keyframes journey-blink { 50% { opacity:0; } }
@keyframes journey-hover { 50% { transform:translateY(-7px); } }
@keyframes journey-match { 50% { box-shadow:0 0 0 4px #31886220; } }
@keyframes journey-think { 50% { transform:translateY(-4px); opacity:.4; } }
@keyframes journey-bar { from { transform:scaleX(0); } to { transform:scaleX(var(--bar)); } }
@keyframes journey-flow { 0% { left:0; opacity:0; } 15%,85% { opacity:1; } 100% { left:100%; opacity:0; } }
@keyframes journey-photo { to { transform:scale(1.07); } }
@media (max-width:1100px) {
  #auth-screen .journey-layout { gap:25px; padding:26px; grid-template-columns:minmax(0,.7fr) minmax(0,1.8fr); }
  #auth-screen .journey-story h3 { font-size:24px; }
  #auth-screen .journey-story p { font-size:13px; }
  #auth-screen .journey-scene { padding:20px; }
  #auth-screen .journey-people { gap:7px; }
}
@media (max-width:800px) {
  #auth-screen .journey-layout { display:block; padding:22px; }
  #auth-screen .journey-story { padding:0; display:grid; grid-template-columns:1fr auto; align-items:center; column-gap:20px; margin-bottom:20px; }
  #auth-screen .journey-story h3 { min-height:0; margin:0; font-size:22px; }
  #auth-screen .journey-story>p,#auth-screen .journey-story>.journey-eyebrow,#auth-screen .journey-big-number,#auth-screen .journey-cover { display:none; }
  #auth-screen .journey-story .home-link { margin:0; white-space:nowrap; font-size:11px; }
  #auth-screen .journey-footer { padding:0 22px 18px; }
  #auth-screen .studio-journey .home-steps { grid-template-columns:repeat(4,minmax(0,1fr)); }
  #auth-screen .studio-journey .home-steps button { min-height:64px; gap:7px; padding:10px 4px; flex-wrap:wrap; font-size:11px; }
  #auth-screen .studio-journey .home-step-number { display:none; }
}
@media (max-width:480px) {
  #auth-screen .journey-layout { padding:18px 10px 12px; }
  #auth-screen .journey-story { display:block; padding:0 5px; margin-bottom:16px; }
  #auth-screen .journey-story h3 { font-size:20px; min-height:52px; display:flex; align-items:center; }
  #auth-screen .journey-story .home-link { margin:5px 0 0; }
  #auth-screen .studio-journey .home-steps button { flex-direction:column; gap:5px; font-size:10px; }
  #auth-screen .studio-journey .home-steps svg { width:16px; height:16px; }
  #auth-screen .journey-document { padding:14px; gap:8px; min-height:75px; }
  #auth-screen .journey-document strong { font-size:13px; }
  #auth-screen .journey-document-count { font-size:9px; }
  #auth-screen .journey-scene { padding:18px 14px; height:470px; }
  #auth-screen .journey-question-tabs { gap:3px; }
  #auth-screen .journey-question-tabs button { padding:7px 6px; font-size:10px; gap:4px; }
  #auth-screen .journey-question-tabs button>span { display:none; }
  #auth-screen .journey-question h4 { font-size:17px; min-height:52px; }
  #auth-screen .journey-people { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 22px; margin:18px 5px 0; }
  #auth-screen .journey-portrait { height:70px; width:62px; margin-bottom:7px; }
  #auth-screen .journey-person { padding-bottom:5px; }
  #auth-screen .journey-person strong { font-size:10px; margin-bottom:1px; }
  #auth-screen .journey-person small { font-size:9px; }
  #auth-screen .journey-profile { font-size:10px; margin:9px 0 0; padding-top:8px; }
  #auth-screen .journey-scene-heading { margin-bottom:15px; }
  #auth-screen .journey-filters { margin-bottom:8px; }
  #auth-screen .journey-filters select { font-size:16px; }
  #auth-screen .journey-response { gap:8px; grid-template-columns:32px 1fr 12px; min-height:83px; }
  #auth-screen .journey-response img { width:32px; height:38px; }
  #auth-screen .journey-response-answer { font-size:11px; }
  #auth-screen .journey-chart>div { grid-template-columns:91px 1fr 12px; gap:8px; font-size:9px; }
  #auth-screen .journey-export-tools .home-segment button { font-size:10px; padding:6px 7px; }
  #auth-screen .journey-table td,#auth-screen .journey-table th { padding:12px 7px; }
  #auth-screen .journey-continuity { padding:10px 14px; min-height:58px; }
  #auth-screen .journey-footer { padding:0 13px 14px; gap:9px; }
  #auth-screen .journey-footer>span { font-size:9px; }
}
@media (prefers-reduced-motion:reduce) {
  #auth-screen .studio-journey *,#auth-screen .studio-journey *:before,#auth-screen .studio-journey *:after { animation:none!important; transition:none!important; }
}