.foot { border-top: 1px solid rgba(10, 10, 10, .07); }

.foot-inner { padding-top: 56px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 40px; }

.foot-top { display: flex; gap: 48px; flex-wrap: wrap; justify-content: space-between; }

.foot-brand { display: flex; flex-direction: column; gap: 14px; max-width: 280px; }
.foot-brand p { font: 400 14px/1.6 var(--sans); color: var(--muted); }

.foot-cols { display: flex; gap: 64px; flex-wrap: wrap; }
.foot-cols div { display: flex; flex-direction: column; gap: 12px; }
.foot-cols h2 { font: 600 13px/1.4 var(--sans); color: var(--title); }
.foot-cols a { min-height: 24px; display: flex; align-items: center; font: 400 14px/1.4 var(--sans); color: var(--muted); }
.foot-cols a:hover, .foot-bottom a:hover { color: var(--title); }

.foot-bottom { padding-top: 24px; border-top: 1px solid rgba(10, 10, 10, .07); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font: 400 13px/1.5 var(--sans); color: var(--muted); }
.foot-bottom a { color: var(--muted); }

.modal { width: calc(100% - 32px); max-width: 460px; max-height: 90vh; border: 0; border-radius: 24px; background: var(--surface); padding: 28px; color: var(--text); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .4); }
.modal[open] { display: flex; flex-direction: column; gap: 14px; }
.modal::backdrop { background: rgba(10, 10, 10, .5); }
.modal h2 { font: 700 24px/1.2 var(--sans); letter-spacing: -.5px; color: var(--title); }
.modal p { font: 400 16px/1.6 var(--sans); color: var(--text-2); }
.modal .btn { width: 100%; height: 48px; font-size: 15px; }
.modal form .btn { border-color: transparent; background: transparent; color: var(--text-2); }
.modal form .btn:hover { background: rgba(10, 10, 10, .05); }

.legal { max-width: 760px; padding-top: 72px; padding-bottom: 96px; display: flex; flex-direction: column; gap: 20px; }
.legal h2 { margin-top: 20px; font: 600 22px/1.3 var(--sans); letter-spacing: -.4px; color: var(--title); }
.legal p, .legal li { font: 400 16px/1.7 var(--sans); color: var(--text-2); }
.legal ul { padding-left: 20px; }