:root {
  color: #17385f;
  background: #eef5ff;
  font-family: "Nunito Sans", system-ui, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 15% 15%, rgba(255, 208, 100, 0.32), transparent 27rem),
    radial-gradient(circle at 85% 80%, rgba(98, 178, 255, 0.3), transparent 30rem),
    #eef5ff;
}

a { color: #285ca7; }
a:hover { color: #19447d; }
a:focus-visible { outline: 3px solid rgba(40, 92, 167, 0.3); outline-offset: 3px; }

.page-shell { width: min(100% - 32px, 820px); margin: 0 auto; padding: 32px 0 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 28px; color: #285ca7; font-family: "Shrikhand", serif; font-size: 1.3rem; text-decoration: none; }
.brand-blocks { display: inline-flex; align-items: end; gap: 2px; height: 22px; }
.brand-blocks i { display: block; width: 7px; border-radius: 2px; background: #ef6b64; }
.brand-blocks i:nth-child(1) { height: 12px; }
.brand-blocks i:nth-child(2) { height: 20px; background: #f3b640; }
.brand-blocks i:nth-child(3) { height: 16px; background: #4fa37d; }

.content-card { padding: clamp(24px, 6vw, 54px); border: 1px solid rgba(40, 92, 167, 0.16); border-radius: 28px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 24px 70px rgba(33, 74, 128, 0.12); }
.eyebrow { margin: 0 0 8px; color: #55759f; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
h1 { margin: 0 0 12px; color: #15345d; font-size: clamp(2rem, 7vw, 3.25rem); line-height: 1.05; }
h2 { margin: 32px 0 8px; color: #214f86; font-size: 1.15rem; }
p, li { font-size: 1rem; line-height: 1.65; }
p { margin: 0 0 16px; }
ul { margin: 8px 0 18px; padding-left: 22px; }
.updated { color: #627895; }
.contact-box { margin-top: 28px; padding: 18px 20px; border: 1px solid #d7e4f4; border-radius: 16px; background: #f7faff; }
.site-footer { margin-top: 24px; color: #627895; font-size: 0.9rem; text-align: center; }
.site-footer a + a { margin-left: 16px; }

@media (max-width: 520px) {
  .page-shell { width: min(100% - 20px, 820px); padding-top: 18px; }
  .content-card { border-radius: 20px; }
}