/* One desktop demonstration, using the app's actual qualification component. */
.slide.is-qualification { width: min(100cqw, 100cqh * 16 / 9); height: min(100cqh, 100cqw * 9 / 16); --u: calc(100cqw / 1440); }
.is-qualification > .intro, .is-qualification > .scene, .is-qualification > .issue-annotations, .is-qualification > .issues, .is-qualification > .takeaway, .is-qualification > .illustrative, .is-qualification > #scene-description { display: none; }
.qualification-screen { position: absolute; inset: 0; }
.qualification-screen[hidden], .qualification-handoff[hidden] { display: none; }
.qualification-intro { position: absolute; left: calc(62 * var(--u)); top: calc(128 * var(--u)); width: calc(285 * var(--u)); }
.qualification-intro h1 { margin: 0; font-size: calc(46 * var(--u)); line-height: 1.04; font-weight: 720; letter-spacing: -.045em; }
.qualification-intro h1 span { color: #c4a4e4; }
.qualification-caption { position: absolute; left: calc(62 * var(--u)); top: calc(272 * var(--u)); width: calc(280 * var(--u)); margin: 0; font-size: calc(25 * var(--u)); line-height: 1.23; font-weight: 450; letter-spacing: -.025em; color: #c7d2de; }
.qualification-window { position: absolute; top: calc(105 * var(--u)); left: calc(390 * var(--u)); width: calc(1000 * var(--u)); height: calc(640 * var(--u)); border: calc(2 * var(--u)) solid #69717e; border-radius: calc(39 * var(--u)); background: linear-gradient(135deg, #343b46, #101319 28%, #171d26 75%, #3e4651); box-shadow: inset 0 0 0 calc(4 * var(--u)) #0c0f14, 0 calc(25 * var(--u)) calc(75 * var(--u)) #0008, 0 0 calc(80 * var(--u)) #8a73b90b; }
.qualification-window::before, .qualification-window::after { content: ''; position: absolute; top: calc(-5 * var(--u)); height: calc(3 * var(--u)); background: #68707d; border-radius: calc(2 * var(--u)); }
.qualification-window::before { left: calc(90 * var(--u)); width: calc(66 * var(--u)); }
.qualification-window::after { left: calc(175 * var(--u)); width: calc(34 * var(--u)); }
.tablet-camera { position: absolute; left: 50%; top: calc(7 * var(--u)); width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: radial-gradient(circle at 40% 35%, #5b6e82, #14202d 40%, #070a0f 70%); box-shadow: 0 0 0 1px #3e4650; }
.tablet-glass { position: absolute; inset: calc(18 * var(--u)); border-radius: calc(22 * var(--u)); overflow: hidden; background: #fbfcfe; box-shadow: 0 0 0 1px #06090e; }
.tablet-status { position: absolute; inset: 0 0 auto; height: calc(24 * var(--u)); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(20 * var(--u)); color: #495569; font-size: calc(10 * var(--u)); font-weight: 650; }
.tablet-status-icons { display: flex; gap: calc(9 * var(--u)); align-items: center; }
.tablet-status svg { width: calc(13 * var(--u)); height: calc(11 * var(--u)); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.tablet-battery { width: calc(19 * var(--u)); height: calc(8 * var(--u)); border: 1px solid #87909d; border-radius: calc(2 * var(--u)); background: linear-gradient(to right, #495569 80%, transparent 80%); box-shadow: inset 0 0 0 1px #fbfcfe; }
.tablet-home { position: absolute; bottom: calc(5 * var(--u)); left: 50%; width: calc(110 * var(--u)); height: calc(4 * var(--u)); transform: translateX(-50%); border-radius: calc(3 * var(--u)); background: #343d4d; }
.demo-toolbar { position: absolute; left: calc(410 * var(--u)); top: calc(65 * var(--u)); width: calc(690 * var(--u)); height: calc(28 * var(--u)); display: flex; align-items: center; justify-content: space-between; color: #adb8c4; z-index: 2; }
.demo-breadcrumb { display: flex; gap: calc(12 * var(--u)); align-items: center; font-size: calc(13 * var(--u)); }
.demo-breadcrumb strong { color: #f0f3f6; font-size: calc(15 * var(--u)); font-weight: 550; }
.demo-breadcrumb b { font-weight: 400; color: #536170; }
.demo-toolbar-right { display: flex; gap: calc(16 * var(--u)); align-items: center; }
.demo-status { color: #9cabb9; font-size: calc(12 * var(--u)); }
.demo-replay { display: flex; gap: calc(6 * var(--u)); align-items: center; padding: calc(5 * var(--u)) calc(9 * var(--u)); border: 1px solid #3a424e; border-radius: calc(6 * var(--u)); font-size: calc(12 * var(--u)); color: #ced7df; background: #242a34; cursor: pointer; }
.demo-replay svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.demo-replay:hover { background: #343b49; }
.demo-replay:focus-visible { outline: 2px solid #c4a4e4; outline-offset: 3px; }
.demo-viewport { position: absolute; top: calc(24 * var(--u)); left: 0; right: 0; bottom: calc(16 * var(--u)); overflow: hidden; }
.demo-viewport iframe { display: block; border: 0; width: 1200px; height: 700px; transform: scale(calc(100cqw / 1800px)); transform-origin: top left; pointer-events: none; background: #f8fafc; }
.tablet-launcher { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(ellipse at 86% 12%, #7973ad77, transparent 60%), radial-gradient(ellipse at 9% 100%, #47739877, transparent 64%), #1c263d; color: #f5f4ff; }
.tablet-launcher[hidden] { display: none; }
.tablet-launcher::before, .tablet-launcher::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; }
.tablet-launcher::before { width: 95%; height: 180%; left: 30%; top: 20%; background: linear-gradient(145deg, #b6a7dc22, #5e7f9b09); box-shadow: inset 0 1px 1px #e0deff18; transform: rotate(-30deg); }
.tablet-launcher::after { width: 100%; height: 130%; left: -58%; top: 22%; border: calc(1 * var(--u)) solid #c6dcf41c; box-shadow: 0 0 calc(90 * var(--u)) #87bad912; }
.launcher-welcome { position: absolute; left: calc(48 * var(--u)); top: calc(40 * var(--u)); }
.launcher-welcome > span { font-size: calc(11 * var(--u)); font-weight: 550; letter-spacing: .17em; color: #c3cde2; }
.launcher-welcome p { margin: calc(10 * var(--u)) 0; font-size: calc(28 * var(--u)); line-height: 1.2; letter-spacing: -.025em; font-weight: 450; }
.launcher-app { position: absolute; left: 50%; top: 47%; transform: translate(-50%, -35%); width: calc(210 * var(--u)); padding: 0; border: 0; background: none; display: flex; flex-direction: column; align-items: center; cursor: pointer; z-index: 1; }
.launcher-app-icon { position: relative; display: grid; place-items: center; width: calc(112 * var(--u)); height: calc(112 * var(--u)); border-radius: calc(27 * var(--u)); background: linear-gradient(145deg, #4d5972, #252f43 65%); border: 1px solid #c7d4ed4d; box-shadow: inset 0 1px 0 #ffffff33, 0 calc(15 * var(--u)) calc(35 * var(--u)) #07111f44; }
.launcher-brand { display: flex; align-items: center; gap: calc(6 * var(--u)); transform: rotate(-24deg); }
.launcher-brand i { width: calc(9 * var(--u)); height: calc(33 * var(--u)); border-radius: calc(6 * var(--u)); background: #9edcea; }
.launcher-brand i:nth-child(2) { height: calc(53 * var(--u)); }
.launcher-app strong { margin-top: calc(15 * var(--u)); font-size: calc(21 * var(--u)); font-weight: 550; letter-spacing: -.02em; }
.launcher-app > span:last-child { margin-top: calc(5 * var(--u)); color: #c0cae0; font-size: calc(14 * var(--u)); }
.launcher-app:hover .launcher-app-icon { border-color: #d2e6ffbb; }
.launcher-app:focus-visible { outline: 2px solid #c4a4e4; outline-offset: calc(12 * var(--u)); border-radius: calc(15 * var(--u)); }
.launcher-tap { position: absolute; width: calc(70 * var(--u)); height: calc(70 * var(--u)); border-radius: 50%; border: calc(2 * var(--u)) solid #e3c9ff; background: #d8b5ff26; opacity: 0; }
.launcher-hint { position: absolute; bottom: calc(32 * var(--u)); left: 0; right: 0; margin: 0; text-align: center; font-size: calc(15 * var(--u)); color: #ccd6e9; }
.qualification-screen[data-device-view='home'] .tablet-glass, .qualification-screen[data-device-view='opening'] .tablet-glass { background: #1c263d; }
.qualification-screen[data-device-view='home'] .tablet-status, .qualification-screen[data-device-view='opening'] .tablet-status { color: #dbe5f4; }
.qualification-screen[data-device-view='home'] .tablet-home, .qualification-screen[data-device-view='opening'] .tablet-home { background: #dbe5f4; }
.is-qualification .back-control, .is-qualification .advance-control { height: max(40px, calc(44 * var(--u))); font-size: max(14px, calc(17 * var(--u))); }
.is-qualification .advance-control:not(:disabled) { background: #c4a4e4; border-color: #c4a4e4; color: #21192d; font-weight: 550; }
.is-qualification .advance-control:not(:disabled):hover { background: #d3b8ec; }
.qualification-stages { position: absolute; left: calc(62 * var(--u)); width: calc(280 * var(--u)); top: calc(537 * var(--u)); display: flex; gap: calc(6 * var(--u)); margin: 0; padding: 0; list-style: none; }
.demo-stage { flex: 1; height: calc(5 * var(--u)); border-radius: calc(3 * var(--u)); background: #30343c; }
.demo-stage.is-current { background: #c4a4e4; }
.demo-stage.is-done { background: #6b879e; }
.qualification-score { position: absolute; left: calc(62 * var(--u)); width: calc(280 * var(--u)); top: calc(435 * var(--u)); color: #9bc0ed; }
.qualification-score[hidden] { display: none; }
.score-reading { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.score-reading > span { color: #aab6c4; font-size: calc(13 * var(--u)); margin-right: auto; }
.score-reading strong { font-size: calc(29 * var(--u)); line-height: 1; font-weight: 650; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.score-reading strong span { font-size: calc(15 * var(--u)); margin-left: calc(2 * var(--u)); }
.score-reading b { width: calc(48 * var(--u)); font-size: calc(11 * var(--u)); font-weight: 550; letter-spacing: .08em; }
.score-track { height: calc(3 * var(--u)); margin-top: calc(8 * var(--u)); border-radius: calc(3 * var(--u)); overflow: hidden; background: #282e38; }
.score-track i { display: block; height: 100%; width: 0; background: currentColor; border-radius: inherit; }
.qualification-score p { margin: calc(5 * var(--u)) 0 0; color: #8a99aa; font-size: calc(11 * var(--u)); }
.qualification-score[data-temperature='warm'] { color: #e5bd80; }
.qualification-score[data-temperature='hot'] { color: #eba7a5; }
.qualification-note { position: absolute; left: calc(62 * var(--u)); top: calc(573 * var(--u)); width: calc(280 * var(--u)); margin: 0; color: #9caab7; font-size: calc(18 * var(--u)); line-height: 1.4; }
.qualification-footnote { position: absolute; bottom: calc(20 * var(--u)); left: calc(70 * var(--u)); margin: 0; color: #6e7b88; font-size: calc(12 * var(--u)); }
.qualification-handoff { position: absolute; inset: 0; display: grid; place-items: center; background: #edf1f7ed; backdrop-filter: blur(8px); padding: calc(26 * var(--u)); }
.handoff-card { position: relative; width: calc(680 * var(--u)); padding: calc(28 * var(--u)) calc(32 * var(--u)); background: #fff; border: 1px solid #d7deea; border-radius: calc(18 * var(--u)); color: #1d2939; box-shadow: 0 calc(12 * var(--u)) calc(35 * var(--u)) #253c5512; }
.handoff-kicker { display: flex; gap: calc(9 * var(--u)); align-items: center; font-size: calc(12 * var(--u)); font-weight: 650; letter-spacing: .09em; color: #6e58a6; text-transform: uppercase; }
.handoff-check { display: grid; place-items: center; width: calc(25 * var(--u)); height: calc(25 * var(--u)); background: #f1ebfa; border-radius: 50%; }
.handoff-card h2 { margin: calc(12 * var(--u)) 0 calc(6 * var(--u)); font-size: calc(30 * var(--u)); line-height: 1.12; letter-spacing: -.04em; }
.handoff-subtitle { margin: 0; color: #7a8596; font-size: calc(16 * var(--u)); }
.handoff-details { margin: calc(22 * var(--u)) 0 0; padding: calc(18 * var(--u)) 0; border-block: 1px solid #e8ecf2; display: grid; grid-template-columns: 1fr 1fr; gap: calc(17 * var(--u)) calc(28 * var(--u)); }
.handoff-details dt { font-size: calc(12 * var(--u)); color: #8190a0; margin-bottom: calc(4 * var(--u)); }
.handoff-details dd { margin: 0; font-size: calc(17 * var(--u)); font-weight: 550; color: #344258; }
.handoff-bottom { margin-top: calc(18 * var(--u)); display: flex; justify-content: space-between; align-items: center; }
.handoff-bottom p { margin: 0; font-size: calc(14 * var(--u)); color: #7a8596; }
.handoff-bottom strong { color: #486c91; font-size: calc(26 * var(--u)); letter-spacing: -.04em; }
.handoff-bottom span { display: inline-block; padding: calc(7 * var(--u)) calc(10 * var(--u)); border-radius: calc(7 * var(--u)); background: #edf3fa; color: #526d8d; font-size: calc(13 * var(--u)); font-weight: 550; }
.qualification-handoff[data-route='nurture'] .handoff-kicker { color: #527eae; }
.qualification-handoff[data-route='nurture'] .handoff-check { background: #edf4fc; }