.hero{text-align:center;padding:4px 0 18px}
.hero .avatar{margin:0 auto 12px}
.hero h1{font-size:clamp(28px,8vw,38px);margin-bottom:10px}
.hero .lead{font-size:17px;color:var(--mute);margin:0 auto;max-width:44ch}
#gate h2{font-size:22px;margin-bottom:10px}
.f{margin-bottom:12px}
.f label{display:block;font-weight:500;margin-bottom:4px}
.tick{display:flex;gap:10px;align-items:flex-start;font-size:14px;margin:10px 0;cursor:pointer;min-height:44px}
.tick input{width:22px;height:22px;margin:1px 0 0;flex:none;accent-color:var(--acc)}
.go{width:100%;font-size:17px;min-height:52px;margin-top:8px}
.fine{margin:12px 0 0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ts:empty{display:none}
.ts{margin:8px 0}
.sugg{font-size:14px;margin:6px 0 0}
.sugg button{min-height:44px;padding:4px 12px;font-size:14px}
.what,.about{margin-top:28px}
.what h2,.about h2{font-size:22px;margin-bottom:8px}
.what ul{padding-left:20px;margin:0}
.what li{margin-bottom:8px}
.about{display:flex;gap:14px;align-items:flex-start}
.demo{background:var(--warnbg);color:var(--warn);border-radius:8px;padding:8px 12px;font-size:13px}