.hero:has(>.hero-phone-demo){grid-template-columns:1.12fr .88fr;gap:48px}.hero:has(>.hero-phone-demo)>.hero-wordmark:not([data-playing=true]){opacity:.075}.hero-phone-demo{flex-direction:column;align-items:center;min-width:0;display:flex}.hero-phone-demo .phone-stage{place-items:center;width:100%;padding:18px 0 22px;display:grid}.hero-phone-demo .phone-device{filter:drop-shadow(14px 26px 26px #0009);flex-shrink:0;width:clamp(270px,22.2vw,318px);max-width:80%;position:relative;transform:rotate(-4deg)}.hero-phone-demo .phone-hardware-frame{z-index:4;pointer-events:none;-webkit-user-select:none;user-select:none;object-fit:contain;width:100%;height:100%;position:absolute;inset:0}.hero-phone-demo .phone-display{left:var(--screen-left);right:var(--screen-right);top:var(--screen-top);bottom:var(--screen-bottom);color:#fff;background:#101114;border-radius:12%/5.5%;position:absolute;overflow:hidden}.hero-phone-demo .phone-viewfinder{position:absolute;inset:0;overflow:hidden}.hero-phone-demo .phone-rear-video,.hero-phone-demo .phone-front-view video{object-fit:cover;width:100%;height:100%;display:block}.hero-phone-demo .phone-status{z-index:2;color:#fff;background:linear-gradient(#0007,#0000);justify-content:space-between;align-items:center;height:8%;padding:0 7%;font-size:11px;font-weight:600;display:flex;position:absolute;top:0;left:0;right:0}.hero-phone-demo .phone-status-icons{align-items:center;gap:3px;display:flex}.hero-phone-demo .phone-recording-time{color:#fff;font-variant-numeric:tabular-nums;background:#0c0d10b8;border-radius:6px;align-items:center;gap:5px;padding:6px 7px;font-size:10px;line-height:1;display:flex;position:absolute;top:10%;left:5.5%}.hero-phone-demo .phone-rec-dot{background:#ff453a;border-radius:50%;width:5px;height:5px}.hero-phone-demo .phone-device[data-running=false] .phone-rec-dot{background:#c2c2c7}.hero-phone-demo .phone-front-view{aspect-ratio:3/4;background:#17181b;border:1px solid #fff9;border-radius:10px;width:30%;position:absolute;top:13.5%;right:5.5%;overflow:hidden;box-shadow:0 5px 12px #0003}.hero-phone-demo .phone-front-label{text-align:center;color:#fff;background:#08080a94;padding:3px 2px;font-size:8px;line-height:1.3;position:absolute;bottom:0;left:0;right:0}.hero-phone-demo .phone-zoom{color:#fff;background:#090a0cb8;border-radius:50%;place-items:center;width:29px;height:29px;font-size:11px;display:grid;position:absolute;bottom:27%;left:50%;transform:translate(-50%)}.hero-phone-demo .phone-camera-footer{z-index:2;background:linear-gradient(#0000,#07080ad9 70%);flex-direction:column;justify-content:flex-end;align-items:center;height:26%;padding-bottom:8%;display:flex;position:absolute;bottom:0;left:0;right:0}.hero-phone-demo .demo-toolbar{background:0 0;border:0;border-radius:0;justify-content:center;align-items:center;gap:17px;width:88%;max-width:none;margin:0;padding:0;display:flex;position:absolute;top:10%}.hero-phone-demo .demo-toolbar button{color:#ffffffb8;white-space:normal;background:0 0;border:0;border-radius:0;min-width:44px;max-width:48%;min-height:40px;padding:4px 0;font-size:10px;line-height:1.4}.hero-phone-demo .demo-toolbar button[aria-pressed=true]{color:#ffd478;background:0 0}.hero-phone-demo .demo-toolbar button:hover{color:#fff}.hero-phone-demo .phone-video-mode{display:none}.hero-phone-demo .phone-record-button{color:#fff;background:#0001;border:2px solid #fffffff0;border-radius:50%;place-items:center;width:58px;height:58px;padding:0;display:grid}.hero-phone-demo .phone-record-button:focus-visible{outline-offset:3px;outline:2px solid #ffd478}.hero-phone-demo .phone-stop-square{background:#ff453a;border-radius:5px;width:25px;height:25px}.hero-phone-demo .phone-home-indicator{background:#f4f4f2;border-radius:4px;width:34%;height:3px;position:absolute;bottom:2.8%}.hero-phone-demo .phone-model-picker{color:#d1d1d6;background:#151518;border:1px solid #303035;border-radius:14px;justify-content:center;align-items:center;gap:9px;max-width:100%;margin-top:12px;padding:4px 8px;font-size:12px;display:flex}.hero-phone-demo .phone-model-picker>span{padding-left:3px}.hero-phone-demo .phone-model-options{gap:2px;display:flex}.hero-phone-demo .phone-model-options button{color:#b9b9c1;font-variant-numeric:tabular-nums;background:0 0;border:0;border-radius:9px;min-width:44px;min-height:44px;padding:8px 9px;font-size:13px;transition:background .16s,color .16s}.hero-phone-demo .phone-model-options button:hover{color:#fff;background:#27272d}.hero-phone-demo .phone-model-options button[aria-pressed=true]{color:#111114;background:#f0f0f2}.hero-phone-demo>figcaption{text-align:center;max-width:46ch;margin-top:12px;font-size:11px;line-height:1.6}@media (min-width:768px) and (max-width:1100px){.hero-phone-demo .phone-model-picker>span{display:none}.hero-phone-demo .phone-device{width:270px;max-width:88%}}@media (max-width:767px){.hero-phone-demo .phone-device{width:min(268px,100vw - 80px);max-width:none;transform:rotate(-3deg)}.hero-phone-demo .phone-stage{padding:12px 0 14px}.hero-phone-demo .phone-model-picker{margin-top:8px}.hero-phone-demo>figcaption{font-size:10px}}@media (max-width:360px){.hero-phone-demo .phone-model-picker>span{display:none}}@media (prefers-reduced-motion:reduce){.hero-phone-demo .phone-model-options button{transition:none}}.hero-phone-demo .phone-camera-footer{background:linear-gradient(#0000,#07080ad9 62%);gap:0;height:auto;padding:20px 0}.hero-phone-demo .phone-zoom{flex-shrink:0;width:25px;height:25px;margin-bottom:-7px;position:static;transform:none}.hero-phone-demo .demo-toolbar{gap:12px;width:auto;max-width:90%;margin:0;position:static;top:auto}.hero-phone-demo .demo-toolbar button{max-width:none;min-height:44px;padding:0}.hero-phone-demo .phone-home-indicator{bottom:7px}.hero-phone-demo .phone-device{width:calc(clamp(270px,22.2vw,318px) * var(--device-scale,1))}.hero-phone-demo .phone-select-wrap{flex-shrink:0;position:relative}.hero-phone-demo .phone-select-wrap select{-webkit-appearance:none;appearance:none;min-height:44px;color:var(--text);font:inherit;cursor:pointer;background:#222227;border:0;border-radius:8px;padding:8px 27px 8px 10px;font-size:12px}.hero-phone-demo .phone-select-wrap>svg{pointer-events:none;color:#b9b9c1;position:absolute;top:50%;right:8px;transform:translateY(-50%)}.hero-phone-demo .phone-variant-select select{min-width:100px}.hero-phone-demo .phone-generation-select{display:none}.hero-phone-demo .phone-select-wrap select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media (max-width:1100px){.hero-phone-demo .phone-model-options{display:none}.hero-phone-demo .phone-generation-select{display:block}.hero-phone-demo .phone-model-picker>span{display:inline}.hero-phone-demo .phone-generation-select select{min-width:61px}}@media (min-width:768px) and (max-width:1100px){.hero-phone-demo .phone-device{width:calc(245px * var(--device-scale,1));max-width:88%}}@media (max-width:767px){.hero-phone-demo .phone-device{width:calc(min(238px,calc((100vw - 80px)/1.14)) * var(--device-scale,1));max-width:none}.hero-phone-demo .phone-model-picker{gap:7px}.hero-phone-demo .phone-status-icons>svg{width:10px}.hero-phone-demo .phone-status-icons>svg:last-child{width:14px}}.hero-phone-demo .phone-record-button{background:0 0;border:0;width:44px;height:44px;position:relative}.hero-phone-demo .phone-record-button:before{content:"";box-sizing:border-box;pointer-events:none;border:1.5px solid #fffffff0;border-radius:50%;position:absolute;inset:3px}.hero-phone-demo .phone-record-button:hover{background:0 0}.hero-phone-demo .phone-record-button:hover:before{background:#ffffff12}.hero-phone-demo .phone-stop-square{border-radius:4px;width:17px;height:17px}.hero-phone-demo .phone-record-button>svg{width:16px;height:16px}