/* axismedlytics.com: the home page and the expired-link page ("Pulse",
   docs/planning/landing-mock.html option 3). Always dark: it is the
   dashboard's own background, with one heartbeat drawn across it on load. */

@font-face { font-family: Inter; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/fonts/inter-latin-400-700.woff2) format("woff2"); }
@font-face { font-family: Sora; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/fonts/sora-latin-600.woff2) format("woff2"); }

:root { color-scheme: dark; }
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  color: #f3f5fb; font: 13px/1.5 Inter, system-ui, sans-serif;
  background:
    radial-gradient(900px 600px at 12% 0%, #0d1a3a, transparent 70%),
    radial-gradient(900px 600px at 100% 100%, #1a0f3a, transparent 70%),
    #050814;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto 1fr auto;
}

.trace {
  grid-row: 2; display: flex; align-items: center; height: 120px;
  filter: drop-shadow(0 0 4px rgba(31, 217, 255, .7));
  animation: draw 1.8s cubic-bezier(.6, 0, .3, 1) .2s both;
}
.trace i { flex: 1; min-width: 24px; height: 2px; background: #1fd9ff; }
.trace i:first-child { background: linear-gradient(90deg, transparent, #1fd9ff 30%); }
.trace i:last-child { background: linear-gradient(90deg, #1fd9ff 70%, transparent); }
.trace svg { flex: none; width: min(320px, 72vw); height: 120px; overflow: visible; }
@keyframes draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

.below {
  grid-row: 3; display: flex; flex-direction: column; align-items: center; gap: 26px;
  margin-top: 34px; padding: 0 16px; text-align: center;
  animation: fade .8s ease 1.4s both;
}
@keyframes fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .trace, .below { animation: none; } }

/* The dashboard's logo lockup, as in its sidebar. */
.logo { display: flex; align-items: center; gap: 12px; text-align: left; }
a.logo { color: inherit; text-decoration: none; }
.logo img { width: 36px; height: 36px; filter: brightness(1.85) saturate(.92); }
.logo b { display: block; font: 600 25px/1 Sora, system-ui, sans-serif; letter-spacing: .08em; }
.logo span { display: block; margin-top: 5px; font: 600 9.5px/1 Sora, system-ui, sans-serif; letter-spacing: .34em; color: #9aa4ba; }
.note { margin: 0; color: #b9c1d4; }

footer { grid-row: 4; padding: 0 16px 28px; text-align: center; color: #7f89a1; font-size: 12px; }
a { color: #b9c1d4; text-underline-offset: 3px; text-decoration-color: rgba(185, 193, 212, .35); }
a:hover { color: #f3f5fb; }