/* biomedrx.app -- app screenshots + illustrated prose. Generated by
   _PROGRAM/build_biomedrx_app_site.py. Do not hand-edit. */

/* Halftone blue-sky background. The scrim is not decoration: the halftone is
   dense enough that body text over it fails contrast, so a white veil sits
   between the image and the content. Lower the alpha and legibility goes with
   it. background-attachment:fixed gives the sky slight parallax against the
   page; it is dropped on touch where fixed backgrounds cause repaint jank. */
body{
  background-image:linear-gradient(rgba(255,255,255,.80),rgba(255,255,255,.80)),
                   url("/assets/images/halftone-blue-sky-white-clouds-background.webp");
  background-size:auto, cover;
  background-position:center, center top;
  background-attachment:scroll, fixed;
  background-repeat:no-repeat, no-repeat;
}
@media (hover:none){body{background-attachment:scroll,scroll}}
.brand-mark{width:30px;height:30px;display:inline-block;vertical-align:middle;
  margin-right:9px;border-radius:6px}
.appshots{display:grid;grid-template-columns:repeat(5,1fr);gap:22px}
.appshot{margin:0}
.appshot img{width:100%;height:auto;display:block;border-radius:18px;
  border:1px solid var(--line);box-shadow:var(--shadow);background:#fff}
.appshot figcaption{margin-top:10px;font-size:13px;font-weight:600;
  color:var(--muted);text-align:center}
.prose-illus{display:grid;grid-template-columns:1.35fr .65fr;gap:40px;align-items:start}
.prose-illus>div{max-width:760px}
.prose-art{margin:0}
.prose-art img{width:100%;height:auto;display:block;border-radius:18px;
  border:1px solid var(--line);box-shadow:var(--shadow)}
@media(max-width:980px){.appshots{grid-template-columns:repeat(3,1fr)}
  .prose-illus{grid-template-columns:1fr}
  .prose-art{max-width:520px}}
@media(max-width:620px){.appshots{grid-template-columns:repeat(2,1fr);gap:16px}}
.caps{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.cap{background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);
  padding:28px 28px 24px}
.cap-head{display:flex;justify-content:space-between;align-items:baseline;
  gap:14px;flex-wrap:wrap;margin-bottom:12px}
.cap-head h3{margin:0;font-size:21px;letter-spacing:-.01em}
.cap-tag{font-size:11.5px;letter-spacing:1.4px;text-transform:uppercase;
  font-weight:700;color:var(--brand);background:rgba(29,78,216,.08);
  border:1px solid rgba(29,78,216,.25);border-radius:999px;padding:5px 11px;
  white-space:nowrap}
.cap-lead{margin:0 0 18px;color:var(--muted);font-size:15px}
.cap-list{margin:0;display:grid;gap:14px}
.cap-list>div{border-top:1px solid var(--line);padding-top:14px}
.cap-list dt{font-weight:700;font-size:15px;margin:0 0 4px}
.cap-list dd{margin:0;color:var(--muted);font-size:14.5px}
@media(max-width:880px){.caps{grid-template-columns:1fr}}