:root{font-family:system-ui,-apple-system,Segoe UI,Arial,sans-serif;color:#17202a;background:#f4f6f8}*{box-sizing:border-box}body{margin:0}main{max-width:790px;margin:0 auto;padding:32px 22px}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;font-size:19px}header span,footer{color:#657386;font-size:13px}.panel{background:#fff;border:1px solid #d9dfe5;padding:30px}h1{font-size:29px;margin:4px 0 12px}p{line-height:1.6}.eyebrow{font-weight:700;letter-spacing:.1em;font-size:11px;color:#465e75}label{display:block;font-weight:650;margin:24px 0 8px}textarea{font:inherit;width:100%;border:1px solid #b9c3ce;padding:12px;resize:vertical;border-radius:3px}textarea:focus{outline:2px solid #235a9d}button{cursor:pointer;background:#18385b;color:white;padding:11px 18px;border:1px solid #18385b;font:inherit;margin-top:14px}button:disabled{opacity:.55;cursor:not-allowed}button.danger{background:#fff;color:#962d2d;border-color:#962d2d}.hp{position:absolute;left:-9999px;opacity:0}#result,#status{min-height:22px}footer{margin-top:18px}.item{border-top:1px solid #dce1e7;padding:16px 0}.item p{white-space:pre-wrap;overflow-wrap:anywhere}.item small{color:#64748b}a{color:#1b528c}@media(max-width:600px){main{padding:20px 12px}.panel{padding:18px}}

input,select{font:inherit;width:100%;border:1px solid #b9c3ce;padding:10px;border-radius:3px;background:#fff} .spaced{margin-top:18px}.item input,.item textarea,.item select{margin:8px 0}.item a{display:block;font-weight:650}.item small{display:block;margin:6px 0}#create-box label{margin-top:14px} 

/* v0.4: marketing homepage and standalone feedback boxes */
:root{--ink:#192a38;--muted:#60717f;--line:#dce4e9;--teal:#087f76;--wash:#f4f8f7}
body.home-page,body.box-page{color:var(--ink);background:#fff}
.site-wrap{max-width:1120px;margin:auto;padding-left:28px;padding-right:28px}
.site-header{border-bottom:1px solid #e7ebee;background:#fff}
.site-header .nav{min-height:75px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.site-header .brand{font-size:22px;font-weight:800;letter-spacing:-.045em;text-decoration:none;color:#162d38}
.brand-mark{display:inline-flex;align-items:center;justify-content:center;background:#163f42;color:#fff;width:33px;height:33px;margin-right:7px;font-size:22px;letter-spacing:-.09em}
.brand-dot{color:#68e4c9}.site-header nav{display:flex;align-items:center;gap:28px}.site-header nav a{font-size:14px;text-decoration:none;color:#465764}.site-header nav a:hover{text-decoration:underline}
.landing{max-width:1120px}.hero{padding:96px 0 100px;display:grid;grid-template-columns:1.15fr .85fr;gap:76px;align-items:center}.overline{font-size:11px;font-weight:800;letter-spacing:.15em;color:#097e72;margin:0 0 20px}.hero h1{font-size:clamp(40px,5.2vw,68px);line-height:1.07;letter-spacing:-.065em;margin:0 0 24px;max-width:660px}.hero h1 em{color:#088276;font-style:normal}.hero-copy{max-width:550px;font-size:18px;line-height:1.68;color:#596c77;margin:0 0 28px}.hero-actions{display:flex;align-items:center;gap:19px;flex-wrap:wrap}.btn{display:inline-flex;text-decoration:none;font-size:14px;font-weight:750;padding:13px 20px;border:1px solid #173c41}.btn-primary{background:#173c41;color:#fff}.btn-primary:hover{background:#0a665f}.quiet-note{font-size:12px;color:#7a858e}.hero-preview{border:1px solid #c5d9d6;background:#eaf6f2;min-height:340px;box-shadow:16px 16px 0 #f1f7f5}.preview-bar{height:40px;display:flex;align-items:center;gap:6px;padding:0 14px;border-bottom:1px solid #bdd4ce;background:#d5ede6}.preview-dot{width:8px;height:8px;border:1px solid #80aca2;border-radius:50%}.preview-label{font-size:10px;letter-spacing:.12em;font-weight:750;color:#56766e;margin-left:auto}.preview-inner{padding:45px 32px}.preview-kicker{font-size:11px;color:#418379;font-weight:700;letter-spacing:.13em}.preview-message{font-size:27px;font-weight:800;line-height:1.25;margin:25px 0}.preview-line{background:#c6ddd7;height:11px;margin-bottom:12px;width:95%}.preview-line.short{width:63%}.preview-action{font-size:13px;font-weight:750;background:#16514e;color:#fff;display:inline-flex;gap:45px;padding:12px 15px;margin-top:20px}.how-section{padding:60px 0 95px;border-top:1px solid var(--line)}.section-heading h2,.suggest-intro h2{font-size:clamp(30px,3vw,41px);letter-spacing:-.045em;line-height:1.16;margin:0 0 12px}.section-heading>p:last-child{color:var(--muted);margin-bottom:40px}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.feature{padding:25px;border:1px solid var(--line);background:#fff}.feature-num{font-size:13px;color:#068073;font-weight:800}.feature h3{font-size:20px;margin:22px 0 8px}.feature p{font-size:14px;color:var(--muted);margin:0;line-height:1.7}.suggest-section{margin:0 -28px;background:var(--wash);padding:75px 55px 85px;display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:start}.suggest-intro>p:not(.overline){color:#5d6d78;max-width:420px}.private-note{font-size:13px}.suggest-card{background:#fff;border:1px solid #d8e2e1;padding:30px;box-shadow:4px 4px 0 #e2ece9}.suggest-card label{margin:0 0 10px}.suggest-card textarea{min-height:160px;border-radius:0}.suggest-card textarea:focus{outline:2px solid var(--teal)}.form-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px}.form-footer span{font-size:12px;color:#71818a}.form-footer button{margin:0;white-space:nowrap;background:#164d4c;border-color:#164d4c}.form-footer button:hover{background:#077f74}.site-footer{border-top:1px solid var(--line)}.footer-row{display:flex;justify-content:space-between;gap:18px;align-items:center;min-height:80px;font-size:12px;color:#74818a}.footer-row a{color:#465764}.box-layout{max-width:740px;padding-top:75px;padding-bottom:65px}.box-layout .suggest-card h1{font-size:35px;letter-spacing:-.04em}.box-layout .suggest-card>p:not(.overline){color:#637583}.privacy-foot{text-align:center;font-size:12px;color:#75848d}
@media(max-width:850px){.hero{grid-template-columns:1fr;padding:65px 0;gap:45px}.hero-preview{max-width:520px}.suggest-section{grid-template-columns:1fr;gap:30px}.feature-grid{grid-template-columns:1fr}.suggest-section{padding:50px 32px}}
@media(max-width:550px){.site-wrap{padding-left:18px;padding-right:18px}.site-header .nav{gap:12px}.site-header .brand{font-size:19px}.site-header nav{gap:13px}.site-header nav a{font-size:12px}.site-header nav a[href="#how-it-works"]{display:none}.hero{padding:55px 0}.hero-preview{min-height:290px}.preview-inner{padding:30px 23px}.suggest-section{margin:0 -18px;padding:45px 18px}.suggest-card{padding:20px}.form-footer{align-items:stretch;flex-direction:column}.form-footer button{width:100%}.footer-row{flex-wrap:wrap;padding-top:24px;padding-bottom:24px}}