:root { --ink:#17181a; --muted:#797b80; --paper:#f7f6f2; --line:#dfddd7; --red:#e0483d; --yellow:#f0bf45; }
* { box-sizing:border-box; }
html { min-width:320px; background:var(--paper); }
body { min-height:100vh; margin:0; color:var(--ink); background:var(--paper); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,textarea { font:inherit; }
button { cursor:pointer; }
.page-shell { display:flex; width:min(100%,1220px); min-height:100vh; flex-direction:column; margin:0 auto; padding:30px 56px 26px; }
.site-header { display:flex; align-items:center; justify-content:space-between; }
.wordmark { display:flex; align-items:center; gap:10px; color:var(--ink); font-size:23px; font-weight:850; letter-spacing:-.04em; }
.wordmark-mark { display:grid; width:34px; height:34px; place-items:center; color:#fff; background:var(--ink); font-size:17px; letter-spacing:0; }
.wordmark-dot { color:var(--red); }
.header-tag { color:var(--muted); font-size:10px; font-weight:750; letter-spacing:.16em; text-transform:uppercase; }
.hero-copy { width:min(100%,700px); padding:clamp(80px,15vh,170px) 0 44px; }
.eyebrow { margin:0 0 22px; color:var(--red); font-size:11px; font-weight:850; letter-spacing:.2em; }
h1 { margin:0; font-size:clamp(54px,8vw,94px); font-weight:850; line-height:.93; letter-spacing:-.06em; }
h1 em { color:var(--red); font-style:normal; }
.intro { max-width:420px; margin:30px 0 0; color:var(--muted); font-size:16px; line-height:1.65; }
.composer { width:min(100%,780px); padding:24px; background:#fff; box-shadow:0 24px 70px rgba(23,24,26,.08); }
.composer-top,.composer-bottom { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:11px; font-weight:750; letter-spacing:.04em; text-transform:uppercase; }
.status-dot { display:block; width:7px; height:7px; border-radius:50%; background:#56b779; box-shadow:0 0 0 4px #e7f5eb; }
.counter { margin-left:auto; font-weight:650; letter-spacing:0; text-transform:none; }
textarea { display:block; width:100%; min-height:190px; margin:24px 0 18px; padding:0; border:0; resize:vertical; outline:0; color:var(--ink); background:transparent; font-size:clamp(20px,3vw,28px); line-height:1.35; }
textarea::placeholder { color:#b4b3af; }
.composer-bottom { justify-content:space-between; padding-top:18px; border-top:1px solid var(--line); text-transform:none; letter-spacing:0; }
.privacy-note { display:flex; align-items:center; gap:8px; }
.privacy-note span { color:var(--red); font-size:18px; }
#send { display:flex; align-items:center; gap:14px; border:0; padding:14px 19px; color:#fff; background:var(--ink); font-size:13px; font-weight:850; }
#send:hover,#send:focus-visible { background:var(--red); }
#send:disabled { opacity:.6; cursor:wait; }
.form-message { min-height:20px; margin:16px 0 0; color:var(--red); font-size:13px; }
.form-message.success { color:#398554; }
.site-footer { display:flex; justify-content:space-between; margin-top:auto; padding-top:52px; color:#a3a29e; font-size:10px; font-weight:750; letter-spacing:.12em; text-transform:uppercase; }
.site-footer b { color:var(--yellow); font-size:16px; vertical-align:-2px; }
@media (max-width:650px) { .page-shell { padding:22px 20px 20px; } .header-tag { display:none; } .hero-copy { padding:100px 0 36px; } h1 { font-size:60px; } .intro { font-size:14px; } .composer { padding:19px; } textarea { min-height:210px; font-size:21px; } .composer-bottom { align-items:flex-start; gap:18px; flex-direction:column; } #send { width:100%; justify-content:space-between; } .site-footer { gap:12px; flex-direction:column; } }