/* site.css — the PUBLIC pages of radvector.ai (about, pricing, radiology
   reporting, integrations).

   Layered on portal.css rather than replacing it: this file imports it and
   then adds classes, all prefixed `site-`. It redefines nothing, so the
   sign-in and dashboard surfaces keep whatever portal.css says even while
   that file is being changed by someone else. Every color comes from the
   variables portal.css declares for both light and dark, so no text here
   can become invisible on a dark system theme. */
@import url("/portal/static/portal.css");

/* ---------------------------------------------------------------- shell */
.site-brand-link { color: var(--text); text-decoration: none; }
.site-nav a { margin-left: 16px; text-decoration: none; color: var(--text-muted); font-size: .92rem; }
.site-nav a:hover { color: var(--text); }
.site-nav a.site-here { color: var(--text); font-weight: 600; }
.site-nav a.site-cta { color: var(--accent); font-weight: 600; }
@media (max-width: 640px) { .site-nav a { margin: 0 14px 0 0; display: inline-block; line-height: 2; } }

.site-eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 700; color: var(--accent); margin: 0 0 8px; }
.site-lede { font-size: 1.05rem; color: var(--text-muted); max-width: 720px; }
.site-section { margin-top: 34px; }
.site-section > h2 { font-size: 1.4rem; margin: 0 0 6px; }
.site-section > p { color: var(--text-muted); max-width: 760px; }
.site-prose { max-width: 760px; }
.site-prose p { color: var(--text-muted); }
.site-prose h3 { margin: 22px 0 6px; font-size: 1.02rem; color: var(--text); }
.site-rule { border: 0; border-top: 1px solid var(--border); margin: 34px 0 0; }

/* ------------------------------------------------------------- building */
/* 220px lets a four-card row fit the 1040px shell without leaving an
   orphan on a second line; three cards still share the row equally. */
.site-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 16px; }
.site-card-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.site-kicker { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 700; }
.site-num { font-size: 1.8rem; font-weight: 700; line-height: 1.1; }
.site-note { font-size: .84rem; color: var(--text-muted); }
.site-tight { margin: 8px 0 0 18px; padding: 0; max-width: 740px; color: var(--text-muted); font-size: .92rem; }
.site-tight li { margin: 6px 0; }
.site-check { list-style: none; margin: 10px 0 0; padding: 0; max-width: 760px; color: var(--text-muted); font-size: .92rem; }
.site-check li { margin: 7px 0; padding-left: 22px; position: relative; }
.site-check li::before { content: "→"; position: absolute; left: 0; color: var(--accent); }

.site-listing { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-top: 1px solid var(--border); }
.site-listing:first-of-type { border-top: 0; }
.site-listing-body { flex: 1 1 auto; min-width: 0; max-width: 760px; }
.site-listing-body h3 { margin: 0 0 4px; font-size: 1.02rem; }
.site-mark { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; background: var(--bg-soft);
  border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .82rem; color: var(--text-muted); }

.site-cta-band { margin-top: 34px; padding: 22px; border-radius: 12px; background: var(--bg-soft); border: 1px solid var(--border); }
.site-cta-band h2 { margin: 0 0 6px; font-size: 1.2rem; }
.site-cta-band p { margin: 0 0 14px; color: var(--text-muted); }

.site-foot { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: .84rem; }
.site-foot-links a { margin-right: 14px; text-decoration: none; }
.site-foot-legal { margin-top: 10px; font-size: .8rem; }

/* A heading inside a .site-section that is not the section's own <h2>. The
   landing page groups four audience cards under one, so it needs to read as
   a sub-heading rather than compete with the section title. */
.site-subhead { margin: 28px 0 0; font-size: 1.05rem; }