:root {
  color-scheme: light dark;
  --canvas: #f5f6f8;
  --surface: #ffffff;
  --ink: #172033;
  --muted: #5c6678;
  --line: #e1e5ec;
  --primary: #4d64b5;
  --primary-soft: #eef0fb;
  --amber: #b68b35;
  --coral: #bd5c5c;
  --green: #3f8b6b;
  --shadow: 0 18px 48px rgb(23 32 51 / 8%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #111722;
    --surface: #1b2432;
    --ink: #eef1f7;
    --muted: #b4bdcc;
    --line: #354154;
    --primary: #a1afe9;
    --primary-soft: #29324d;
    --amber: #e5bd68;
    --coral: #e68b8b;
    --green: #77c29e;
    --shadow: 0 18px 48px rgb(0 0 0 / 22%);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

.wrap { width: min(100% - 32px, 820px); margin: 0 auto; padding: 32px 0 56px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; font-weight: 650; letter-spacing: .02em; text-decoration: none; }
.brand-mark { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: var(--primary); color: #fff; font-size: 14px; }
.hero { padding: 32px 0 24px; }
.eyebrow { margin: 0 0 8px; color: var(--primary); font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(30px, 7vw, 42px); line-height: 1.2; letter-spacing: -.035em; }
.lead { max-width: 670px; margin: 14px 0 0; color: var(--muted); font-size: 18px; }
.meta { margin-top: 12px; color: var(--muted); font-size: 13px; }
.card { margin: 16px 0; padding: clamp(20px, 5vw, 32px); border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); }
h2 { margin: 32px 0 10px; font-size: 21px; line-height: 1.35; letter-spacing: -.02em; }
h2:first-child { margin-top: 0; }
h3 { margin: 22px 0 6px; font-size: 17px; }
p { margin: 10px 0; }
ul { margin: 8px 0 16px; padding-left: 1.25em; }
li { padding-left: 3px; margin: 5px 0; }
.callout { padding: 16px 18px; border-left: 4px solid var(--primary); border-radius: 12px; background: var(--primary-soft); }
.contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.contact-address { margin: 0; font-style: normal; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 18px; border-radius: 12px; background: var(--primary); color: #fff; font-weight: 700; text-decoration: none; }
.button:hover { filter: brightness(1.08); }
.pill { display: inline-block; padding: 3px 9px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-size: 13px; font-weight: 650; }
.nav { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 22px; font-size: 14px; }
.footer { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.footer p { margin: 5px 0; }
.small { color: var(--muted); font-size: 14px; }

@media (max-width: 520px) {
  .wrap { width: min(100% - 24px, 820px); padding-top: 22px; }
  .hero { padding-top: 25px; }
  .lead { font-size: 16px; }
  .contact { align-items: flex-start; flex-direction: column; }
}