* { box-sizing: border-box; }
body { margin: 0; background: #f7fafc; color: #2d3748; font: 1rem/1.6 system-ui, sans-serif; }
header { background: #1a365d; color: white; padding: 1rem; text-align: center; border-bottom: 4px solid #2b6cb0; }
header p { margin: 0; font-weight: 700; font-size: 1.5rem; }
main { max-width: 800px; margin: 2rem auto; padding: 0 1rem; }
section { background: white; border-radius: 12px; padding: clamp(1rem, 4vw, 2rem); margin-bottom: 1.5rem; box-shadow: 0 4px 6px #0001; }
h1, h2, a { color: #1a365d; }
h1, h2 { margin-top: 0; line-height: 1.25; }
label { display: block; font-weight: 650; margin-top: 1rem; }
input { display: block; width: 100%; max-width: 24rem; padding: .65rem; font: inherit; color: inherit; border: 1px solid #718096; border-radius: 6px; }
small { display: block; }
button { margin-top: 1.25rem; padding: .65rem 1rem; border: 0; border-radius: 6px; background: #1a365d; color: white; font: inherit; cursor: pointer; }
.result { margin-top: 1rem; padding: 1rem; border-radius: 8px; background: #edf2f7; }
.result p { margin: 0; }
#amount { font-size: 1.8rem; font-weight: 750; color: #1a365d; }

header nav, footer nav { display:flex; justify-content:center; flex-wrap:wrap; gap:.4rem 1.2rem; }
header a { color:white; }
header p a { text-decoration:none; }
footer { text-align:center; padding:1.5rem 1rem; background:#edf2f7; }
a:focus-visible, button:focus-visible, input:focus-visible { outline:3px solid #2b6cb0; outline-offset:3px; }
.kicker { text-transform:uppercase; letter-spacing:.08em; font-size:.8rem; font-weight:700; }
.guide-grid { padding:0; list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:.65rem; }
.guide-grid a { display:block; height:100%; padding:.75rem; border:1px solid #cbd5e0; border-radius:8px; }