/* ---------- The "come back on a laptop" notice ----------
   The homepage reads perfectly well on a phone and is left alone. The preview
   is the real system — a sidebar, a wide table and a form beside it — so below
   the width where that is legible we stop the visitor and tell them why,
   rather than handing them a pinching-and-scrolling exercise that would teach
   them nothing about the product. Shared by index.html and demo.html; both
   stylesheets define the same custom properties, so this file needs neither. */

.screen-gate{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;
  padding:22px;background:rgba(10,22,40,.74);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.screen-gate[hidden]{display:none}
/* on demo.html there is a half-drawn app behind it, which should not show through */
.screen-gate.solid{background:var(--navy);-webkit-backdrop-filter:none;backdrop-filter:none}
html.gate-open,html.gate-open body{overflow:hidden}

.screen-gate-card{width:100%;max-width:430px;background:#fff;border-radius:18px;padding:30px 26px 26px;
  text-align:center;box-shadow:0 24px 60px rgba(5,12,26,.42)}
.screen-gate-mark{width:54px;height:54px;margin:0 auto 18px;border-radius:15px;background:var(--brand-tint);
  color:var(--brand);display:flex;align-items:center;justify-content:center}
.screen-gate-mark svg{width:27px;height:27px;display:block}
.screen-gate-card h2{font-size:22px;line-height:1.3;letter-spacing:-.02em;color:var(--ink);font-weight:750}
.screen-gate-card p{margin-top:12px;color:var(--ink2);font-size:15px;line-height:1.6}
.screen-gate-url{margin-top:18px;padding:12px 14px;background:var(--bg2,#f6f8fb);border:1px solid var(--line);
  border-radius:11px;font-size:14px;font-weight:650;color:var(--ink);word-break:break-all;line-height:1.45}
.screen-gate-btns{display:flex;gap:10px;margin-top:18px}
.screen-gate-btns>*{flex:1;justify-content:center;text-align:center;cursor:pointer;font-family:inherit;
  display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;color:var(--ink);
  padding:13px 18px;border-radius:11px;font-size:15px;font-weight:650;transition:background .12s,border-color .12s}
.screen-gate-btns>.gate-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.screen-gate-btns>.gate-primary:hover{background:var(--brand-dark)}
@media(max-width:460px){.screen-gate-btns{flex-direction:column}}