*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, sans-serif; line-height: 1.7; color: #1a1a1a; background: #fff; -webkit-font-smoothing: antialiased; }
.container { max-width: 820px; margin: 0 auto; padding: 0 2rem; }

header { background: #000; padding: 1.5rem 0; }
.site-logo { display: block; text-decoration: none; }
.site-logo img { height: 2rem; width: auto; filter: invert(1); }
.hero { padding: 3rem 0 3rem; text-align: left; background: #000; color: #fff; }
.hero h2 { font-size: 2.75rem; margin-bottom: 1.25rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.hero p { font-size: 1.2rem; color: #8a919a; line-height: 1.7; }

section { padding: 2rem 0; }
#idea { border-bottom: 1px solid #eee; }
section h2 { font-size: 1.375rem; margin-bottom: 0.75rem; text-align: left; font-weight: 600; letter-spacing: -0.01em; }
.lead { font-size: 1.0625rem; color: #444; max-width: 700px; margin-bottom: 1rem; line-height: 1.85; }
section h3 { margin-top: 2.5rem; margin-bottom: 0.5rem; font-size: 1.125rem; font-weight: 600; }
section h3:first-of-type { margin-top: 0; }
#principles { border-top: 1px solid #eee; }
#principles h3 { color: #000; }
section p { margin-bottom: 1rem; }

#status { text-align: center; padding: 2rem 0; background: #fafafa; }
#status .lead { margin-left: auto; margin-right: auto; color: #1a1a1a; }

.signup-form { display: flex; gap: 0.75rem; justify-content: center; margin-top: 2rem; flex-wrap: wrap; }
.signup-form input[type="email"] { padding: 0.8rem 1.25rem; border: 1px solid #d0d0d0; border-radius: 9999px; font-size: 1rem; min-width: 270px; outline: none; transition: border-color 0.2s; }
.signup-form input[type="email"]:focus { border-color: #000; }
.signup-form button, .contact-form button { padding: 0.8rem 2rem; background: #000; color: #fff; border: none; border-radius: 9999px; font-size: 0.9375rem; font-weight: 500; cursor: pointer; transition: background 0.2s; }
.signup-form button:hover, .contact-form button:hover { background: #333; }
.signup-success { color: #00a86b; font-weight: 600; margin-top: 1.25rem; font-size: 0.9375rem; }

#contact { text-align: center; padding: 2rem 0; }
#contact h2 { text-align: center; }
#contact .lead { margin-left: auto; margin-right: auto; }
.contact-form { max-width: 440px; margin: 2rem auto 0; text-align: left; }
.contact-form label { display: block; margin-bottom: 0.375rem; font-weight: 500; font-size: 0.875rem; color: #555; text-transform: uppercase; letter-spacing: 0.04em; }
.contact-form input, .contact-form textarea { width: 100%; padding: 0.75rem 1rem; border: 1px solid #d0d0d0; border-radius: 6px; font-size: 1rem; font-family: inherit; margin-bottom: 1.25rem; outline: none; transition: border-color 0.2s; }
.contact-form input:focus, .contact-form textarea:focus { border-color: #000; }
.contact-form textarea { min-height: 130px; resize: vertical; }
.contact-form button { width: 100%; }

.compat-list { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 2rem; max-width: 480px; margin: 0; }
.compat-list dt { font-weight: 600; color: #555; }
.compat-list dd { margin: 0; color: #1a1a1a; }

.video-placeholder { background: #f0f0f0; border: 2px dashed #ccc; border-radius: 8px; padding: 4rem 2rem; text-align: center; color: #999; font-size: 1.125rem; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; }
.download-link { display: inline-block; padding: 0.8rem 2rem; background: #000; color: #fff; text-decoration: none; border-radius: 9999px; font-weight: 500; transition: background 0.2s; }
.download-link:hover { background: #333; }

#comments { border-top: 1px solid #eee; }
.comment { padding: 1rem 0; border-bottom: 1px solid #f0f0f0; }
.comment-meta { font-size: 0.875rem; margin-bottom: 0.375rem; }
.comment-date { color: #999; margin-left: 0.5rem; font-weight: 400; }
.comment-body { line-height: 1.7; white-space: pre-wrap; }
.reply-btn { background: none; border: none; color: #555; font-size: 0.8125rem; cursor: pointer; padding: 0.25rem 0; margin-top: 0.25rem; }
.reply-btn:hover { color: #000; }
.no-comments { color: #999; }
.comment-form { margin-top: 2rem; max-width: 540px; }
.comment-form label { display: block; margin-bottom: 0.375rem; font-weight: 500; font-size: 0.875rem; color: #555; text-transform: uppercase; letter-spacing: 0.04em; }
.comment-form input, .comment-form textarea { width: 100%; padding: 0.75rem 1rem; border: 1px solid #d0d0d0; border-radius: 6px; font-size: 1rem; font-family: inherit; margin-bottom: 1.25rem; outline: none; transition: border-color 0.2s; }
.comment-form input:focus, .comment-form textarea:focus { border-color: #000; }
.comment-form textarea { min-height: 100px; resize: vertical; }
.comment-form button[type="submit"] { padding: 0.8rem 2rem; background: #000; color: #fff; border: none; border-radius: 9999px; font-size: 0.9375rem; font-weight: 500; cursor: pointer; transition: background 0.2s; }
.comment-form button[type="submit"]:hover { background: #333; }
#comment-form-heading { margin-top: 2.5rem; margin-bottom: 0; }
.inline-reply { margin-top: 0.75rem; }
.reply-form { margin-top: 0; }
.reply-form textarea { min-height: 70px; }
.reply-form-actions { display: flex; align-items: center; gap: 0.75rem; }
.cancel-reply-btn { background: none; border: none; color: #999; cursor: pointer; font-size: 0.8125rem; padding: 0; }
.cancel-reply-btn:hover { color: #000; }

footer { background: #000; color: #fff; padding: 2.5rem 0; text-align: center; font-size: 0.8125rem; letter-spacing: 0.01em; }
footer a { color: #8a919a; transition: color 0.2s; }
footer a:hover { color: #fff; }