:root {
  color-scheme: light;
  color: #001427;
  background: #faf9f6;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.5;
  --muted: #475564;
  --rule: #e4e2de;
}

* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; }
a:focus-visible { outline: 2px solid #1753b8; outline-offset: 5px; border-radius: 4px; }
.wrap { width: min(1080px, calc(100% - 40px)); margin-inline: auto; }
.bar, .footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.bar { min-height: 68px; border-bottom: 1px solid var(--rule); }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font-weight: 700; letter-spacing: -.025em; }
.brand img { border-radius: 8px; }
.nav-link, .footer a { text-decoration: none; }
.nav-link:hover, .footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.nav-link { font-size: .9rem; }
.hero { padding-top: clamp(42px, 6vw, 76px); text-align: center; }
.eyebrow { margin: 0 0 8px; color: #164c93; font-size: .875rem; font-weight: 700; }
h1, h2, h3 { line-height: 1.05; text-wrap: balance; }
h1 { margin: 0; font-size: clamp(3.2rem, 9vw, 6.5rem); letter-spacing: -.062em; }
h2 { margin: 0; font-size: clamp(2rem, 5vw, 4rem); letter-spacing: -.06em; }
.intro, .closing p { max-width: 36rem; margin: 20px auto 24px; color: var(--muted); font-size: clamp(1.1rem, 2.2vw, 1.35rem); text-wrap: pretty; }
.button { display: inline-flex; align-items: center; gap: 10px; border-radius: 100px; padding: 12px 21px; background: #001427; color: #fff; font-size: .95rem; font-weight: 650; text-decoration: none; }
.button:hover { background: #183d61; }
.hero-image { display: block; width: 100%; height: auto; margin-top: clamp(28px, 4vw, 44px); border-radius: clamp(16px, 3vw, 30px); background: #eee7d8; }
.ideas, .closing { margin-block: clamp(68px, 11vw, 130px); text-align: center; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 32px; text-align: left; }
.grid article { padding: clamp(22px, 3.5vw, 36px); border-radius: 20px; background: #f0efec; }
.grid h3 { margin: 0 0 8px; font-size: clamp(1.45rem, 3vw, 2.15rem); letter-spacing: -.05em; }
.grid p { margin: 0; color: var(--muted); }
.closing { padding: clamp(38px, 7vw, 76px) 20px; background: #eaf0f7; border-radius: 26px; }
.closing p { margin-bottom: 0; }
.footer { border-top: 1px solid var(--rule); padding-block: 22px; color: var(--muted); font-size: .875rem; flex-wrap: wrap; }
.footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
.document { max-width: 680px; margin: clamp(52px, 8vw, 100px) auto; }
.document h1 { font-size: clamp(2.8rem, 8vw, 4.6rem); letter-spacing: -.06em; }
.document h2 { margin-top: 32px; font-size: 1.45rem; letter-spacing: -.025em; }
.document p { color: var(--muted); }
.document a { color: #164c93; overflow-wrap: anywhere; }
.document a.button { color: #fff; }

@media (max-width: 560px) {
  .grid { grid-template-columns: 1fr; gap: 8px; }
  .grid article { border-radius: 15px; }
}