:root {
  color: #19334f;
  background: #eaf5ff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 0%, #ffffff, transparent 42rem),
    linear-gradient(180deg, #dceeff 0, #f6fbff 38rem);
}

main {
  width: min(46rem, calc(100% - 2rem));
  margin: 0 auto;
  padding: 2rem 0 4rem;
}

header,
article {
  border: 1px solid #bad3e8;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 1rem 3rem rgb(39 85 126 / 9%);
}

header { padding: 1.25rem; text-align: center; background: linear-gradient(150deg, #fff, #e7f4ff); border-top: 4px solid #e6b63e; }
header img { width: min(13rem, 65vw); height: auto; }
article { margin-top: 1rem; padding: clamp(1.25rem, 5vw, 2rem); }
h1, h2 { color: #164f9c; }
h1 { margin: 0.4rem 0; font-size: clamp(2rem, 9vw, 3.5rem); text-transform: uppercase; }
h2 { margin-top: 1.8rem; }
p, li { line-height: 1.65; overflow-wrap: anywhere; }
a { color: #164f9c; text-underline-offset: 3px; }
a:hover { color: #102f62; }
a:focus-visible { outline: 3px solid #164f9c; outline-offset: 4px; border-radius: 3px; }
.eyebrow { margin: 0; color: #45617d; font-weight: 700; font-size: .8rem; letter-spacing: 0.08em; text-transform: uppercase; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.button { display: inline-flex; align-items: center; min-height: 44px; padding: 0.75rem 1rem; border: 1px solid #d3a325; border-radius: 0.7rem; color: #19334f; background: #f8d775; font-weight: 700; text-decoration: none; }
.button:hover { color: #19334f; background: #ffe6a0; }
.actions > a:not(.button) { display: inline-flex; min-height: 44px; align-items: center; }
@media (max-width: 400px) {
  main { width: calc(100% - 1.25rem); padding-top: .75rem; }
  header img { width: min(10rem, 60vw); }
  h1 { font-size: 2rem; }
  article { padding: 1.1rem; }
}
