/* ── Variables ─────────────────────────────────── */
:root {
  --bg:               #faf9fc;
  --surface:          #fff;
  --dark:             #17151f;
  --accent:           #6d4aff;
  --accent-bg:        #f5f3fb;
  --accent-border:    #e4e1ee;
  --accent-hover:     #d8d2f0;
  --border:           #ececf3;
  --text:             #17151f;
  --muted:            #56546c;
  --subtle:           #8b889c;
  --faint:            #a3a0b3;
  --green:            #22c55e;
  --green-text:       #16a34a;
  --green-bg:         #eafaf0;
  --green-border:     #c9f0d8;
  --timeline:         #e7e3f3;
  --font-sans:        'Spline Sans', sans-serif;
  --font-display:     'Space Grotesk', sans-serif;
  --font-mono:        'JetBrains Mono', monospace;
}

/* ── Reset ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; font-family: var(--font-sans); color: var(--text); -webkit-font-smoothing: antialiased; }
::selection { background: var(--accent); color: #fff; }
a { text-decoration: none; color: inherit; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { display: block; }
button { font-family: inherit; cursor: pointer; }

/* ── Shared: availability badge ────────────────── */
.badge-avail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--green-text);
  background: var(--green-bg);
  border: 1px solid var(--green-border);
  border-radius: 999px;
  padding: 6px 13px;
}
.badge-avail__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px #d4f4e0;
  flex-shrink: 0;
}

/* ── Shared: section heading row ───────────────── */
.section-num {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent);
  font-weight: 500;
}
.section-title {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.section-rule { flex: 1; height: 1px; background: var(--border); }

/* ── Shared: tag pill ──────────────────────────── */
.tag {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--muted);
  background: var(--accent-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 9px;
}