:root { --brand: #4F46E5; --brand2: #0EA5E9; }
html { scroll-behavior: smooth; }
body { font-family: "Inter", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif; color: #1e293b; }
h1, h2, h3, .display { font-family: "Sora", ui-sans-serif, system-ui, sans-serif; }
/* The header is injected into this wrapper. A sticky bar can only stick inside its parent, and the wrapper is
   exactly as tall as the header, so the menu bar used to scroll away as soon as the top bar had gone. With
   the wrapper not forming a box, the bar sticks within the whole page. */
#site-header { display: contents; }

.navlink { padding: .5rem .75rem; border-radius: .5rem; font-size: .875rem; font-weight: 600; color: #475569; white-space: nowrap; }
.navlink:hover { background: #f1f5f9; color: #0f172a; }
.navlink-active { color: var(--brand); }

.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; font-weight: 700; color: var(--brand); }
.btn-brand { background: var(--brand); color: #fff; }
.btn-brand:hover { filter: brightness(.94); }

.page-hero { background: linear-gradient(135deg, var(--brand), var(--brand2)); }
.hero-home { background-size: cover; background-position: center; }
.hero-home.no-img { background: linear-gradient(135deg, var(--brand), var(--brand2)); }

.card { background: #fff; border: 1px solid #e2e8f0; border-radius: 1rem; transition: transform .2s, box-shadow .2s; }
.card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -20px rgba(15,23,42,.25); }
.chip-icon { width: 3rem; height: 3rem; border-radius: .9rem; display: grid; place-items: center; color: #fff; background: var(--brand); font-size: 1.15rem; }

.prose-site :is(h2,h3){ font-weight:700; margin:.6em 0 .35em; color:#0f172a; }
.prose-site p{ margin:.6em 0; line-height:1.8; color:#475569; }
.prose-site ul{ list-style:disc; margin:.5em 0 .5em 1.2em; color:#475569; }
.prose-site a{ color: var(--brand); text-decoration: underline; }
.prose-site img{ max-width:100%; height:auto; border-radius:.6rem; margin:.9rem 0; }

.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

.section { max-width: 72rem; margin: 0 auto; padding: 4.5rem 1rem; }
@media (max-width: 640px){ .section { padding: 3rem 1rem; } }