/* The desk demo: Handle a Sale as an iPhone app, one question per screen,
   with a fictional buyer and example figures. Built by desk-app.js into any
   [data-desk-app]. Shared by the home page (inside the Lead to Title title)
   and /obavia.html. Inside the phone the app keeps its own light iOS look;
   its accent is the library's bottle green. */
.iphone { --d-accent: #2f5a45; --spring: cubic-bezier(0.32, 0.72, 0, 1); --spring-soft: cubic-bezier(0.25, 0.8, 0.25, 1); --ease: cubic-bezier(0.2, 0.7, 0.1, 1); --sans: "Hanken Grotesk", system-ui, sans-serif; }
.iphone { position: relative; width: 300px; height: 620px; border-radius: 50px; padding: 11px; background: #1c1f1d; box-shadow: inset 0 0 0 1.5px #3a3e3a, inset 0 0 0 5px #0b0d0c, 0 40px 80px rgba(0, 0, 0, .55); flex: none; }
.iphone__screen { position: relative; width: 100%; height: 100%; border-radius: 40px; overflow: hidden; background: #f2f2f7; color: #111; font-family: var(--sans); -webkit-font-smoothing: antialiased; }
.iphone__island { position: absolute; top: 9px; left: 50%; width: 92px; height: 27px; margin-left: -46px; border-radius: 20px; background: #000; z-index: 9; transition: width .45s var(--spring), margin-left .45s var(--spring), height .45s var(--spring); display: flex; align-items: center; justify-content: center; gap: 6px; color: #fff; font: 600 11px/1 var(--sans); overflow: hidden; }
.iphone__island.is-wide { width: 200px; margin-left: -100px; height: 34px; }
.iphone__island span { opacity: 0; transition: opacity .2s; white-space: nowrap; }
.iphone__island.is-wide span { opacity: 1; transition-delay: .2s; }
.iphone__island i { width: 18px; height: 18px; border-radius: 50%; background: #34c759; display: grid; place-items: center; opacity: 0; transition: opacity .2s; }
.iphone__island.is-wide i { opacity: 1; transition-delay: .2s; }
.iphone__status { position: absolute; top: 0; left: 0; right: 0; height: 46px; display: flex; align-items: center; justify-content: space-between; padding: 6px 26px 0; font: 600 13px var(--sans); z-index: 8; color: #111; }
.iphone__status b { font-weight: 600; }
.iphone__status svg { width: 42px; height: 12px; }
.iphone__home { position: absolute; bottom: 7px; left: 50%; width: 110px; height: 4px; margin-left: -55px; border-radius: 3px; background: #111; opacity: .85; z-index: 9; }
.app-screen { position: absolute; inset: 0; padding: 46px 0 28px; display: flex; flex-direction: column; background: #f2f2f7; transform: translateX(100%); transition: transform .45s cubic-bezier(.32, .72, 0, 1); will-change: transform; }
.app-screen.is-on { transform: none; }
.app-screen.is-past { transform: translateX(-28%); filter: brightness(.94); visibility: hidden; transition: transform .45s cubic-bezier(.32, .72, 0, 1), visibility 0s .45s; }
.app-screen.is-on { visibility: visible; transition: transform .45s cubic-bezier(.32, .72, 0, 1), visibility 0s; }
.app-nav { height: 40px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; font-size: 15px; }
.app-nav button { appearance: none; background: none; border: 0; color: #c2391f; font: 500 15px var(--sans); cursor: pointer; padding: 6px 0; display: flex; align-items: center; gap: 2px; }
.app-nav button::before { content: ""; width: 9px; height: 9px; border-left: 2.2px solid currentColor; border-bottom: 2.2px solid currentColor; transform: rotate(45deg); margin-right: 3px; }
.app-nav .app-step { font-size: 12.5px; color: #8a8a8e; }
.app-title { padding: 0 16px 10px; font: 700 26px/1.1 "SF Pro Display", var(--sans); letter-spacing: -.02em; }
.app-scroll { flex: 1; overflow-y: auto; padding: 0 14px 12px; display: flex; flex-direction: column; }
.app-scroll > * { flex-shrink: 0; }
.app-scroll > .app-btn:last-child { margin-top: auto; }
.app-list { list-style: none; margin: 0 0 14px; padding: 0; background: #fff; border-radius: 12px; overflow: hidden; }
.app-list li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; min-height: 46px; font-size: 14px; border-top: .5px solid #d8d8dc; }
.app-list li:first-child { border-top: 0; }
.app-list li.is-tap { cursor: pointer; transition: background-color .15s; }
.app-list li.is-tap:active { background: #e5e5ea; }
.app-list li .chev { margin-left: auto; width: 7px; height: 7px; border-top: 2px solid #c4c4c7; border-right: 2px solid #c4c4c7; transform: rotate(45deg); }
.app-list .val { margin-left: auto; color: #8a8a8e; font-variant-numeric: tabular-nums; }
.app-list .val--b { color: #111; font-weight: 600; }
.app-list .sub { display: block; font-size: 12px; color: #8a8a8e; margin-top: 1px; }
.app-tile { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: #fff; flex: none; }
.app-tile svg { width: 20px; height: 20px; }
.app-cap { font-size: 12px; color: #8a8a8e; padding: 0 4px 6px; text-transform: uppercase; letter-spacing: .02em; }
.app-btn { display: block; width: calc(100% - 28px); margin: 6px 14px 0; padding: 14px; border-radius: 14px; border: 0; background: #111; color: #fff; font: 600 16px var(--sans); cursor: pointer; transition: transform .25s var(--spring), opacity .2s; }
.app-btn:active { transform: scale(.97); }
.app-btn[disabled] { opacity: .35; }
.app-btn--gold { background: var(--d-accent); color: #111; }
.app-odo { margin: 8px 0 16px; text-align: center; font: 700 52px/1 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.app-odo small { display: block; font: 500 13px var(--sans); color: #8a8a8e; margin-top: 6px; letter-spacing: 0; }
.app-switch { margin-left: auto; width: 51px; height: 31px; border-radius: 16px; background: #34c759; position: relative; flex: none; }
.app-switch::after { content: ""; position: absolute; top: 2px; right: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); }
.app-seg { display: grid; grid-template-columns: repeat(3, 1fr); background: #e3e3e8; border-radius: 9px; padding: 2px; margin: 0 0 14px; position: relative; }
.app-seg button { position: relative; z-index: 1; appearance: none; background: none; border: 0; padding: 8px 2px; font: 600 12px/1.2 var(--sans); color: #111; cursor: pointer; }
.app-seg i { position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc((100% - 4px) / 3); border-radius: 7px; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .12); transition: transform .35s var(--spring); }
.app-cam { position: relative; height: 210px; margin: 0 0 12px; border-radius: 16px; background: #1b1d1c; overflow: hidden; }
.app-cam::before { content: ""; position: absolute; inset: 22px 26px; border-radius: 14px; background: linear-gradient(var(--d-accent), var(--d-accent)) top left / 22px 3px, linear-gradient(var(--d-accent), var(--d-accent)) top left / 3px 22px, linear-gradient(var(--d-accent), var(--d-accent)) top right / 22px 3px, linear-gradient(var(--d-accent), var(--d-accent)) top right / 3px 22px, linear-gradient(var(--d-accent), var(--d-accent)) bottom left / 22px 3px, linear-gradient(var(--d-accent), var(--d-accent)) bottom left / 3px 22px, linear-gradient(var(--d-accent), var(--d-accent)) bottom right / 22px 3px, linear-gradient(var(--d-accent), var(--d-accent)) bottom right / 3px 22px; background-repeat: no-repeat; z-index: 2; }
.app-cam__hint { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font-size: 12px; color: rgba(255, 255, 255, .7); z-index: 3; }
.app-lic { position: absolute; left: 38px; right: 38px; top: 40px; height: 126px; border-radius: 10px; background: #ebe6d8; color: #1b1d1a; padding: 26px 12px 8px; font-family: var(--sans); transform: translateY(150%) rotate(-6deg); transition: transform .7s var(--spring-soft); z-index: 1; }
.app-lic::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 18px; border-radius: 10px 10px 0 0; background: #2d4a3e; }
.app-lic b { display: block; font-size: 12px; }
.app-lic i { display: block; font-style: normal; font-size: 9.5px; color: #4a4c46; }
.app-lic em { position: absolute; right: 8px; bottom: 6px; font-style: normal; font-size: 7.5px; letter-spacing: .08em; text-transform: uppercase; color: #8a3a2a; font-weight: 700; }
.app-cam.is-in .app-lic { transform: none; }
.app-cam__beam { position: absolute; left: 30px; right: 30px; top: 30px; height: 2px; background: var(--d-accent); box-shadow: 0 0 14px 3px rgba(242, 114, 88, .8); opacity: 0; z-index: 3; }
.app-cam.is-scanning .app-cam__beam { animation: camBeam .9s ease-in-out 2; }
@keyframes camBeam { 0% { top: 30px; opacity: 1; } 100% { top: 176px; opacity: 1; } }
.app-cam__flash { position: absolute; inset: 0; background: #fff; opacity: 0; z-index: 4; pointer-events: none; }
.app-cam.is-shot .app-cam__flash { animation: camFlash .35s ease-out; }
@keyframes camFlash { 0% { opacity: .85; } 100% { opacity: 0; } }
.app-shutter { display: block; width: 62px; height: 62px; margin: 0 auto 10px; border-radius: 50%; border: 4px solid #111; background: #fff; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px #111; cursor: pointer; transition: transform .2s var(--spring); }
.app-shutter:active { transform: scale(.9); }
.app-typed { min-height: 1.2em; }
.app-receipt .val { transition: color .3s; }
.app-total { font-weight: 700; }
.app-doc { display: flex; align-items: center; gap: 10px; }
.app-doc .tick { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; background: #e3e3e8; display: grid; place-items: center; color: #fff; transition: background-color .25s, transform .35s var(--spring); transform: scale(.8); }
.app-doc .tick svg { width: 13px; height: 13px; opacity: 0; transition: opacity .2s; }
.app-doc.is-in .tick { background: #34c759; transform: none; }
.app-doc.is-in .tick svg { opacity: 1; }
.app-paper { margin: 0 0 12px; padding: 12px; border-radius: 10px; background: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .08); font-size: 10px; line-height: 1.5; color: #333; }
.app-paper b { display: block; font-size: 11.5px; color: #111; margin-bottom: 4px; }
.app-paper .ln { display: flex; justify-content: space-between; border-bottom: .5px solid #ddd; padding: 2px 0; }
.app-sign { position: relative; height: 140px; margin: 0 0 8px; border-radius: 12px; background: #fff; border: 1px dashed #c4c4c7; touch-action: none; }
.app-sign canvas { width: 100%; height: 100%; display: block; cursor: crosshair; }
.app-sign span { position: absolute; left: 14px; right: 14px; bottom: 26px; border-top: 1px solid #c4c4c7; padding-top: 4px; font-size: 10px; color: #8a8a8e; pointer-events: none; }
.app-done { flex: 1; display: grid; place-items: center; text-align: center; padding: 0 20px; }
.app-done__ring { width: 96px; height: 96px; margin: 0 auto 16px; }
.app-done__ring circle { fill: none; stroke: #34c759; stroke-width: 6; stroke-dasharray: 290; stroke-dashoffset: 290; transition: stroke-dashoffset .8s var(--ease) .1s; }
.app-done__ring path { fill: none; stroke: #34c759; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; transition: stroke-dashoffset .45s var(--ease) .75s; }
.app-screen.is-on .app-done__ring circle, .app-screen.is-on .app-done__ring path { stroke-dashoffset: 0; }
.app-done h4 { font: 700 24px/1.1 var(--sans); }
.app-done p { margin-top: 6px; font-size: 13.5px; color: #6c6c70; }
.app-fic { padding: 0 16px 6px; font-size: 10.5px; color: #8a8a8e; }
.app-open { display: flex; justify-content: space-between; align-items: center; }
.app-pill { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: #e9f7ee; color: #1f8a43; }
.app-pill--ink { background: #fff4dd; color: #94650b; }
@media (prefers-reduced-motion: reduce) { .app-screen, .app-lic { transition-duration: .01s !important; } }
/* the next tap: one control at a time wears a ring of light that keeps circling it,
   with a soft pulse behind, so it is plain what to press. Static under reduced motion. */
@property --coach-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.is-next { position: relative; z-index: 1; }
.is-next::before, .is-next::after { content: ""; position: absolute; inset: -6px; border-radius: 20px; pointer-events: none; }
.is-next::after { padding: 3.5px; background: conic-gradient(from var(--coach-a), rgba(95, 174, 134, .28) 0deg 150deg, rgba(95, 174, 134, .6) 230deg, #5fae86 300deg, #d6f6e3 350deg, rgba(95, 174, 134, .28) 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); filter: drop-shadow(0 0 7px rgba(95, 174, 134, .95)); animation: coach-spin 1.3s linear infinite; }
.is-next::before { animation: coach-pulse 1.3s var(--ease) infinite; }
.app-shutter.is-next::before, .app-shutter.is-next::after { inset: -10px; border-radius: 50%; }
.app-list li.is-next::before, .app-list li.is-next::after { inset: 3px; border-radius: 10px; }
@keyframes coach-spin { to { --coach-a: 360deg; } }
@keyframes coach-pulse { 0% { box-shadow: 0 0 0 0 rgba(95, 174, 134, .7), 0 0 18px 2px rgba(95, 174, 134, .45); } 70%, 100% { box-shadow: 0 0 0 16px rgba(95, 174, 134, 0), 0 0 18px 2px rgba(95, 174, 134, .25); } }
@media (prefers-reduced-motion: reduce) { .is-next::after { animation: none; background: #5fae86; } .is-next::before { animation: none; } }