:root{--navy:#002244;--green:#69BE28;--grey:#A5ACAF}
*{box-sizing:border-box}
body{margin:0;font:17px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--navy);background:#fff}
.wrap{max-width:960px;margin:0 auto;padding:0 1.5rem}
header{border-bottom:1px solid #e6e8e9}
header .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;padding-top:1.4rem;padding-bottom:1.4rem}
.brand{font-weight:700;font-size:1.2rem;letter-spacing:.02em;color:var(--navy);text-decoration:none}
nav a{color:var(--navy);text-decoration:none;font-size:.95rem;margin-left:1.4rem}
nav a:first-child{margin-left:0}nav a:hover{color:var(--green)}
main{max-width:960px;margin:0 auto;padding:4rem 1.5rem 5rem}
main.doc{max-width:720px}
h1{font-size:2.1rem;line-height:1.25;margin:0 0 1.5rem;font-weight:700}
h2{font-size:1.15rem;margin:2.6rem 0 .6rem}
p,li{color:var(--navy)}
.muted,em{color:#6f777a}
a{color:#3f8a14;text-decoration-color:var(--green);text-underline-offset:3px}
a:hover{color:var(--green)}
.hero{padding:2rem 0 3.5rem}
.hero h1{font-size:2.6rem;margin-bottom:1rem}
.hero p{font-size:1.25rem;color:#4a5a6b;max-width:620px;margin:0}
.rule{width:56px;height:3px;background:var(--green);border:0;margin:0 0 1.5rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;margin:1rem 0 4.5rem}
.card{border-top:2px solid var(--green);padding:1.2rem 0 0}
.card h3{margin:0 0 .4rem;font-size:1.1rem}
.card p{margin:0 0 .6rem;font-size:.97rem;color:#4a5a6b}
.card a,.tag{font-size:.9rem}
.tag{color:#6f777a;letter-spacing:.04em;text-transform:uppercase}
.sms{border:1px solid var(--grey);border-radius:10px;padding:1.8rem 2rem}
.sms h2{margin-top:0}
.sms .links a{margin-right:1.2rem}
.note{border-left:3px solid var(--green);padding:.4rem 0 .4rem 1.2rem;margin:1.5rem 0;color:var(--navy)}
.chat{max-width:420px;margin:1.5rem 0}
.msg{padding:.6rem .9rem;border-radius:16px;margin:.35rem 0;max-width:85%;font-size:.95rem}
.user{background:var(--navy);color:#fff;margin-left:auto}
.bot{background:#fff;border:1px solid var(--grey)}
.who{font-size:.75rem;color:#6f777a;margin-top:.8rem}
.chat .who:nth-of-type(odd){text-align:right}
footer{border-top:1px solid #e6e8e9;color:#6f777a;font-size:.88rem}
footer .wrap{padding-top:2rem;padding-bottom:2.5rem}
footer a{color:#6f777a}
@media(max-width:600px){main{padding-top:2.5rem}.hero h1{font-size:2rem}.hero p{font-size:1.1rem}h1{font-size:1.7rem}nav a{margin-left:1rem}.sms{padding:1.4rem}}
.card h3{display:flex;align-items:center;gap:.5rem}
.ico{flex:none;width:24px;height:24px}