:root { color-scheme: light dark; --ink:#1d1630; --paper:#faf9fc; --accent:#7446b9; --accent-deep:#512987; --muted:#665d75; --line:#ddd6e8; }
* { box-sizing:border-box; } body { margin:0; background:radial-gradient(circle at 75% 15%, #e9ddfa, transparent 32rem), var(--paper); color:var(--ink); font-family:Inter, ui-sans-serif, system-ui, sans-serif; } main, footer { width:min(1120px, calc(100% - 3rem)); margin:auto; } nav { display:flex; justify-content:space-between; align-items:center; padding:2rem 0; font-weight:700; } .brand { font-size:1.6rem; color:var(--ink); text-decoration:none; letter-spacing:-.06em; } nav span, .eyebrow { color:var(--accent-deep); letter-spacing:.12em; text-transform:uppercase; font-size:.76rem; font-weight:800; } .hero { padding:8rem 0 7rem; max-width:800px; } h1 { font-size:clamp(4rem, 11vw, 8.5rem); line-height:.9; margin:.7rem 0 2rem; letter-spacing:-.085em; } .lede { color:var(--muted); max-width:600px; font-size:1.25rem; line-height:1.6; margin-bottom:2.4rem; } .signup { max-width:490px; } .signup label { display:block; font-weight:800; margin-bottom:.65rem; } .signup-row { display:flex; gap:.6rem; } .signup input { min-width:0; flex:1; padding:.9rem 1rem; border:1px solid var(--line); border-radius:.7rem; background:#fff; color:#1d1630; font:inherit; } .signup button { border:0; padding:.9rem 1.15rem; border-radius:.7rem; background:var(--accent-deep); color:white; cursor:pointer; font:inherit; font-weight:750; box-shadow:0 10px 30px #51298735; } .signup p { color:var(--muted); font-size:.82rem; line-height:1.45; margin:.65rem 0 0; } .promise { display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:1.2rem; overflow:hidden; margin-bottom:4rem; } .promise div { background:#fffdffcc; padding:1.6rem; display:grid; gap:.6rem; } .promise strong { font-size:1.05rem; } .promise span { color:var(--muted); line-height:1.5; } footer { border-top:1px solid var(--line); padding:2rem 0 3rem; color:var(--muted); font-size:.9rem; } @media (prefers-color-scheme:dark) { :root { --ink:#f5f0fa; --paper:#17121e; --muted:#c1b8cd; --line:#3a2f45; } body { background:radial-gradient(circle at 75% 15%, #422361, transparent 32rem), var(--paper); } .signup input { background:#201828; color:var(--ink); } .promise div { background:#201828e8; } }
@media (max-width:620px) { .hero { padding:5rem 0; } .signup-row { flex-direction:column; } .promise { grid-template-columns:1fr; } }