/* A desktop presentation of the real portrait sales app. */
.slide.is-sales { width: min(100cqw, 100cqh * 16 / 9); height: min(100cqh, 100cqw * 9 / 16); --u: calc(100cqw / 1440); }
.is-sales > .intro, .is-sales > .scene, .is-sales > .issue-annotations, .is-sales > .issues, .is-sales > .takeaway, .is-sales > .illustrative, .is-sales > #scene-description { display: none; }
.is-sales .slide-header { left: calc(70 * var(--u)); right: auto; align-items: flex-start; }
.sales-screen { position: absolute; inset: 0; }
.sales-screen[hidden] { display: none; }
.sales-kicker { position: absolute; left: calc(70 * var(--u)); top: calc(131 * var(--u)); margin: 0; font-size: calc(12 * var(--u)); letter-spacing: .15em; color: #8ea5b8; }
.sales-title { position: absolute; left: calc(70 * var(--u)); top: calc(175 * var(--u)); width: calc(760 * var(--u)); margin: 0; font-size: calc(55 * var(--u)); line-height: 1.07; letter-spacing: -.045em; font-weight: 700; }
.sales-title span { color: #c4a4e4; }
.sales-caption { position: absolute; left: calc(70 * var(--u)); top: calc(341 * var(--u)); width: calc(650 * var(--u)); margin: 0; font-size: calc(30 * var(--u)); line-height: 1.25; letter-spacing: -.025em; font-weight: 500; color: #e6eaf0; }
.sales-note { position: absolute; left: calc(70 * var(--u)); top: calc(445 * var(--u)); width: calc(610 * var(--u)); margin: 0; font-size: calc(23 * var(--u)); line-height: 1.5; letter-spacing: -.015em; color: #aab6c4; }
.sales-stages { position: absolute; left: calc(70 * var(--u)); top: calc(625 * var(--u)); width: calc(510 * var(--u)); display: flex; gap: calc(8 * var(--u)); list-style: none; margin: 0; padding: 0; }
.sales-stages li { flex: 1; height: calc(5 * var(--u)); background: #2b3139; border-radius: 4px; }
.sales-stages .is-current { background: #c4a4e4; }
.sales-stages .is-done { background: #7091a6; }
.sales-toolbar { position: absolute; left: calc(70 * var(--u)); top: calc(660 * var(--u)); width: calc(510 * var(--u)); display: flex; align-items: center; justify-content: space-between; }
.sales-status { color: #a9b5c3; font-size: calc(13 * var(--u)); }
.sales-footnote { position: absolute; left: calc(70 * var(--u)); bottom: calc(74 * var(--u)); margin: 0; color: #71808f; font-size: calc(12 * var(--u)); }
.sales-phone { position: absolute; left: calc(940 * var(--u)); top: calc(34 * var(--u)); width: calc(414 * var(--u)); height: calc(742 * var(--u)); border: calc(2 * var(--u)) solid #747b89; border-radius: calc(47 * var(--u)); background: linear-gradient(120deg,#414653,#10131a 28%,#171c25 75%,#4f5562); box-shadow: inset 0 0 0 calc(4 * var(--u)) #0d1015, 0 calc(25 * var(--u)) calc(80 * var(--u)) #0008; }
.sales-phone::before, .sales-phone::after { content: ''; position: absolute; width: calc(3 * var(--u)); left: calc(-5 * var(--u)); border-radius: 2px; background: #747b89; }
.sales-phone::before { height: calc(45 * var(--u)); top: calc(130 * var(--u)); }
.sales-phone::after { height: calc(45 * var(--u)); top: calc(184 * var(--u)); }
.phone-glass { position: absolute; inset: calc(12 * var(--u)); border-radius: calc(34 * var(--u)); overflow: hidden; background: linear-gradient(#6366f1,#ec4899); }
.phone-status { position: absolute; top: 0; left: 0; right: 0; height: calc(22 * var(--u)); padding: 0 calc(23 * var(--u)); display: flex; justify-content: space-between; align-items: center; color: white; font-size: calc(10 * var(--u)); font-weight: 600; }
.phone-status > i { position: absolute; left: 50%; top: calc(5 * var(--u)); transform: translateX(-50%); width: calc(72 * var(--u)); height: calc(11 * var(--u)); border-radius: calc(8 * var(--u)); background: #11141d; }
.phone-status > span:last-child { font-size: calc(10 * var(--u)); letter-spacing: .1em; }
.phone-home { position: absolute; bottom: calc(4 * var(--u)); left: 50%; transform: translateX(-50%); width: calc(115 * var(--u)); height: calc(4 * var(--u)); background: #ffffffdc; border-radius: 4px; }
.sales-viewport { position: absolute; top: calc(22 * var(--u)); bottom: calc(12 * var(--u)); left: 0; right: 0; overflow: hidden; }
.sales-viewport iframe { width: 400px; height: 704px; border: 0; display: block; transform: scale(calc(100cqw / 1492.228px)); transform-origin: top left; pointer-events: none; background: white; }
.sales-launcher { position: absolute; inset: 0; background: radial-gradient(ellipse at 100% 25%, #7776a56b, transparent 60%), radial-gradient(ellipse at 0 90%, #547ca46b,transparent 70%), #1c263d; color: white; }
.sales-launcher[hidden] { display: none; }
.sales-launcher .launcher-app { top: 42%; }
.sales-launcher .launcher-hint { bottom: calc(57 * var(--u)); }
.sales-launcher > p:first-child { position: absolute; top: calc(47 * var(--u)); width: 100%; margin: 0; text-align: center; font-size: calc(16 * var(--u)); color: #c8d4e6; }
.sales-screen[data-device-view='home'] .phone-glass, .sales-screen[data-device-view='opening'] .phone-glass { background: #1c263d; }
.is-sales .controls { left: calc(70 * var(--u)); right: auto; }
.is-sales .back-control, .is-sales .advance-control { height: max(40px, calc(44 * var(--u))); font-size: max(14px, calc(17 * var(--u))); }
.is-sales .advance-control:not(:disabled) { background: #c4a4e4; border-color: #c4a4e4; color: #21192d; font-weight: 550; }