/* Type scale, buttons, sticky header, section rhythm. */

/* Geist type scale */
.h-72 { font-size: clamp(40px, 6.4vw, 72px); line-height: 1; letter-spacing: -0.06em; font-weight: 600; }
.h-40 { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.2; letter-spacing: -0.06em; font-weight: 600; }
.h-24 { font-size: 24px; line-height: 32px; letter-spacing: -0.04em; font-weight: 600; }
.h-20 { font-size: 20px; line-height: 26px; letter-spacing: -0.02em; font-weight: 600; }
.h-16 { font-size: 16px; line-height: 24px; letter-spacing: -0.02em; font-weight: 600; }
.copy-18 { font-size: 18px; line-height: 28px; }
.copy-14 { font-size: 14px; line-height: 20px; }
.muted { color: var(--gray-900); }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { text-wrap: balance; }
p, li, dd, summary, td, th { text-wrap: pretty; }

.wrap { max-width: 1120px; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (min-width: 720px) { .wrap { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); } }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); height: 40px; padding: 0 var(--s4);
  border-radius: var(--r-full); border: 1px solid var(--border-strong); background: transparent; color: var(--gray-1000);
  font: 500 14px/20px var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.btn:hover { background: var(--gray-100); border-color: rgba(255,255,255,.24); }
.btn.lg { height: 48px; padding: 0 var(--s6); font-size: 16px; }
.btn.sm { height: 32px; padding: 0 var(--s3); font-size: 14px; }
.btn.brand { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.brand:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn[disabled] { opacity: .5; cursor: progress; }
.link { color: var(--gray-1000); text-decoration: underline; text-decoration-color: var(--gray-700); text-underline-offset: 3px; }
.link:hover { text-decoration-color: var(--gray-1000); }

/* header */
.hdr { position: sticky; top: 0; z-index: 20; background: rgba(10,10,10,.8);
  -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.hdr.scrolled { border-bottom-color: var(--border); }
.hdr .wrap { height: var(--header-h); display: flex; align-items: center; gap: var(--s6); }
.logo { display: inline-flex; align-items: center; gap: var(--s2); text-decoration: none; font-weight: 600; letter-spacing: -0.02em; }
.logo svg { width: 24px; height: 24px; color: var(--brand); }
.logo { white-space: nowrap; }
.logo span { color: var(--gray-900); font-weight: 400; }
@media (max-width: 480px) { .logo span { display: none; } }
.nav { display: none; gap: var(--s6); margin-right: auto; }
.nav a { color: var(--gray-900); text-decoration: none; font-size: 14px; }
.nav a:hover { color: var(--gray-1000); }
.hdr .btn { margin-left: auto; }
@media (min-width: 760px) { .nav { display: flex; } .hdr .btn { margin-left: 0; } }

/* sections */
section { padding-block: var(--s16); border-top: 1px solid var(--border); }
@media (min-width: 900px) { section { padding-block: var(--s24); } }
.sh { max-width: 640px; }
.sh p { margin-top: var(--s3); }