/* Page-level styles layered on top of styles.css */
.hero-small {
  background: linear-gradient(160deg, #012B44 0%, #02385E 40%, #0B5D88 100%);
  color:#fff;
  padding:46px 0;
}
.hero-small h1 { margin:0; font-size:36px; }
.breadcrumb { margin-top:8px; font-size:14px; color:#D6E8F5; }
.breadcrumb a { color:#fff; opacity:.9; }
.breadcrumb .sep { opacity:.6; margin:0 6px; }

.page { padding:50px 0; }
.lead { font-size:18px; color:#5A6B7B; max-width:70ch; }

.grid-2 { display:grid; grid-template-columns:1.2fr 1fr; gap:28px; }
@media (max-width:900px){ .grid-2{ grid-template-columns:1fr; } }

.list { margin:0; padding-left:18px; }
.list li { margin:6px 0; color:#0B1A28; }
.list .muted { color:#5A6B7B; }

.feature-list { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:16px; }
@media (max-width:900px){ .feature-list{ grid-template-columns:1fr; } }
.feature { background:#fff; border:1px solid #e6edf3; border-radius:14px; padding:16px; box-shadow:0 8px 24px rgba(1,43,68,.08); }
.feature h3 { margin:0 0 6px; }

.kv { background:#fff; border:1px solid #e6edf3; border-radius:16px; padding:20px; }
.kv h3 { margin:0 0 8px; }

.product-logos{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;align-items:center;margin-top:24px}
.product-logos img{max-width:100%;height:40px;object-fit:contain;filter:grayscale(1);opacity:.9}
@media(max-width:900px){.product-logos{grid-template-columns:repeat(3,1fr)}}

.card-post { background:#fff; border:1px solid #e6edf3; border-radius:16px; padding:16px; }
.post-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:900px){ .post-grid { grid-template-columns:1fr; } }

.policy { background:#fff; border:1px solid #e6edf3; border-radius:16px; padding:20px; }
.policy h2 { margin-top:22px; font-size:22px; }

/* ================================
   MOBILE COMFORT — gutters & scaling
   ================================ */
@media (max-width:900px){
  /* Give sections comfy side padding (overrides base .container’s 20px) */
  .hero-small .container,
  .page .container { padding-inline:16px; }

  /* If a .container wasn’t used, still add gutters to the section itself */
  .hero-small,
  .page { padding-left:16px; padding-right:16px; }

  /* Typography & spacing tweaks */
  .hero-small { padding-top:32px; padding-bottom:32px; }
  .hero-small h1 { font-size:28px; }
  .breadcrumb { font-size:13px; }

  .page { padding-top:28px; padding-bottom:28px; }
  .lead { font-size:16px; }

  .grid-2 { gap:16px; }
  .feature-list { gap:14px; }
  .post-grid { gap:14px; }

  .feature,
  .kv,
  .policy,
  .card-post { padding:14px; border-radius:12px; }

  .product-logos { gap:14px; }
  .product-logos img { height:36px; }
}

/* Ultra-small phones */
@media (max-width:420px){
  .hero-small h1{ font-size:24px; }
  .lead{ font-size:15px; }
  .list{ padding-left:14px; }
}