/* Shared by the case study and the standalone gallery. */
.landing-mockups, .landing-mockups * {box-sizing:border-box}
.mockups-page {font-family:Arial,Helvetica,sans-serif;color:#eee;background:#0b0b0c;color-scheme:dark}
.mockups-page {margin:0}
.landing-mockups button, .landing-mockups a, .landing-mockups input {-webkit-tap-highlight-color:transparent}
.landing-mockups a {color:inherit;text-decoration:none}
.landing-mockups button {font:inherit;cursor:pointer}
.landing-mockups button:focus-visible, .landing-mockups a:focus-visible, .landing-mockups input:focus-visible {outline:2px solid #ffe600;outline-offset:5px}
.mockups-page main {box-sizing:border-box;width:min(960px,calc(100% - 48px));margin:auto;padding:34px 0 24px}
.mockups-page .back {font-size:13px;color:#aaa}
.mockups-page .back:hover {color:#fff}
.mockups-page .heading {display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin:32px 0 28px}
.mockups-page h1 {font-size:clamp(28px,3.5vw,52px);font-weight:500;letter-spacing:-.05em;margin:0}
.mockups-page .heading p {font-size:14px;color:#999;margin:0}
.landing-mockups .markets {display:flex;gap:9px;flex-wrap:nowrap;min-width:0;max-width:100%;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;margin-bottom:20px}
.landing-mockups .markets::-webkit-scrollbar {display:none;width:0;height:0}
.landing-mockups .markets button, .landing-mockups .device-switch button {flex:0 0 auto;border:1px solid #38383c;color:#aaa;background:transparent;border-radius:30px;padding:10px 20px;font-size:13px;line-height:1.2;white-space:nowrap}
.landing-mockups .markets button {scroll-snap-align:start}
.landing-mockups .markets button:focus-visible {outline-offset:-3px}
.landing-mockups .markets button[aria-pressed=true], .landing-mockups .device-switch button[aria-pressed=true] {background:#eee;color:#111;border-color:#eee}
.landing-mockups .markets button:hover, .landing-mockups .device-switch button:hover {background:#19191c;color:#fff;border-color:#38383c}
.landing-mockups .presentation {border:1px solid #29292c;border-radius:16px;overflow:hidden;background:#151517}
.landing-mockups .stage {aspect-ratio:1920/1200;position:relative;overflow:hidden;background:#19191c}
.landing-mockups .device {position:absolute}
.landing-mockups .laptop {left:4%;top:17%;width:70%}
.landing-mockups .laptop-lid {padding:1.1% 1.1% .9%;border:1px solid #535359;border-radius:17px 17px 4px 4px;background:#09090a}
.landing-mockups .screen {overflow:clip;background:#fff;position:relative}
.landing-mockups .desktop-screen {aspect-ratio:1440/900}
.landing-mockups .laptop-base {height:12px;position:relative;background:linear-gradient(#5a5a61,#27272c);border-radius:1px 1px 60% 60%;margin:0 -3%;border-top:1px solid #77777d}
.landing-mockups .laptop-base>span {display:block;width:14%;height:4px;background:#1c1c20;border-radius:0 0 6px 6px;margin:auto}
/* Front-facing iPhone 18 Pro frame, drawn in CSS. */
.landing-mockups .phone {left:50%;top:12%;width:27%;transform:translateX(-50%);container-type:inline-size}
.landing-mockups .phone-body {position:relative;background:#0a0a0b;border:1px solid #727277;border-radius:17cqw;padding:2.1cqw;box-shadow:0 0 0 1px #080809,inset 0 0 0 1px #38383c}
.landing-mockups .phone-display {overflow:clip;background:#fff;border-radius:14.8cqw}
.landing-mockups .phone-status {display:flex;align-items:center;justify-content:space-between;position:relative;height:12cqw;background:#fff;color:#111;padding:1.6cqw 7.5cqw 0;font:600 4cqw/1 Arial,Helvetica,sans-serif}
.landing-mockups .camera {position:absolute;left:41%;top:3.5cqw;width:18%;height:5.5cqw;background:#070708;border-radius:5cqw}
.landing-mockups .phone-indicators {display:flex;align-items:center;gap:1.2cqw}
.landing-mockups .phone-indicators svg {width:3.6cqw;height:3cqw}
.landing-mockups .phone-battery {width:6cqw;height:3cqw;border:1px solid #888;border-radius:.8cqw;padding:.4cqw;position:relative}
.landing-mockups .phone-battery:before {content:"";display:block;background:#111;width:100%;height:100%;border-radius:.3cqw}
.landing-mockups .phone-battery:after {content:"";position:absolute;right:-1cqw;top:.7cqw;width:.5cqw;height:1.2cqw;background:#888;border-radius:.3cqw}
.landing-mockups .phone-button {position:absolute;z-index:-1;background:#54545a;width:1cqw;border-radius:1cqw}
.landing-mockups .phone-action {left:-.8cqw;top:17%;height:5cqw}
.landing-mockups .phone-volume {left:-.8cqw;top:25%;height:16cqw}
.landing-mockups .phone-power {right:-.8cqw;top:30%;height:14cqw}
.landing-mockups .mobile-screen {aspect-ratio:393/708}
.landing-mockups .phone-bottom {height:6cqw;background:#fff;display:flex;align-items:center;justify-content:center}
.landing-mockups .phone-bottom span {width:30%;height:1.2cqw;border-radius:2cqw;background:#161616}
.landing-mockups [data-field="production"] {font-size:12px;white-space:nowrap;margin-left:10px;color:#ccc}
.mockups-page footer {font-size:11px;color:#6f6f75;margin-top:18px}
.landing-mockups .stage.is-desktop .laptop {left:14%;top:17%;width:72%}
.landing-mockups [hidden] {display:none!important}
@media(max-width:700px) {
.mockups-page main {width:calc(100% - 32px);padding:24px 0}
.mockups-page .heading {display:block;margin:26px 0 22px}
.mockups-page .heading p {margin-top:10px}
.landing-mockups .markets {gap:6px}
.landing-mockups .markets button, .landing-mockups .device-switch button {font-size:11px;padding:8px 12px}
.landing-mockups .stage {aspect-ratio:1/1.2}
.landing-mockups .laptop {left:5%;top:19%;width:90%}
.landing-mockups .laptop-lid {border-radius:9px 9px 2px 2px}
.landing-mockups .laptop-base {height:6px}
.landing-mockups [data-field="production"] {font-size:10px;margin-left:0}
.landing-mockups .stage.is-desktop {aspect-ratio:1.25}
.landing-mockups .stage.is-desktop .laptop {left:5%;top:24%;width:90%}
}

.landing-mockups {scroll-margin-top:110px; min-width:0; margin-top:38px; color:#eee; font-family:Arial,Helvetica,sans-serif; line-height:normal}
.landing-mockups .capture-note {color:#84848b; font-size:11px; line-height:1.6; margin:18px 0 0}
.mockups-page .landing-mockups {margin-top:0}

.landing-mockups .gallery-toolbar {display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.landing-mockups .gallery-toolbar .markets {margin-bottom:0;flex:1 1 460px}
.landing-mockups .device-switch {display:flex;gap:9px}
.landing-mockups .device-switch button:disabled {opacity:.35;cursor:default}
.landing-mockups .stage.is-mobile {aspect-ratio:1.25}
@media(max-width:700px) {
  .landing-mockups .gallery-toolbar {gap:14px}
  .landing-mockups .device-switch {gap:6px}
  .landing-mockups .stage.is-mobile {aspect-ratio:.5}
  .landing-mockups .stage.is-mobile .phone {top:11%;width:70%}
}

.landing-mockups .screen iframe {position:absolute;left:0;top:0;border:0;display:block;transform-origin:0 0;background:#fff}
.landing-mockups .prototype-footer {display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 24px;background:#111113;border-top:1px solid #29292c}
.landing-mockups .prototype-footer p {font-size:12px;line-height:1.5;color:#999;margin:0}
@media(max-width:700px) {.landing-mockups .prototype-footer {padding:14px;gap:10px}.landing-mockups .prototype-footer p {font-size:11px}}