/* Safe area + base type */
:root { --container-w: 48rem; } /* ~768px */
html,body{height:100%}
body{
  background:#f7f9fc;
  color:#111827;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size:14px; line-height:1.45;
  padding-top: calc(8px + env(safe-area-inset-top));
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Page container */
.page{
  max-width:var(--container-w);
  margin:0 auto;
  padding:16px;
}

/* Headings */
h1{font-size:1.5rem; font-weight:700; color:#1d4ed8; margin-bottom:.75rem;}
h2{font-size:1.25rem; font-weight:600; color:#2563eb; margin:.75rem 0 .5rem;}
p,li{font-size:.95rem}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:.6rem 1rem; border-radius:.5rem; text-decoration:none;
  font-weight:600; box-shadow:0 2px 6px rgba(0,0,0,.06);
}
.btn-primary{background:#2563eb; color:#fff;}
.btn-primary:hover{background:#1e40af;}
.btn-secondary{background:#e5e7eb; color:#111827;}
.btn-secondary:hover{background:#d1d5db;}

/* Cards */
.card{background:#fff; border-radius:.75rem; box-shadow:0 8px 24px rgba(0,0,0,.08); padding:16px;}

/* Images */
img{max-width:100%; height:auto;}

/* Utility trims for tight screens */
@media (max-width:420px){
  h1{font-size:1.25rem}
  h2{font-size:1.1rem}
  .btn{padding:.55rem .85rem}
}