/* A screen-only Mac stage. Its 1000 × 620 scene scales as one composition. */
.motion-workspace { display: grid; grid-template-columns: 300px minmax(0,1fr); gap: 28px; align-items: start; background: #fff; padding: 22px; }
.motion-summary, .motion-player { min-width: 0; }
.motion-summary { padding: 7px 0 0; min-height: 473px; }
.motion-story { margin: 0 0 20px; }
.motion-story h3 { font-size: 28px; line-height: 1.08; font-weight: 600; letter-spacing: -.05em; }
.motion-story > p { font-size: 12px; line-height: 1.65; color: #777; margin-top: 14px; }
/* Reserve space for the section heading, tabs, frame and playback controls. */
.motion-player { width: 100%; max-width: calc((100svh - 365px) * 1.6129); justify-self: center; }
.mac-theater { position: relative; padding-bottom: 12px; isolation: isolate; }
.mac-frame { position: relative; border: 1px solid #737578; border-radius: 18px; padding: 10px 9px 9px; background: linear-gradient(145deg,#353639,#08090a 35%,#292a2c); box-shadow: 0 0 0 1px #d3d4d5, inset 0 0 0 2px #46484a, 0 20px 36px -20px #0d152f70; }
.mac-camera { position: absolute; width: 54px; height: 13px; background: #111214; border-radius: 0 0 6px 6px; left: calc(50% - 27px); top: 7px; z-index: 2; }
.mac-camera::after { content: ''; position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #283036; box-shadow: inset 0 0 1px #66808d; left: 25px; top: 3px; }
.mac-display { aspect-ratio: 1000 / 620; position: relative; overflow: hidden; border-radius: 8px; background: #dde4e5; }
.screen-shadow { position: absolute; bottom: 7px; left: 6%; width: 88%; height: 20px; background: radial-gradient(ellipse,#151b2535,transparent 68%); filter: blur(9px); z-index: -1; }
.motion-canvas { position: absolute; top: 0; left: 0; width: 1000px; height: 620px; transform-origin: 0 0; overflow: hidden; background: radial-gradient(ellipse at 85% 85%,#bacbce99,transparent 60%),linear-gradient(125deg,#f2f3f2,#d7dedf 50%,#c4ced1); color: #292c2c; font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; line-height: 1.4; text-align: left; }
.motion-canvas *, .motion-canvas *::before, .motion-canvas *::after { transition: none; }
.motion-canvas h4 { margin: 0; font-weight: 600; letter-spacing: -.04em; }
.motion-canvas p { margin: 0; }
.motion-canvas svg { width: 19px; height: 19px; }
.motion-canvas img { width: 18px; height: 18px; object-fit: contain; }
.motion-clock { position: absolute; width: 1px; height: 1px; pointer-events: none; }
.demo-scene { position: absolute; inset: 0; }
.demo-menubar { position: absolute; top: 0; left: 0; width: 100%; height: 28px; background: #f9fbfa75; border-bottom: 1px solid #ffffff40; display: flex; align-items: center; gap: 22px; padding: 0 17px; font-size: 10px; color: #444b4e; }
.demo-menubar svg { width: 13px; height: 13px; color: #1c2224; }
.demo-menubar strong { font-size: 11px; margin-left: -10px; font-weight: 650; }
.menubar-right { margin-left: auto; font-size: 10px; }
.demo-browser { position: absolute; left: 40px; top: 53px; width: 920px; height: 460px; background: #fff; border: 1px solid #b3bbbd; border-radius: 10px; box-shadow: 0 16px 40px #2c384630; overflow: hidden; transform-origin: 30% 40%; }
.demo-chrome { height: 37px; display: flex; align-items: end; gap: 17px; padding: 0 16px; background: #e9ebeb; color: #626769; }
.traffic-lights { display: flex; gap: 7px; align-self: center; padding-right: 7px; }
.traffic-lights i { width: 9px; height: 9px; border-radius: 50%; background: #ec7f79; border: 1px solid #0000000d; }
.traffic-lights i:nth-child(2) { background: #e8c26c; }.traffic-lights i:nth-child(3) { background: #7bc38c; }
.demo-tab { background: #fdfdfd; height: 29px; width: 230px; border-radius: 8px 8px 0 0; padding: 0 13px; display: flex; align-items: center; gap: 7px; font-size: 10px; }
.demo-tab img { width: 13px; height: 13px; }.demo-tab > span { margin-left: auto; color: #8c9292; }
.chrome-plus { font-size: 17px; align-self: center; margin-left: -5px; }
.demo-address { height: 35px; display: flex; gap: 17px; align-items: center; padding: 0 15px; border-bottom: 1px solid #e5e8e7; font-size: 15px; color: #939b9c; }
.demo-address > div { background: #f0f2f2; flex: 1; border-radius: 5px; height: 23px; display: flex; align-items: center; padding: 0 15px; font-size: 10px; color: #747e7f; }
.demo-result { position: absolute; background: #fff; border: 1px solid #bdc7c4; border-radius: 10px; box-shadow: 0 24px 55px #14222d35; overflow: hidden; }
.result-chrome { height: 47px; display: flex; align-items: center; padding: 0 19px; gap: 9px; border-bottom: 1px solid #e5e9e6; background: #f9fbf9; font-size: 12px; }
.result-chrome > span { margin-left: auto; color: #8b9590; font-size: 9px; }.result-chrome > svg { color: #677b6b; }
.demo-voice { position: absolute; left: 190px; bottom: 21px; width: 620px; height: 67px; display: flex; align-items: center; gap: 17px; padding: 12px 22px; border: 1px solid #ffffff60; border-radius: 19px; background: linear-gradient(130deg,#323b3ade,#20292be8); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); color: #f7faf8; box-shadow: 0 12px 34px #25343730,inset 0 1px 0 #ffffff30; z-index: 8; }
.demo-voice-ring svg { width: 29px; height: 29px; color: #f1f7f4; }
.voice-states { flex: 1; position: relative; height: 40px; }
.voice-states > div { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 5px; }
.voice-states small { font-size: 7px; letter-spacing: .17em; color: #a8b5b2; }.voice-states p { font-size: 13px; letter-spacing: -.15px; white-space: nowrap; }
.demo-wave { display: flex; align-items: center; gap: 3px; width: 36px; height: 32px; }.demo-wave i { width: 2px; flex-shrink: 0; background: #c1d3c9; border-radius: 2px; }
.voice-finish-tick { position: absolute; right: 26px; width: 27px; height: 27px; border: 1px solid #b2c9b994; border-radius: 50%; display: grid; place-items: center; color: #c2d5c9; font-size: 15px; }
.demo-receipt { position: absolute; right: 49px; top: 459px; min-width: 357px; display: flex; align-items: center; gap: 13px; border: 1px solid #e0e7e2; border-radius: 10px; padding: 16px 19px; background: #ffffffed; backdrop-filter: blur(15px); box-shadow: 0 12px 35px #18382c20; z-index: 7; }
.receipt-check { width: 26px; height: 26px; background: #e7eee7; color: #3e7757; border-radius: 50%; display: grid; place-items: center; font-size: 13px; }
.demo-receipt strong { font-size: 12px; display: block; }.demo-receipt small { display: block; margin-top: 4px; color: #8d9590; font-size: 9px; }.demo-receipt > span:last-child { margin-left: auto; color: #89948b; font-size: 18px; }
.demo-pointer { position: absolute; left: 0; top: 0; z-index: 10; display: flex; align-items: start; pointer-events: none; }
.pointer-tip svg { width: 26px; height: 32px; filter: drop-shadow(0 2px 2px #00000025); }.pointer-label { padding: 4px 8px; border-radius: 4px; background: #202726; color: #fff; font-size: 9px; margin: 25px 0 0 -12px; box-shadow: 0 2px 5px #0002; }
.cursor-pulse { position: absolute; width: 25px; height: 25px; margin: -12px; border: 2px solid #5d8f78; background: #aec6bd55; border-radius: 50%; z-index: 9; pointer-events: none; }

/* Maps → source requests → usable records. */
.maps-content { display: flex; height: calc(100% - 72px); }.maps-sidebar { width: 297px; flex-shrink: 0; position: relative; z-index: 1; box-shadow: 5px 0 14px #34433915; }
.demo-search { margin: 14px 13px 12px; height: 37px; border: 1px solid #d8ddda; border-radius: 7px; padding: 0 11px; display: flex; align-items: center; gap: 10px; font-size: 11px; color: #474e48; box-shadow: 0 2px 3px #00000004; }.demo-search > span:first-child { font-size: 23px; }.demo-search > span:last-child { margin-left: auto; color: #939a94; }
.search-typing { white-space: nowrap; }.map-filter-pills { display: flex; gap: 6px; padding: 0 13px 12px; }.map-filter-pills > span { font-size: 8px; border: 1px solid #dde2dd; padding: 5px 9px; border-radius: 20px; color: #7a8279; }
.maps-list-clip { overflow: hidden; height: 290px; border-top: 1px solid #e3e6e2; }.map-result { display: flex; gap: 13px; padding: 18px 14px; height: 102px; border-bottom: 1px solid #e5e8e3; }
.result-monogram { display: grid; place-items: center; width: 51px; height: 62px; border-radius: 5px; background: #d6ded4; font: 28px Georgia,serif; color: #586d53; flex-shrink: 0; }.tone-1 { background: #d9e1e7; color: #526a7e; }.tone-2 { background: #e8e2d9; color: #8b7558; }
.map-result strong { font-size: 12px; font-weight: 650; display: block; }.map-result small { font-size: 8px; color: #8a9189; display: block; margin: 4px 0; }.map-result small b { color: #d6ab48; letter-spacing: 1px; font-size: 8px; }.map-result p { font-size: 8px; color: #889087; }.map-result em { font-size: 8px; color: #597e9a; display: block; margin-top: 5px; }
.demo-map { flex: 1; position: relative; overflow: hidden; }.demo-map > svg { width: 100%; height: 100%; }
.demo-map-pin { position: absolute; width: 21px; height: 26px; border-radius: 50% 50% 50% 5px; background: #587865; border: 2px solid white; box-shadow: 0 3px 6px #334c3930; color: #fff; font-size: 9px; display: grid; place-items: center; }
.source-inspector { position: absolute; right: 42px; top: 130px; width: 360px; padding: 22px; background: linear-gradient(125deg,#3f4948ef,#273230ec); border: 1px solid #ffffff70; border-radius: 13px; box-shadow: 0 20px 45px #1b352b40,inset 0 1px 0 #ffffff20; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); color: #fff; }
.inspector-heading { display: flex; align-items: center; gap: 10px; font-size: 14px; }.inspector-heading svg { color: #b6cdbb; }.inspector-heading b { margin-left: auto; font-size: 8px; color: #b7d4bc; border: 1px solid #b7d4bc40; border-radius: 4px; padding: 3px 5px; }.source-inspector > p { font-size: 11px; color: #a3b6ad; margin-top: 8px; }
.source-request { background: #ffffff0b; border: 1px solid #ffffff19; border-radius: 4px; padding: 10px 12px; font-size: 10px; color: #c3d2c9; margin: 19px 0 17px; }.source-request span { float: right; }
.inspector-record { display: grid; grid-template-columns: 70px 1fr; gap: 13px; font-size: 11px; }.inspector-record small { font-family: ui-monospace,monospace; color: #8aa597; font-size: 9px; }.inspector-record strong { font-weight: 450; color: #e7ece9; }
.inspector-pages { display: flex; gap: 8px; margin-top: 20px; padding-top: 14px; border-top: 1px solid #ffffff15; }.inspector-pages > span { padding: 3px 6px; background: #ffffff0d; color: #bbcec3; font-size: 8px; border-radius: 3px; }
.lead-result { left: 316px; top: 94px; width: 642px; }.lead-result .demo-data-row { height: 39px; }.sheet-toolbar { display: flex; justify-content: space-between; padding: 9px 19px; font-size: 9px; color: #9ba49e; border-bottom: 1px solid #e3e9e2; }.sheet-toolbar span { color: #66886f; font-size: 8px; }
.demo-table { width: 100%; }.demo-table-head,.demo-data-row { display: grid; grid-template-columns: 1.5fr 1fr .7fr 1.1fr; align-items: center; }
.demo-table-head { background: #eef4ee; color: #718672; font-size: 9px; font-weight: 500; }.demo-data-row { border-bottom: 1px solid #e8eee8; font-size: 11px; height: 43px; color: #526254; }.demo-table-head > span { padding: 11px 15px; border-right: 1px solid #e2e9e0; }.demo-data-row > span { height: 100%; display: flex; align-items: center; padding: 0 15px; border-right: 1px solid #edf0eb; }.demo-data-row > span:first-child { color: #2f3d32; font-weight: 550; }.demo-data-row > span:last-child { color: #678b71; }
.sheet-bottom { padding: 13px 17px; font-size: 9px; display: flex; justify-content: space-between; color: #859484; }.sheet-bottom b { font-weight: 450; color: #648b69; }

/* Live-looking values become a retained snapshot. */
.market-store { padding: 14px 27px 22px; }.store-brand { font-size: 11px; font-weight: 600; padding: 0 0 11px; border-bottom: 1px solid #eceeea; display: flex; justify-content: space-between; }.store-brand > span { font-size: 8px; font-weight: 400; color: #a0a79b; }.market-store h4 { font-size: 28px; margin: 16px 0; }
.product-comparison { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }.product-picture { height: 166px; background: #ebeee7; position: relative; display: grid; place-items: center; border-radius: 3px; }.product-picture svg { width: 132px; height: 153px; color: #4b514a; }.product-picture > span { position: absolute; bottom: 12px; left: 13px; font-size: 6px; color: #969e8e; letter-spacing: .12em; }.chair-1 { background: #e8ebec; }.chair-1 svg { color: #555d60; transform: rotate(7deg); }.chair-2 { background: #e8e5df; }.chair-2 svg { color: #645e55; transform: rotate(-5deg); }
.product-info { position: relative; padding-top: 12px; }.product-info > small { font-size: 6px; letter-spacing: .1em; color: #949b8c; }.product-info > strong { display: block; font-size: 11px; margin-top: 5px; }.product-price { font-size: 15px; font-weight: 600; margin-top: 6px; }.price-after { position: absolute; top: 43px; left: 0; color: #527f63; }.price-after > span { font-size: 9px; margin-left: 8px; padding: 3px 5px; background: #e8f0e5; border-radius: 3px; }.product-info p { font-size: 7px; color: #a2a698; margin-top: 5px; }
.refresh-indicator { position: absolute; right: 65px; top: 146px; padding: 10px 16px; border: 1px solid #fff; background: #f9fcffed; border-radius: 6px; color: #7b91a5; font-size: 17px; box-shadow: 0 7px 15px #20324513; }.refresh-indicator > span { font-size: 10px; margin-left: 7px; }
.market-result { width: 592px; right: 46px; top: 103px; }.market-result .demo-data-row { height: 49px; }.market-result .demo-table-head,.market-result .demo-data-row { grid-template-columns: 1.2fr 1fr 1fr 1fr; }.market-result .demo-data-row > span:last-child { font-size: 10px; }.price-history { padding: 17px 23px 12px; }.price-history > span { font-size: 7px; color: #98a5a0; letter-spacing: .1em; }.price-history > svg { display: block; width: 100%; height: 70px; margin-top: 13px; }.history-line { stroke-dasharray: 460; }.price-history > div { display: flex; justify-content: space-between; color: #929d96; font-size: 8px; }.price-history b { font-weight: 500; color: #6e8478; }

/* Sheet data visibly crosses into the browser form. */
.supplier-app { display: flex; height: 387px; }.supplier-app > aside { width: 194px; border-right: 1px solid #e6e9e6; background: #f8f9f6; padding: 24px 18px; flex-shrink: 0; }.supplier-mark { font-family: Georgia,serif; font-size: 19px; color: #7b8773; margin-bottom: 31px; }.supplier-mark b { font-size: 10px; font-family: var(--sans); margin-left: 7px; color: #555e51; }.supplier-app > aside > span { display: block; font-size: 10px; padding: 8px 10px; color: #9a9e94; margin-top: 4px; border-radius: 4px; }.supplier-app > aside > span.active { color: #5e7658; background: #e5ebe0; }.supplier-app > aside > small { display: block; font-size: 6px; letter-spacing: .13em; margin: 42px 10px 9px; color: #969e91; }.supplier-app > aside > p { font-size: 10px; color: #7b8675; margin-left: 10px; }
.supplier-main { flex: 1; padding: 16px 37px 0 146px; }.supplier-breadcrumb { font-size: 8px; color: #9ca396; }.supplier-breadcrumb span { color: #b7bcb2; margin-left: 7px; }.supplier-main h4 { font-size: 26px; margin-top: 13px; }.supplier-main > p { font-size: 9px; color: #9aa092; margin-top: 5px; }.animated-form { margin-top: 17px; width: 375px; }
.animated-field { margin-bottom: 8px; }.animated-field > small { font-size: 8px; color: #7f8978; display: block; margin-bottom: 4px; }.animated-field > div { position: relative; border: 1px solid #dfe2df; height: 32px; background: #fff; border-radius: 4px; padding: 8px 10px; display: flex; align-items: center; }.field-value { display: inline-block; font-size: 10px; color: #596951; white-space: nowrap; }.field-check { margin-left: auto; font-size: 10px; color: #6e936d; }
.form-actions { display: flex; gap: 20px; align-items: center; font-size: 9px; color: #a2a898; margin-top: 12px; }.form-save { border-radius: 4px; padding: 8px 14px; background: #3b4b37; color: #fff; }
.input-sheet { position: absolute; left: 55px; top: 181px; width: 325px; background: #fff; border: 1px solid #cad4c4; border-radius: 8px; box-shadow: 0 15px 40px #31452a24; overflow: hidden; }.input-sheet .result-chrome { font-size: 11px; height: 46px; }
.supplier-sheet-row { display: flex; align-items: center; gap: 14px; padding: 16px 17px; border-bottom: 1px solid #edf0e9; }.supplier-sheet-row > span { font-size: 9px; color: #a6b09e; }.supplier-sheet-row strong { display: block; font-size: 12px; color: #52664a; }.supplier-sheet-row small { display: block; margin-top: 4px; font-size: 9px; color: #9da896; }.supplier-sheet-row b { margin-left: auto; color: #789b65; }.supplier-0 { background: #f0f6ec; box-shadow: inset 3px 0 #7d9c70; }.input-sheet-footer { padding: 12px 17px; font-size: 8px; color: #a2ae9a; background: #fafbf9; }
.form-ready { position: absolute; width: 295px; right: 76px; top: 223px; padding: 28px; background: #fffffff5; border: 1px solid #d6e0ce; border-radius: 8px; box-shadow: 0 15px 40px #20352520; text-align: center; }.form-ready > span { display: grid; place-items: center; border-radius: 50%; width: 38px; height: 38px; background: #ecf3e7; color: #7d9d6a; margin: 0 auto 15px; font-size: 20px; }.form-ready strong { display: block; font-size: 22px; letter-spacing: -.6px; font-weight: 550; color: #4c6142; }.form-ready p { font-size: 11px; color: #94a389; margin-top: 8px; }.form-ready small { margin-top: 23px; padding-top: 13px; border-top: 1px solid #e9eee4; display: block; font-size: 9px; color: #789064; }

/* Controls stay outside the scaled picture, legible on every screen. */
.motion-transport { display: flex; align-items: center; gap: 10px; padding: 0 3px; }
.motion-transport > button { min-width: 28px; min-height: 30px; padding: 4px; display: inline-flex; align-items: center; gap: 7px; font-size: 10px; color: #656b66; }
.motion-transport #motion-toggle { min-width: 58px; }.transport-symbol { width: 13px; font-size: 12px; }.motion-transport #motion-replay { font-size: 20px; font-family: sans-serif; line-height: 1; }
.motion-scrubber { display: flex; align-items: center; flex: 1; cursor: pointer; }.motion-scrubber input { display: block; width: 100%; height: 20px; margin: 0; cursor: pointer; accent-color: #313a36; }
.motion-scrubber input:focus-visible { outline: 2px solid #456e5a; outline-offset: 4px; }
.motion-transport output { font-size: 9px; font-variant-numeric: tabular-nums; min-width: 57px; color: #737a74; }
.motion-demo-label { font-size: 7px; letter-spacing: .1em; color: #969c95; margin-left: 8px; }.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.motion-beats { display: grid; gap: 0; margin-top: 20px; }.motion-beats > button { border-top: 1px solid #dfe4df; display: flex; gap: 10px; align-items: center; text-align: left; min-height: 42px; padding: 9px 0; color: #7c857c; }.motion-beats > button > span { font-size: 8px; }.motion-beats strong { font-size: 11px; font-weight: 500; }.motion-beats [aria-pressed=true] { color: #172b20; border-top-color: #50775b; }.motion-caption { font-size: 11px; line-height: 1.65; color: #737d73; margin-top: 7px; min-height: 37px; }
/* Short windows retain a readable stage; narrow screens reflow instead of squeezing. */
@media(min-width:1001px) and (max-height:650px) { .motion-player { max-width: none; } }
@media(max-width:1000px) {
  .motion-workspace { grid-template-columns: 1fr; gap: 22px; padding: 22px; }
  .motion-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; padding: 0; min-height: 0; }
  .motion-story { margin: 0; }
  .motion-story h3 { font-size: 30px; }
  .motion-player { max-width: none; }
  .motion-beats { grid-column: 1/-1; grid-template-columns: repeat(3,1fr); gap: 14px; margin: 0; }
  .motion-demo-label { display: none; }
  .mac-frame { border-radius: 13px; padding: 7px 6px 6px; }
  .mac-camera { top: 5px; width: 42px; left: calc(50% - 21px); height: 10px; }
  .mac-camera::after { top: 2px; left: 19px; width: 3px; height: 3px; }
  .mac-display { border-radius: 5px; }
}
@media(max-width:600px) {
  .motion-workspace { padding: 20px 12px 14px; gap: 16px; }
  .motion-summary { display: block; }
  .motion-story { padding: 0 3px; margin-bottom: 20px; }
  .motion-story h3 { font-size: 29px; }
  .motion-story > p { font-size: 12px; margin-top: 12px; }
  .motion-summary .job-request { padding: 13px 11px 8px; gap: 8px; }
  .motion-summary .copy-request { margin: 0; padding: 6px 0; }
  .mac-frame { padding: 5px 4px 4px; border-radius: 9px; box-shadow: 0 0 0 1px #d3d4d5,inset 0 0 0 1px #46484a,0 13px 24px -13px #0d152f55; }
  .mac-camera { top: 4px; height: 6px; width: 28px; left: calc(50% - 14px); border-radius: 0 0 3px 3px; }
  .mac-camera::after { width: 2px; height: 2px; left: 13px; top: 1px; }
  .mac-display { border-radius: 4px; }
  .mac-theater { padding-bottom: 10px; }
  .motion-transport { gap: 6px; }
  .motion-transport > button { min-height: 44px; min-width: 32px; }
  .motion-transport #motion-toggle { min-width: 32px; }
  .transport-label { display: none; }
  .motion-transport output { font-size: 8px; min-width: 51px; }
  .motion-beats { margin-top: 18px; gap: 9px; }
  .motion-beats > button { display: block; padding-top: 10px; line-height: 1.5; }
  .motion-beats > button > span { display: block; font-size: 7px; margin-bottom: 5px; }
  .motion-beats strong { display: block; font-size: 10px; }
  .motion-caption { font-size: 11px; margin-top: 6px; }
}