/* Responsive utilities and common layout for static pages */
:root{--maxw:1100px;--pad:20px}
*{box-sizing:border-box}
html,body{height:100%}
.container,.site{max-width:var(--maxw);margin:0 auto;padding:var(--pad)}
img{max-width:100%;height:auto;display:block}
header .site-header, .site-header{display:flex;align-items:center;gap:16px;padding:12px 0}
nav{display:flex;flex-wrap:wrap;gap:8px}
nav a{display:inline-block;padding:6px 8px}
.hero, .card-grid{display:flex;flex-wrap:wrap;gap:18px}
.card{flex:1 1 280px}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
/* Forms */
form{width:100%}
input[type=file]{display:block}
select,input,button{font:inherit}
button{cursor:pointer}
/* Result panels */
#result{display:grid;grid-template-columns:1fr 320px;gap:12px}
@media (max-width:900px){
  .site, .container{padding:12px}
  header .site-header{flex-direction:column;align-items:flex-start}
  #result{grid-template-columns:1fr}
  .hero{flex-direction:column}
  nav{gap:6px}
}