/* Shared layout shell for Dray Insight landing showcase */
@import url('colors_and_type.css');

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-primary);
  font-feature-settings: "cv11", "ss01", "ss03";
  color: var(--text);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; padding: 0; color: inherit; }
a { color: inherit; text-decoration: none; }

/* Tabular numbers for data */
.tnum { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Showcase nav (top floating) */
.showcase-nav {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background: rgba(22, 22, 24, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  padding: 4px;
  display: flex;
  gap: 2px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}
.showcase-nav a {
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.62);
  padding: 7px 14px;
  border-radius: 999px;
  letter-spacing: -0.005em;
  transition: color .15s, background .15s;
  white-space: nowrap;
}
.showcase-nav a:hover { color: #fff; }
.showcase-nav a.active {
  background: #fff;
  color: #0a0a0b;
}
.showcase-nav .sep {
  width: 1px;
  background: rgba(255,255,255,0.1);
  margin: 6px 6px;
}