:root { --navy:#111b38; --cream:#fff9eb; --coral:#ff5c5c; --green:#4eaa75; --amber:#e99d20; --plum:#5b315d; color-scheme:light; font-family:ui-sans-serif,system-ui,sans-serif; color:#172033; background:var(--cream); }
* { box-sizing:border-box; } body { margin:0; } header { background:var(--navy); color:white; padding:1rem clamp(1rem,5vw,5rem); display:flex; justify-content:space-between; gap:1rem; align-items:center; } header a { color:white; } .brand { font-weight:800; text-decoration:none; } main { max-width:1100px; margin:auto; padding:2rem 1rem 4rem; } .hero { margin-bottom:1rem; } h1 { font-size:clamp(2rem,5vw,4rem); margin:.1rem 0; } .eyebrow { color:var(--plum); font-weight:700; text-transform:uppercase; letter-spacing:.08em; } .layout { display:grid; grid-template-columns:2fr 1fr; gap:1rem; } .card { background:white; border:1px solid #eadfca; border-radius:1rem; padding:1.25rem; box-shadow:0 6px 18px #1d26401a; } button { background:var(--coral); border:0; border-radius:.5rem; color:white; cursor:pointer; font:inherit; font-weight:700; padding:.8rem 1rem; } button:disabled { cursor:not-allowed; opacity:.45; } input,select { display:block; width:100%; padding:.5rem; margin:.3rem 0 1rem; } @media(max-width:700px) { .layout { grid-template-columns:1fr; } header { flex-wrap:wrap; } }