/* Landing-only phone demo; the paid dashboard retains its own layout. */
.hero-demo-layout { max-width: 1152px; margin: 0 auto 56px; display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 64px; align-items: center; text-align: left; }
.hero-demo-copy h1 { font-size: clamp(38px, 5.4vw, 76px); margin: 0 0 30px; }
.hero-demo-copy .hero-description { margin: 0 0 30px; }
.hero-demo-copy .hero-cta { justify-content: flex-start; gap: 12px; flex-wrap: wrap; }
.hero-demo-copy .hero-action { padding: 16px 22px; }
.hero-phone-demo { text-align: center; }
.hero-phone-demo > p { margin: 20px 0 4px; font-weight: 700; color: var(--ink); }
.hero-phone-demo > span, .demo-preview-caption { color: var(--muted); font-size: 12px; }
.demo-phone-preview { position: relative; margin: auto; width: 234px; height: 472px; border: 7px solid #1d1c1b; border-radius: 35px; overflow: hidden; background: radial-gradient(ellipse at 95% 100%, #ffcc89 0, transparent 54%), radial-gradient(ellipse at 5% 40%, #ff7f49 0, transparent 70%), #d83912; color: #fff7ec; box-shadow: 0 22px 46px #22190f26, inset 0 0 0 1px #ffffff33; font-family: inherit; }
.demo-phone-preview::before { content: ''; position: absolute; width: 58px; height: 15px; background: #1d1c1b; border-radius: 0 0 12px 12px; left: calc(50% - 29px); top: 0; }
.demo-preview-status { display: flex; justify-content: space-between; padding: 14px 16px; font-size: 10px; font-weight: 700; }
.demo-preview-clock { margin: 58px 0 0; text-align: center; font-size: 72px; font-weight: 300; letter-spacing: -5px; line-height: .95; }
.demo-preview-clock span { display: block; }
.demo-preview-date { text-align: center; font-size: 11px; margin: 15px 0; opacity: .95; }
.demo-preview-apps { position: absolute; display: flex; justify-content: space-between; bottom: 32px; left: 16px; right: 16px; }
.demo-preview-apps span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 13px; background: #fff4dfdf; color: #87330c; font-size: 22px; }
.demo-preview-home { position: absolute; left: 80px; right: 80px; bottom: 10px; height: 3px; background: #fff4df; border-radius: 8px; }

/* Material Symbols Outlined, the exact glyph family used by the Stitch toolbar. */
@font-face { font-family:"Demo Symbols"; font-style:normal; font-weight:400; font-display:block; src:url("/theme-assets/fonts/material-symbols-demo.ttf") format("truetype"); }
.demo-symbol { font-family:"Demo Symbols"; font-weight:400; font-style:normal; font-size:19px; line-height:1; letter-spacing:normal; text-transform:none; display:inline-block; white-space:nowrap; word-wrap:normal; direction:ltr; font-feature-settings:"liga"; -webkit-font-smoothing:antialiased; }
/* The modal owns its preview and sizing; the landing phone above is unchanged. */
.phone-demo { --demo-orange:#ff5722; --demo-muted:#a0a6b0; --demo-toolbar-width:62px; --demo-toolbar-height:339px; --demo-toolbar-scale:1; --demo-capsule-scale:1; --demo-capsule-height:44px; --demo-settings-scale:1; box-sizing:border-box; width:min(1360px,calc(100vw - 48px)); height:min(860px,calc(100dvh - 40px)); max-height:none; padding:40px 48px 18px; border:1px solid #ffffff26; border-radius:36px; color:#f7f8fa; background:radial-gradient(ellipse at 0 0,#ff572215,transparent 40%),radial-gradient(#ffffff12 1px,transparent 1px) 0 0/24px 24px,#171b20; box-shadow:0 25px 70px #0009; overflow:clip; overscroll-behavior:contain; font-family:var(--font-body,Inter,system-ui,sans-serif); }
.phone-demo::backdrop { background:#121619bd; backdrop-filter:blur(6px); }
.phone-demo[open] { display:grid; grid-template-rows:auto minmax(0,1fr); gap:24px; margin:auto; }
.phone-demo *, .phone-demo *::before, .phone-demo *::after { box-sizing:border-box; }
.phone-demo [hidden] { display:none !important; }
.phone-demo button,.phone-demo select { font:inherit; color:inherit; }
.phone-demo button { cursor:pointer; min-height:44px; }
.phone-demo button:disabled { cursor:not-allowed; }
.phone-demo :is(button,select,summary,[tabindex]):focus-visible { outline:3px solid #ff8b61; outline-offset:4px; }
.demo-dialog-heading { max-width:580px; padding-right:32px; }
.demo-eyebrow { display:inline-flex; align-items:center; gap:8px; margin:0 0 14px; padding:6px 12px; border:1px solid #ff572242; border-radius:30px; background:#ff572215; color:#ff7344; font-family:var(--font-heading,Montserrat,system-ui,sans-serif); font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.demo-eyebrow span,.demo-status-dot { width:7px; height:7px; border-radius:50%; background:var(--demo-orange); flex-shrink:0; }
.demo-dialog-heading h2 { margin:0 0 10px; font-family:var(--font-heading,Montserrat,system-ui,sans-serif); font-size:clamp(26px,3.1vw,44px); font-weight:800; letter-spacing:-.035em; line-height:1.15; color:#fff; }
#demo-description { margin:0; color:var(--demo-muted); font-size:13px; line-height:1.7; }
.demo-close { position:absolute; right:30px; top:28px; width:44px; padding:0; border:1px solid #ffffff30; border-radius:50%; background:#ffffff0d; font-size:28px !important; line-height:1; }
.demo-viewer { position:relative; display:flex; flex-direction:column; align-items:center; gap:16px; min-width:0; min-height:0; }
/* Reserve equal room on both sides even before the toolbar appears. Bottom
   alignment keeps the capsule 16px below width-constrained phones as well. */
.demo-stage-row { --demo-toolbar-gap:24px; --demo-toolbar-room:calc(var(--demo-toolbar-width) * var(--demo-toolbar-scale) + var(--demo-toolbar-gap)); --demo-phone-height:min(100cqh,max(0px,calc((100cqw - var(--demo-toolbar-room) * 2) * 524 / 256))); display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); flex:1; align-items:end; width:100%; min-height:0; container-type:size; }
.demo-toolbar-slot { position:relative; grid-column:1; justify-self:end; width:calc(var(--demo-toolbar-width) * var(--demo-toolbar-scale)); height:var(--demo-phone-height); min-height:0; margin-right:var(--demo-toolbar-gap); }
.demo-toolbar-slot > .demo-toolbar { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(var(--demo-toolbar-scale)); transform-origin:center; }
.demo-phone-frame { position:relative; grid-column:2; justify-self:center; height:var(--demo-phone-height); aspect-ratio:256/524; border:6px solid #121417; border-radius:clamp(10px,2vh,22px); background:#121417; box-shadow:0 0 0 1px #484e58,0 0 0 3px #22262c,0 0 0 4px #15181c,0 25px 60px -10px #000d,0 0 40px #ff572225; overflow:hidden; }
.demo-phone-frame > [data-demo-preview],.demo-controller,.demo-live-stage { position:absolute; inset:0; width:100%; height:100%; }
.demo-phone-frame > [data-demo-preview] { z-index:4; pointer-events:none; }
.demo-controller { background:#000; }
.demo-live-stage canvas,.demo-live-stage video { display:block; width:100%; height:100%; object-fit:contain; touch-action:none; user-select:none; -webkit-user-select:none; }
.demo-input-surface { position:absolute; inset:0; z-index:2; touch-action:none; user-select:none; -webkit-user-select:none; }
.demo-input-surface.is-interactive { cursor:crosshair; }
.demo-phone-overlay { position:absolute; inset:0; display:grid; place-items:center; z-index:3; pointer-events:none; background:#0008; }
.demo-lock-screen { position:absolute; inset:0; color:#fff7ec; background:radial-gradient(ellipse at 95% 100%,#ffcc89 0,transparent 54%),radial-gradient(ellipse at 5% 40%,#ff7f49 0,transparent 70%),#d83912; container-type:size; }
.demo-lock-status { display:flex; justify-content:space-between; align-items:center; padding:10px 16px; font-size:4.7cqw; font-weight:650; }
.demo-lock-telemetry { display:flex; align-items:center; gap:6px; font-size:4.1cqw; font-weight:700; }
.demo-lock-telemetry .demo-icon-cellular { width:14px; height:12px; }
.demo-lock-battery { position:relative; display:flex; width:19px; height:9.5px; border:1px solid #fffc; border-radius:3px; padding:1px; margin-right:2px; }
.demo-lock-battery > span { width:100%; height:100%; border-radius:1.5px; background:white; }
.demo-lock-battery::after { content:""; position:absolute; left:calc(100% + 2px); top:2px; width:1px; height:3.5px; background:#fff9; border-radius:0 1px 1px 0; }
.demo-lock-camera { position:absolute; top:10px; left:calc(50% - 7px); width:14px; height:14px; border:4px solid #0a0a0c; border-radius:50%; background:#02182be6; box-shadow:0 0 0 1.5px #1c1f24,inset 0 0 0 1px #0d3b6699; }
.demo-lock-content { display:flex; flex-direction:column; align-items:center; padding:7cqh 10px 0; }
.demo-padlock { width:26px; height:26px; display:grid; place-items:center; background:#0005; border:1px solid #ffffff26; border-radius:50%; margin-bottom:6px; }
.demo-lock-clock { font-size:20cqw; line-height:1; letter-spacing:-.05em; font-weight:800; font-variant-numeric:tabular-nums; text-shadow:0 4px 18px #0005; }
.demo-lock-date { font-size:4.5cqw; letter-spacing:.12em; text-transform:uppercase; margin-top:8px; font-weight:600; }
.demo-notification { width:100%; margin-top:16px; padding:12px; border:1px solid #ffffff40; border-radius:20px; background:linear-gradient(135deg,#ffffff18,transparent 60%),#0005; backdrop-filter:blur(18px); box-shadow:0 10px 30px #0005,inset 0 1px 1px #ffffff40; text-align:left; }
.demo-notification-header { display:flex; justify-content:space-between; align-items:center; color:#ffffffad; font-size:4cqw; letter-spacing:.04em; margin-bottom:8px; }
.demo-notification-header b { display:inline-grid; place-items:center; width:18px; height:18px; border-radius:5px; background:#34c759; color:white; margin-right:4px; }
.demo-notification > strong { font-size:5cqw; }
.demo-notification p { margin:4px 0 0; font-size:4.7cqw; line-height:1.5; }
.demo-notification p b { display:inline-block; border-radius:4px; background:#ffffff30; padding:0 4px; }
.demo-lock-bottom { position:absolute; bottom:20px; left:16px; right:16px; display:flex; align-items:center; justify-content:space-between; }
.demo-lock-bottom > span { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; border:1px solid #ffffff30; background:#0005; }
.demo-lock-bottom small { display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center; font-size:3.7cqw; letter-spacing:.05em; opacity:.85; }
.demo-lock-bottom .demo-icon { width:16px; height:16px; }
.demo-lock-bottom .demo-icon-chevron { width:12px; height:12px; color:#fffb; }
.demo-padlock .demo-icon { width:14px; height:14px; color:#fffc; }
.demo-notification-header .demo-icon { width:10px; height:10px; }
.demo-lock-home { position:absolute; bottom:8px; left:30%; right:30%; height:3px; border-radius:4px; background:#ffffffb3; }
.demo-toolbar { display:flex; flex-direction:column; align-items:center; gap:8px; flex-shrink:0; width:var(--demo-toolbar-width); padding:10px 8px; background:#13171cf2; border:1px solid #2d343f; border-radius:18px; box-shadow:0 12px 36px #0008; }
.demo-tool { position:relative; display:block; flex-shrink:0; width:44px; height:44px; border-radius:12px; }
.demo-tool > button:disabled { pointer-events:none; }
.demo-tooltip { position:fixed; z-index:30; visibility:hidden; opacity:0; pointer-events:none; width:max-content; max-width:calc(100vw - 16px); padding:7px 10px; border:1px solid #ffffff30; border-radius:8px; background:#080c11f5; box-shadow:0 4px 16px #0008; color:#f7f8fa; font:500 12px/1.4 var(--font-body,Inter,system-ui,sans-serif); text-align:left; white-space:normal; }
.demo-tooltip.is-visible { visibility:visible; opacity:1; }
.demo-toolbar button,.demo-quality-select { width:44px; height:44px; display:grid; place-items:center; padding:10px; border:1px solid #ffffff0d; border-radius:12px; background:#1e232b; }
.demo-icon { display:block; width:22px; height:22px; flex-shrink:0; }
.demo-close { display:grid; place-items:center; }
.demo-close .demo-icon { width:16px; height:16px; stroke-width:2.5; }
.demo-toolbar button:hover:enabled { background:#2a313d; }
.demo-toolbar [aria-pressed="false"] .demo-audio-on,.demo-toolbar [aria-pressed="true"] .demo-audio-off { display:none; }
.demo-toolbar button[aria-pressed="true"] { color:#ff875e; border-color:#ff572266; }
.demo-quality-select { position:relative; padding:0; color:#ff875e; font:700 11px ui-monospace,monospace; }
.demo-quality-select select { position:absolute; inset:0; opacity:0; width:100%; cursor:pointer; }
.demo-quality-select:has(select:disabled) { opacity:.45; }
.demo-toolbar-divider { height:1px; width:24px; background:#ffffff20; margin:2px; }
.demo-toolbar .demo-locked { position:relative; color:#6b7280; background:#171b20; opacity:.5; }
.demo-locked > .demo-symbol { font-size:18px; }
.demo-toolbar .demo-reset-locked { color:#f87171cc; background:#241718; border-color:#ef444433; }
.demo-reset-locked .demo-lock-mark { color:#ef4444; background:#191112; border-color:#ef44444d; }
.demo-locked > .demo-lock-mark { position:absolute; right:-4px; top:-4px; padding:1px; color:#f59e0b; background:#111417; border:1px solid #ffffff1a; border-radius:50%; font-size:10px; }
.demo-reset-locked > .demo-lock-mark { color:#ef4444; background:#191112; border-color:#ef44444d; }
.demo-capsule-slot,.demo-fullscreen-capsule-slot { position:relative; flex-shrink:0; width:100%; min-width:0; height:calc(var(--demo-capsule-height) * var(--demo-capsule-scale)); }
.demo-capsule { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(var(--demo-capsule-scale)); transform-origin:center; display:flex; align-items:center; justify-content:center; flex-wrap:nowrap; gap:10px; width:max-content; max-width:none; padding:6px 16px; min-height:44px; border:1px solid #ffffff1a; border-radius:30px; background:#13171cf2; box-shadow:0 8px 20px #0004; backdrop-filter:blur(12px); font:600 11px ui-monospace,SFMono-Regular,monospace; white-space:nowrap; }
.demo-status-badge { display:inline-flex; align-items:center; gap:8px; }
.demo-status-dot { position:relative; color:var(--demo-orange); background:currentColor; }
.demo-status-dot::after { content:""; position:absolute; inset:0; border-radius:inherit; background:currentColor; animation:demo-status-ping 1.5s cubic-bezier(0,0,.2,1) infinite; }
@keyframes demo-status-ping { 0% { transform:scale(1); opacity:.75; } 75%,100% { transform:scale(2.3); opacity:0; } }
@media (prefers-reduced-motion:reduce) { .demo-status-dot::after { animation:none; opacity:0; } }
[data-demo-status] { text-transform:uppercase; letter-spacing:.04em; }
[data-demo-status][data-connecting="true"]::after { content:"..."; display:inline-block; width:3ch; clip-path:inset(0 66.67% 0 0); animation:demo-connecting-dots 1.2s steps(3,jump-none) infinite; }
@keyframes demo-connecting-dots { to { clip-path:inset(0 0 0 0); } }
@media (prefers-reduced-motion:reduce) { [data-demo-status][data-connecting="true"]::after { animation:none; clip-path:none; } }
.demo-capsule-secondary { padding-left:10px; border-left:1px solid #ffffff26; color:#a0a6b0; }
.demo-capsule b { color:white; font-variant-numeric:tabular-nums; }
.demo-capsule-divider { width:1px; height:14px; background:#ffffff26; }
.demo-capsule button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:32px; border:0; padding:6px 14px; border-radius:24px; background:var(--demo-orange); color:white; font:600 12px var(--font-body,system-ui,sans-serif); box-shadow:0 0 14px #ff572273; }
.demo-capsule .demo-icon-arrow { width:14px; height:14px; }
.phone-demo:is([data-demo-state="ended"],[data-demo-state="exhausted"]) .demo-status-badge { padding:4px 10px; border:1px solid #ef444433; border-radius:24px; background:#450a0a66; color:#fda4af; font-size:10.5px; }
.phone-demo:is([data-demo-state="ended"],[data-demo-state="exhausted"]) .demo-status-dot { width:6px; height:6px; color:#f43f5ee6; box-shadow:0 0 6px #f43f5e99; }
.demo-warning { flex-shrink:0; max-width:600px; margin:0; text-align:center; color:#ffbe8b; font-size:11px; line-height:1.5; }
.demo-connection-quality,.demo-connection-section { min-width:0; border:1px solid #ffffff26; border-radius:12px; background:#13171ca6; font-size:11px; }
.demo-connection-quality > summary,.demo-connection-section > summary { padding:12px; cursor:pointer; }
.demo-connection-quality summary strong { float:right; margin-left:6px; }
.demo-quality-route { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:0 12px 12px; }
.demo-quality-segment { display:flex; flex-direction:column; gap:6px; }
.demo-quality-segment small { color:#a0a6b0; overflow-wrap:anywhere; }
.demo-connection-quality [data-status="good"] { color:#7cdb9b; }
.demo-connection-quality [data-status="fair"] { color:#edc277; }
.demo-connection-quality [data-status="poor"],.demo-connection-quality [data-status="offline"] { color:#ff9a8d; }
.demo-viewer:is(:fullscreen,.is-fullscreen) { display:grid; grid-template-rows:auto auto minmax(0,1fr); grid-template-columns:minmax(0,1fr); align-items:stretch; gap:0; width:100%; height:100dvh; max-height:none; margin:0; padding:0; padding-bottom:env(safe-area-inset-bottom,0px); overflow:clip; background:#000; }
.demo-viewer:is(:fullscreen,.is-fullscreen) .demo-stage-row { grid-area:3 / 1; grid-template-columns:minmax(0,1fr); height:100%; padding:0; }
.demo-viewer:is(:fullscreen,.is-fullscreen) .demo-phone-frame { grid-column:1; width:100%; height:100%; aspect-ratio:auto; border:0; border-radius:0; box-shadow:none; background:#000; }
.demo-viewer:is(:fullscreen,.is-fullscreen) .demo-phone-frame > [data-demo-preview] { inset:auto; top:50%; left:50%; width:min(100cqw,calc(100cqh * 256 / 524)); height:min(100cqh,calc(100cqw * 524 / 256)); transform:translate(-50%,-50%); }
.demo-viewer:is(:fullscreen,.is-fullscreen) :is(.demo-toolbar-slot,.demo-capsule-slot) { display:none; }
.demo-viewer:is(:fullscreen,.is-fullscreen) .demo-warning { grid-area:2 / 1; justify-self:center; max-width:min(600px,calc(100% - 24px)); margin:0 0 6px; padding:6px 10px; border-radius:8px; background:#13171ce6; }
.demo-viewer.is-fullscreen { position:fixed; inset:0; z-index:10; }
.phone-demo:has(.is-fullscreen) { position:fixed; inset:0; width:100vw; height:100dvh; max-height:none; padding:0; border:0; border-radius:0; }
.phone-demo:has(.is-fullscreen) > :is(.demo-dialog-heading,.demo-close),.phone-demo:has(.demo-viewer:fullscreen) > :is(.demo-dialog-heading,.demo-close) { display:none; }
.demo-fullscreen-bar { grid-area:1 / 1; display:grid; grid-template-columns:44px minmax(0,1fr) 44px; align-items:center; column-gap:8px; padding:calc(8px + env(safe-area-inset-top,0px)) max(8px,env(safe-area-inset-right,0px)) 8px max(8px,env(safe-area-inset-left,0px)); z-index:12; background:#000; }
.demo-fullscreen-capsule-slot { grid-column:2; }
.demo-fullscreen-button { display:grid; place-items:center; width:44px; height:44px; padding:10px; border:1px solid #ffffff30; border-radius:50%; background:#151a22b3; }
.demo-fullscreen-button:hover { background:#29303c; }
.demo-fullscreen-button[aria-expanded="true"] { color:#ff875e; border-color:#ff572280; background:#291c16; }
.demo-fullscreen-close { grid-column:3; }
.demo-settings-overlay { grid-area:3 / 1; position:relative; z-index:10; min-width:0; min-height:0; width:100%; height:100%; overflow:clip; background:#0003; }
.demo-settings-panel { position:absolute; top:12px; left:max(12px,env(safe-area-inset-left,0px)); display:grid; grid-template-columns:var(--demo-toolbar-width) minmax(0,1fr); align-items:start; gap:12px; width:min(640px,calc(100% - 24px)); padding:12px; border:1px solid #ffffff30; border-radius:18px; background:#131923d4; backdrop-filter:blur(14px); box-shadow:0 8px 32px #0008; transform:scale(var(--demo-settings-scale)); transform-origin:top left; }
.demo-settings-panel:not(:has([data-demo-developer-settings]:not([hidden]))) { grid-template-columns:var(--demo-toolbar-width); width:88px; }
.demo-settings-toolbar-slot { width:var(--demo-toolbar-width); }
.demo-settings-toolbar-slot > .demo-toolbar { box-shadow:none; background:#13171c80; }
.demo-viewer[data-desktop-fullscreen="true"] .demo-phone-frame { width:calc(100% - 2 * (var(--demo-toolbar-width) * var(--demo-toolbar-scale) + 24px)); }
.demo-desktop-toolbar-slot { grid-area:3 / 1; position:relative; align-self:start; justify-self:start; z-index:11; left:var(--demo-dock-left,12px); top:var(--demo-dock-top,0px); width:calc(var(--demo-toolbar-width) * var(--demo-toolbar-scale)); height:calc(var(--demo-toolbar-height) * var(--demo-toolbar-scale)); min-width:0; min-height:0; }
.demo-desktop-toolbar-slot > .demo-toolbar { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(var(--demo-toolbar-scale)); transform-origin:center; }
.demo-viewer[data-desktop-fullscreen="true"] .demo-settings-panel { grid-template-columns:minmax(0,1fr); }
.demo-viewer[data-desktop-fullscreen="true"] .demo-settings-toolbar-slot { display:none; }
.demo-developer-settings { display:flex; flex-direction:column; gap:10px; min-width:0; }
.demo-connection-settings { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:0 12px 12px; min-width:0; font-size:12px; }
.demo-connection-settings label { display:flex; flex-wrap:wrap; align-items:center; gap:8px; max-width:100%; }
.demo-connection-settings select,.demo-connection-settings button { max-width:100%; padding:8px 10px; min-height:44px; border:1px solid #ffffff40; border-radius:9px; background:#202630; }
.demo-connection-settings :disabled { opacity:.5; }
.demo-connection-observation { display:flex; flex-wrap:wrap; gap:6px 18px; flex:1 1 260px; color:#b8bdc8; }
.demo-connection-settings p { flex-basis:100%; color:#ffb29b; margin:0; overflow-wrap:anywhere; }
.demo-route-evidence { flex-basis:100%; min-width:0; color:#b8bdc8; overflow-wrap:anywhere; }
.demo-route-evidence summary { cursor:pointer; padding-block:5px; }
@media (max-width:760px) {
  .hero-demo-layout { grid-template-columns:1fr; gap:30px; text-align:center; }
  .hero-demo-copy .hero-description { margin-inline:auto; }
  .hero-demo-copy .hero-cta { justify-content:center; }
  .hero-phone-demo .demo-phone-preview { width:194px; height:376px; }
  .hero-phone-demo .demo-preview-clock { margin-top:30px; font-size:60px; }
  .hero-phone-demo .demo-preview-apps span { width:31px; height:31px; }
  .phone-demo { position:fixed; inset:0; width:100%; max-width:none; height:100dvh; border:0; border-radius:0; box-shadow:none; }
  .phone-demo[open] { gap:20px; margin:0; }
  .demo-dialog-heading { padding-right:12px; }
  .demo-eyebrow { font-size:8px; padding:6px 8px; letter-spacing:.055em; margin-bottom:16px; }
  #demo-description { font-size:11px; line-height:1.65; }
  .demo-dialog-heading h2 { font-size:26px; }
  .demo-stage-row { --demo-toolbar-gap:16px; }
  .demo-viewer:is(:fullscreen,.is-fullscreen) .demo-stage-row { column-gap:0; }
  .demo-quality-route { gap:8px; }
  .demo-settings-panel .demo-quality-route { grid-template-columns:minmax(0,1fr); }
}
@media (max-height:700px) {
  .phone-demo { padding:20px 24px 16px; }
  .phone-demo[open] { gap:14px; }
  .demo-eyebrow { margin-bottom:8px; }
  .demo-dialog-heading h2 { font-size:24px; }
  #demo-description { font-size:10px; }
  .demo-lock-content { padding-top:4cqh; padding-inline:4cqw; }
  .demo-notification { padding:4cqw; margin-top:5cqw; border-radius:7cqw; }
  .demo-lock-bottom { bottom:14px; left:8px; right:8px; }
  .demo-lock-bottom > span { width:13cqw; height:13cqw; }
  .demo-lock-bottom .demo-icon { width:7cqw; height:7cqw; }
  .demo-lock-status { padding:8px 6px; }
  .demo-lock-telemetry { gap:3px; }
  .demo-lock-telemetry .demo-icon-cellular { width:6cqw; height:5cqw; }
  .demo-lock-battery { width:8cqw; height:4cqw; padding:.5px; }
  .demo-lock-battery::after { top:.5px; height:2px; }
  .demo-lock-camera { top:6px; width:8px; height:8px; left:calc(50% - 4px); border-width:2px; }
  .demo-padlock { width:10cqw; height:10cqw; margin-bottom:3px; }
  .demo-padlock .demo-icon { width:6cqw; height:6cqw; }
  .demo-lock-date { margin-top:4px; }
  .demo-notification-header { margin-bottom:4px; }
  .demo-notification-header b { width:7cqw; height:7cqw; margin-right:2px; }
  .demo-notification-header .demo-icon { width:4cqw; height:4cqw; }
}
@media (max-height:600px) and (min-width:600px) {
  .demo-close { right:10px; top:8px; width:32px; min-height:32px !important; }
}
/* Mobile uses an edge-to-edge overlay. Keep controls clear of the notch and
   home indicator, including after the compact-height rules above. */
@media (max-width:760px) {
  .phone-demo { padding:max(28px,calc(env(safe-area-inset-top,0px) + 12px)) max(20px,env(safe-area-inset-right,0px)) max(20px,calc(env(safe-area-inset-bottom,0px) + 12px)) max(20px,env(safe-area-inset-left,0px)); }
  .demo-close { top:calc(12px + env(safe-area-inset-top,0px)); right:max(12px,env(safe-area-inset-right,0px)); width:44px; min-height:44px !important; }
}

.demo-diagnostic-profiles { margin: 16px 0; padding: 14px; border: 1px solid #d1d5db; border-radius: 12px; font: 13px/1.5 system-ui, sans-serif; background: #fff; }
.demo-diagnostic-profiles[hidden], .demo-profile-confirmed[hidden] { display: none; }
.demo-diagnostic-profiles legend { font-weight: 650; padding: 0 5px; }
.demo-diagnostic-profiles label { display: block; padding: 5px 0; cursor: pointer; }
.demo-diagnostic-profiles input { accent-color: #282422; margin-right: 5px; }
.demo-diagnostic-profiles p { margin: 8px 0 0; color: #57534e; }
.demo-profile-confirmed { margin: 6px 0 0; font: 11px/1.4 system-ui, sans-serif; color: var(--demo-muted); overflow-wrap: anywhere; }

/* Route settings are also reachable in the regular desktop/mobile viewer. */
.demo-viewer[data-windowed-settings="true"] { --demo-toolbar-height:391px; }
.demo-windowed-settings-slot { display:grid; place-items:center; width:44px; height:44px; flex-shrink:0; }
.demo-viewer:not(:fullscreen):not(.is-fullscreen) .demo-settings-overlay { position:absolute; inset:0; }
.demo-viewer:not(:fullscreen):not(.is-fullscreen) .demo-settings-panel { grid-template-columns:minmax(0,1fr); }
.demo-viewer:not(:fullscreen):not(.is-fullscreen) .demo-settings-toolbar-slot { display:none; }