:root{--blue:#0066cc;--blue2:#10659c;--text:#333;--line:#eaeaea;--bg:#f5f5f5}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--text);background:var(--bg);line-height:1.6;font-size:16px}
a{color:var(--blue)}a:hover{color:var(--blue2)}
.wrap{max-width:1140px;margin:0 auto;padding:0 16px}
.site-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.hdr{display:flex;align-items:center;flex-wrap:wrap;min-height:64px}
.brand{text-decoration:none;display:flex;flex-direction:column;padding:10px 0;flex:1}
.site-title{font-size:1.4rem;font-weight:700;color:#000}.tagline{font-size:.85rem;color:#666}
#nav-toggle{display:none}
.burger{cursor:pointer;padding:10px;display:flex;flex-direction:column;gap:5px}
.burger span{display:block;width:25px;height:3px;background:#000}
.nav{display:none;width:100%;flex-direction:column;border-top:1px solid var(--line)}
.nav a{padding:12px 4px;text-decoration:none;color:#333;border-bottom:1px solid var(--line)}
#nav-toggle:checked~.nav{display:flex}
main{padding:24px 16px}
.intro{background:#fff;border:1px solid var(--line);border-radius:4px;padding:20px;display:flex;flex-direction:column;gap:20px;align-items:center}
.hero{width:100%;max-width:300px;height:auto;border-radius:4px}
h1{font-size:1.8rem;margin:.2em 0;color:#000}
.grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:24px}
.card{background:#fff;border:1px solid var(--line);border-radius:4px;padding:20px;display:flex;flex-direction:column}
.card h4{font-size:1.25rem;margin:0 0 12px;color:#000}
.card img{display:block;max-width:100%;max-height:340px;margin:0 auto 12px;height:auto}
.card p{margin:.4em 0}
.btn{display:inline-block;margin-top:auto;background:var(--blue);color:#fff;text-decoration:none;padding:10px 16px;border-radius:4px;text-align:center}
.card .btn{margin-top:14px;align-self:flex-start}
.btn:hover{background:var(--blue2);color:#fff}
.doc{background:#fff;border:1px solid var(--line);border-radius:4px;padding:20px;max-width:820px;margin:0 auto}
.doc h2{font-size:1.2rem;margin-top:1.6em}.muted{color:#777}
.site-footer{background:#fff;border-top:1px solid var(--line);padding:20px 0;font-size:.9rem;text-align:center;margin-top:24px}
@media(min-width:600px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:768px){.burger{display:none}.nav{display:flex;width:auto;flex-direction:row;border:0}.nav a{border:0;padding:8px 12px}
 .intro{flex-direction:row;align-items:flex-start}.hero{max-width:300px;flex:0 0 300px}}
@media(min-width:992px){.grid{grid-template-columns:repeat(3,1fr)}}