/* Showcase: a drawn browser window with the owner app on a computer, and a phone beside it (hidden between 700 and 1099 px so it never covers the picture).
   The frames keep their own dark colours so the dark app pictures sit right in both site themes. */
.sc{margin-top:28px}
.sc-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 22px;padding:0}
.sc-tab{font:inherit;font-weight:600;font-size:.95rem;color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:999px;min-height:44px;padding:0 18px;cursor:pointer;transition:background-color .18s ease-out,border-color .18s ease-out,color .18s ease-out}
.sc-tab:hover{border-color:var(--muted)}
.sc-tab[aria-selected="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.sc-tab:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.sc:not(.js) .sc-tabs{display:none}
.sc:not(.js) .sc-panel+.sc-panel{margin-top:56px}
.sc-panel{margin:0}
.sc-panel[hidden]{display:none}
.sc-stage{display:flex;align-items:flex-end;gap:18px;max-width:1180px}
.sc-win{flex:1 1 0;min-width:0;border:1px solid #2a3c48;border-radius:12px;overflow:hidden;background:#0b141b;box-shadow:0 2px 4px rgba(7,14,20,.18),0 24px 48px -12px rgba(7,14,20,.42)}
.sc-bar{display:flex;align-items:center;gap:7px;padding:7px 14px;background:#16232c;border-bottom:1px solid #263844}
.sc-bar i{width:11px;height:11px;border-radius:50%;background:#3b4e5b;flex:none}
.sc-url{flex:0 1 320px;margin:0 auto;transform:translateX(-24px);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;font-family:var(--mono);font-size:.78rem;line-height:24px;color:#9bacb6;background:#0e1a22;border-radius:6px;padding:0 14px}
.sc-win img{display:block;width:100%;height:auto;aspect-ratio:2000/1719}
.sc-phone{flex:none;width:210px;border:6px solid #2f4352;outline:1px solid #4a6578;border-radius:28px;overflow:hidden;background:#0b141b;box-shadow:0 2px 6px rgba(7,14,20,.25),0 22px 40px -8px rgba(7,14,20,.55)}
.sc-phone img{display:block;width:100%;height:auto;aspect-ratio:780/1688}
.sc-panel figcaption{margin-top:6px;max-width:62ch;color:var(--muted);font-size:.95rem;line-height:1.45}
@media(max-width:1099px){.sc-phone{display:none}}
.sc-note{margin:14px 0 0;max-width:62ch;color:var(--muted);font-size:.9rem;line-height:1.45}
@media(max-width:699px){
  .sc-stage{display:flex;align-items:flex-end;gap:18px;max-width:1180px}
  .sc-win{display:none}
  .sc-phone{display:block;width:100%;border-radius:30px}
  .sc-panel figcaption{margin-top:14px}
  .sc:not(.js) .sc-panel+.sc-panel{margin-top:36px}
}
@media(prefers-reduced-motion:reduce){.sc-tab{transition:none}}