#demo{scroll-margin-top:115px}
/* All page rules are confined to the additional demo section. */
.working-demo[hidden],.working-demo [hidden]{display:none!important}
.working-demo{padding:76px 0;background:radial-gradient(ellipse at 50% 65%,#263b55 0,#102137 48%,#0a1726 100%);color:#f4f6fa}
.working-demo .working-demo-heading{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:end;margin-bottom:32px}
.working-demo .working-demo-kicker{color:#f5c542;font-size:12px;font-weight:750;letter-spacing:1.8px;text-transform:uppercase;margin:0 0 14px}
.working-demo h2{font-size:clamp(30px,3vw,40px);line-height:1.15;letter-spacing:-1px;margin:0}
.working-demo .working-demo-description{font-size:16px;line-height:1.75;color:#d1dae5;margin:0}
.working-demo .working-demo-description strong{font-weight:700;color:#fff}
.working-demo .working-demo-start{position:relative;overflow:hidden;min-height:350px;padding:42px;border:1px solid #8492a15c;border-radius:26px;display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;background:linear-gradient(115deg,#172c44,#102137);box-shadow:0 24px 55px #0003}
.working-demo .working-demo-start h3{font-size:26px;letter-spacing:-.6px;line-height:1.3;margin:0 0 14px;color:#fff}
.working-demo .working-demo-start p{color:#cdd7e2;font-size:14px;line-height:1.7;margin:12px 0 20px}
.working-demo .working-demo-start .btn{border:0;cursor:pointer;font:inherit;font-size:14px;font-weight:750;min-height:48px}
.working-demo .working-demo-start .btn:focus-visible{outline:3px solid #fff;outline-offset:4px}
.working-demo .working-demo-start .btn:disabled{opacity:.65;cursor:wait}
.working-demo .working-demo-start .working-demo-status{min-height:1.5em;font-size:13px;margin:14px 0 0;color:#f5d575}
.working-demo .working-demo-sample{padding:28px;border:8px solid #242b36;border-radius:20px;background:#f4f7fa;color:#172033;box-shadow:0 15px 35px #0005;transform:rotate(-3deg)}
.working-demo .working-demo-sample small{color:#67758a;text-transform:uppercase;font-size:10px;font-weight:700;letter-spacing:1.2px}
.working-demo .working-demo-sample strong{display:block;font-size:29px;letter-spacing:-1px;margin:12px 0;color:#10233f}
.working-demo .working-demo-sample p{color:#617086;font-size:12px;margin:0 0 22px}
.working-demo .working-demo-sample span{display:block;padding:12px 0;border-top:1px solid #d9e1ea;font-size:13px;font-weight:650}
@media(max-width:850px){.working-demo{padding:50px 0}.working-demo>.wrap{width:calc(100% - 36px)}.working-demo .working-demo-heading{grid-template-columns:1fr;gap:18px}.working-demo .working-demo-start{padding:26px;gap:22px;grid-template-columns:1.1fr 1fr}.working-demo .working-demo-sample{padding:20px}.working-demo .working-demo-sample strong{font-size:24px}.working-demo h2{font-size:32px}}
@media(max-width:739px){.working-demo{display:none!important}}
@media(prefers-reduced-motion:reduce){.working-demo .working-demo-sample{transform:none}}

/* A top-layer overlay keeps the homepage in place behind the demo iPad. */
.demo-preview-dialog{--demo-height:min(1200px,calc(100dvh - 24px),calc((100vw - 62px) * 4 / 3 + 174px));width:calc((var(--demo-height) - 174px) * 3 / 4 + 26px);max-width:calc(100vw - 24px);height:var(--demo-height);max-height:calc(100dvh - 24px);margin:auto;padding:12px;border:1px solid #71809670;border-radius:22px;background:linear-gradient(145deg,#172b42,#0a1726);color:#f4f6fa;box-shadow:0 25px 90px #0009;overflow:hidden;overscroll-behavior:none}
.demo-preview-dialog[open]{display:grid;grid-template-rows:auto minmax(0,1fr);gap:10px}
.demo-preview-dialog::backdrop{background:#030a13cc;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.demo-preview-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:44px}
.demo-preview-toolbar h2{font-size:16px;line-height:1.3;margin:0;color:#fff;letter-spacing:0}
.demo-preview-toolbar button{min-height:44px;flex-shrink:0;padding:9px 15px;border:1px solid #93a2b680;border-radius:10px;background:#ffffff0b;color:#fff;font:inherit;font-size:14px;font-weight:650;cursor:pointer}
.demo-preview-toolbar button:focus-visible{outline:3px solid #f5c542;outline-offset:3px}
.demo-preview-mount{min-height:0}
@media(max-width:850px){.demo-preview-dialog{padding:12px;border-radius:18px}}

/* A restrained glass surface and round close control keep the device in focus. */
.demo-preview-dialog{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif;border-color:#ffffff22;border-radius:30px;background:linear-gradient(155deg,#25344af5,#142236f5 55%,#101c2ff5);-webkit-backdrop-filter:blur(24px) saturate(1.25);backdrop-filter:blur(24px) saturate(1.25);box-shadow:0 28px 85px #0008,inset 0 1px #ffffff0b}
.demo-preview-dialog::backdrop{background:#030a139e;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.demo-preview-toolbar{padding-inline:3px;gap:12px}
.demo-preview-toolbar h2{font:inherit;font-size:14px;line-height:1.3;font-weight:650;letter-spacing:.05px;color:#e4ebf5}
.demo-preview-toolbar #closeWorkingDemo{display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;border:1px solid #ffffff12;border-radius:50%;background:#ffffff0d;color:#c9d3e0;font-weight:400;box-shadow:inset 0 1px #ffffff08;cursor:pointer}
.demo-preview-toolbar #closeWorkingDemo:hover{background:#ffffff18;color:#fff}
.demo-preview-toolbar #closeWorkingDemo:focus-visible{outline:2px solid #b8d4f5;outline-offset:3px}

.demo-preview-toolbar{position:relative;display:grid;place-items:center;min-height:44px;padding-inline:52px;text-align:center}
.demo-preview-toolbar .demo-preview-caption p{margin:0 0 3px;color:#aebdce;font-size:10px;line-height:12px;font-weight:550;letter-spacing:.15px}
.demo-preview-toolbar .demo-preview-caption h2{margin:0;font-size:14px;line-height:18px;font-weight:650;letter-spacing:-.1px}
.demo-preview-toolbar #closeWorkingDemo{position:absolute;right:3px;top:0}

/* Emphasize that visitors can use the demo immediately. */
.working-demo .working-demo-kicker{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.working-demo .working-demo-live-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border:1px solid #f5c54266;border-radius:999px;background:#f5c54214;color:#ffda79;font-size:12px;line-height:1.2;letter-spacing:1.2px;font-weight:800}
.working-demo .working-demo-live-dot{width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:#ffcf60;box-shadow:0 0 0 3px #ffcf6015}

/* Give the personal demo request its own quiet, readable place below the preview. */
.working-demo .working-demo-invitation{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-top:36px;padding-top:28px;border-top:1px solid #d3b77538;text-align:left}
.working-demo .working-demo-invitation-copy{flex:1;min-width:0}
.working-demo .working-demo-invitation h3{margin:0 0 7px;color:#f1f4f9;font-size:19px;line-height:1.35;letter-spacing:-.25px;font-weight:650}
.working-demo .working-demo-invitation p{margin:0;color:#bcc9d9;font-size:15px;line-height:1.65}
.working-demo .working-demo-invitation-link{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;flex-shrink:0;padding:13px 18px;border:1px solid #d7b67570;border-radius:12px;background:transparent;color:#f0cd88;font-size:14px;font-weight:650;line-height:1.4;text-decoration:none;white-space:nowrap}
.working-demo .working-demo-invitation-link:hover{background:#f5c5420a;border-color:#e8c680b3}
.working-demo .working-demo-invitation-link:focus-visible{outline:2px solid #f5d575;outline-offset:4px}
@media(max-width:900px){.working-demo .working-demo-invitation{align-items:flex-start;flex-direction:column;gap:18px;margin-top:28px;padding-top:24px}.working-demo .working-demo-invitation-link{white-space:normal;text-align:center;max-width:100%}}