:root { color-scheme: light; font: 16px/1.5 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --canvas: #f7f7f5; --surface: #fff; --text: #272727; --muted: #767671; --strong: #262626; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--canvas); color: var(--text); }
a { color: inherit; }
.public-shell { width: min(100% - 2rem, 700px); min-height: 100vh; margin: 0 auto; padding: 2.25rem 0 1.5rem; display: flex; flex-direction: column; }
.public-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.brand { font-size: 1.15rem; font-weight: 650; letter-spacing: -.03em; text-decoration: none; }
.public-nav { display: flex; flex-wrap: wrap; gap: .85rem; color: var(--muted); font-size: .82rem; }
.public-nav a { text-decoration: none; }
.public-nav a:hover, .public-nav a:focus-visible { color: var(--text); }
.public-main { flex: 1; display: grid; align-content: center; justify-items: center; padding: 4rem 0; text-align: center; }
.public-main h1 { max-width: 11ch; margin: 0; font-size: clamp(2rem, 8vw, 3.1rem); line-height: 1.05; letter-spacing: -.06em; }
.lede { margin: 1.25rem 0 0; color: var(--muted); font-size: 1rem; }
.button { display: inline-block; margin-top: 1.35rem; padding: .72rem 1.08rem; border: 1px solid var(--strong); border-radius: 8px; background: var(--strong); color: #fff; font-size: .88rem; font-weight: 600; letter-spacing: -.01em; text-decoration: none; box-shadow: 0 .2rem .45rem rgba(20, 20, 18, .14); }
.button:hover, .button:focus-visible { background: #3a3a3a; }
.terms-modal { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center; padding: 1rem; background: rgba(39, 39, 39, .18); }
.terms-modal[hidden] { display: none; }
.terms-panel { width: min(100%, 420px); padding: 1.25rem; border: 1px solid var(--strong); border-radius: 10px; background: var(--surface); box-shadow: 0 .5rem 1.5rem rgba(20, 20, 18, .14); text-align: left; }
.terms-panel h2 { margin: 0 0 .45rem; font-size: 1.05rem; letter-spacing: -.025em; }
.terms-panel p { margin: 0 0 1rem; color: var(--muted); font-size: .84rem; }
.terms-check { display: flex; align-items: flex-start; gap: .55rem; margin: 1rem 0; font-size: .84rem; }
.terms-check input { width: auto; flex: 0 0 auto; margin-top: .22rem; }
.terms-check a { color: var(--text); }
.terms-actions { display: flex; justify-content: flex-end; gap: .5rem; }
.terms-actions .button { margin-top: 0; }
.button:disabled { cursor: not-allowed; opacity: .45; box-shadow: none; }
.subtle { margin: 1rem 0 2rem; color: var(--muted); font-size: .85rem; }
.count { margin: 3.5rem 0 0; color: var(--muted); font-size: .78rem; }
.public-footer { display: flex; justify-content: center; gap: 1rem; color: var(--muted); font-size: .78rem; }
.public-footer a { text-decoration: none; }
.page-main { max-width: 560px; margin: 4rem auto; }
.page-main h1 { margin-bottom: .75rem; font-size: 1.6rem; letter-spacing: -.04em; }
.page-main p { color: var(--muted); }
@media (max-width: 580px) { .public-shell { width: min(100% - 1rem, 700px); padding-top: 1rem; } .public-header { align-items: flex-start; } .public-nav { gap: .55rem; justify-content: flex-end; } .public-main { padding: 3rem 0; } .page-main { margin: 3rem 0; } }