:root{
  --text:#0f172a; --muted:#475569; --border:#e2e8f0; --brand:#0a7bd6;
  --bg:#ffffff; --surface:#f8fafc;
  --content: 1100px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.55;color:var(--text);background:var(--bg)}
a{color:var(--brand);text-decoration:none}
a:hover,a:focus{text-decoration:underline}
header{border-bottom:1px solid var(--border);background:#fff;position:sticky;top:0;z-index:10}
.container{max-width:var(--content);margin:0 auto;padding:10px 14px}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brand img{width:180px;height:auto;display:block}
.nav{display:flex;gap:8px 10px;flex-wrap:wrap;justify-content:flex-end}
.nav a{padding:6px 10px;border-radius:10px;background:var(--surface);border:1px solid var(--border);white-space:nowrap}
.nav a[aria-current="page"]{background:#eaf4ff;border-color:#cfe6ff;color:#0b3b6a;text-decoration:none}
main{padding:14px 0 22px}
h1{margin:0 0 6px;font-size:1.55rem}
h2{margin:12px 0 8px;font-size:1.08rem}
.small{color:var(--muted);font-size:.95rem}
.card{border:1px solid var(--border);border-radius:14px;padding:14px;margin:10px 0;background:#fff}
.hero{border:1px solid var(--border);border-radius:16px;overflow:hidden;background:var(--surface);margin:10px 0}
.hero-grid{display:block}
.hero-media img{width:100%;height:auto;display:block}
.hero-body{padding:12px 14px}
.hero--contain .hero-media img{object-fit:contain;background:#fff}
.terms-columns{display:block;gap:12px}
@media (min-width: 900px){
  .hero-grid{display:grid;grid-template-columns:1.15fr 0.85fr;align-items:stretch}
  .hero-media{order:2}
  .hero-body{order:1}
  .hero-media img{height:100%;object-fit:cover}
  .terms-columns{display:grid;grid-template-columns:1fr 1fr;align-items:start}
  h1{font-size:1.75rem}
}
ul{margin:8px 0 0;padding-left:18px}
li{margin:5px 0}
footer{border-top:1px solid var(--border);color:var(--muted);font-size:.95rem;background:#fff}
footer .container{display:flex;gap:10px 16px;flex-wrap:wrap;justify-content:space-between;align-items:center;padding:12px 14px}
@media (max-width:520px){
  .brand img{width:155px}
  .nav a{padding:6px 9px}
}
@media (min-width:1400px){
  body{background:#f6f8fb}
  .card,.hero{box-shadow:0 1px 0 rgba(15,23,42,0.04)}
}