@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
@import url('tokens.css');
@import url('ui-kit.css');

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: var(--ds-brand-text); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: 960px; margin: 0 auto; padding: 48px var(--ds-space-4) 32px; }

.top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--ds-space-6); }
.top .ds-mono { color: var(--ds-text-muted); font-size: 13px; }

.bento { display: grid; gap: var(--ds-space-3); grid-template-columns: repeat(6, 1fr); }
.span-6 { grid-column: span 6; } .span-4 { grid-column: span 4; }
.span-3 { grid-column: span 3; } .span-2 { grid-column: span 2; }
@media (max-width: 720px) { .span-4, .span-3, .span-2 { grid-column: span 6; } }

.hero { padding: var(--ds-space-6); }
.hero h1 { margin: 0 0 var(--ds-space-2); font-size: 32px; font-weight: 600; letter-spacing: -0.02em; }
.hero p { margin: 0 0 var(--ds-space-6); color: var(--ds-text-muted); max-width: 56ch; }
.actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); }
.actions a.ds-btn { display: inline-block; text-decoration: none; }
.actions a.ds-btn--primary { color: var(--ds-brand-fg); }
.actions a.ds-btn--ghost { color: var(--ds-text); }

.ds-card h2 { margin: 0 0 var(--ds-space-3); font-size: 13px; font-weight: 500; color: var(--ds-text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.ds-card h3 { margin: 0 0 var(--ds-space-1); font-size: 16px; font-weight: 500; }
.ds-card p { margin: 0; color: var(--ds-text-muted); font-size: 14px; }

.list { margin: 0 calc(-1 * var(--ds-space-4)) calc(-1 * var(--ds-space-4)); }
.list .ds-row { font-size: 14px; }
.list .ds-row span:last-child { color: var(--ds-text-muted); font-size: 13px; }

footer { margin-top: var(--ds-space-6); color: var(--ds-text-faint); font-size: 12px; display: flex; justify-content: space-between; }