/* The landing page: one calm column with the sign-in and sign-up entry points. */
.topbar .brandlink{display:flex;align-items:center;gap:10px;color:var(--ink)} .topbar .brandlink:hover{text-decoration:none}
.hero{max-width:880px;margin:0 auto;padding:76px 24px 36px}
.hero h1{font-size:42px;font-weight:700;letter-spacing:-.02em;line-height:1.08;max-width:620px}
.hero .lead{color:var(--sub);font-size:17px;line-height:1.6;max-width:560px;margin-top:16px}
.hero .cta{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap;align-items:center}
.hero .cta .who{font-size:13px;color:var(--sub);margin-left:6px}
.feats{max-width:880px;margin:0 auto;padding:16px 24px 40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.feat{border:1px solid var(--line);border-radius:5px;padding:18px;background:var(--bg);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(16,24,40,.05)}
.feat svg{color:var(--sub);margin-bottom:10px}
.feat b{display:block;font-weight:650;margin-bottom:4px}
.feat p{color:var(--sub);font-size:13px;line-height:1.55}
.foot{max-width:880px;margin:0 auto;padding:8px 24px 70px;color:var(--sub);font-size:13px}
@media (max-width:560px){.hero{padding:44px 16px 24px} .hero h1{font-size:32px} .feats,.foot{padding-left:16px;padding-right:16px}}