@font-face { font-family: "Inter"; src: url("/assets/inter-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/inter-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --ink: #14213D; --paper: #F7F6F2; --copper: #B85C2C; --copper-text: #A3511F; --slate: #5B6478; --rule: #E4E1D8;
  --bg: var(--paper); --text: var(--ink); --muted: var(--slate); --accent: var(--copper); --accent-text: var(--copper-text); --line: var(--rule);
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #14213D; --text: #F7F6F2; --muted: #B8BFCD; --accent: #D9824F; --accent-text: #D9824F; --line: #3A4560; }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font-family: "Inter", "Helvetica Neue", Arial, sans-serif; font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
.wrap { max-width: 880px; margin: 0 auto; padding: 48px 28px 40px; min-height: 100vh; display: flex; flex-direction: column; }
.logo { height: 44px; width: auto; display: block; }
.logo-dark { display: none; }
@media (prefers-color-scheme: dark) { .logo-light { display: none; } .logo-dark { display: block; } }
.hero { margin-top: 18vh; }
h1 { font-weight: 500; font-size: clamp(32px, 5.2vw, 52px); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 24px; max-width: 18ch; }
.lede { color: var(--muted); max-width: 58ch; margin: 0; }
.steps ol { list-style: none; padding: 0; margin: 56px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.steps li { display: flex; flex-direction: column; font-size: 15px; color: var(--muted); }
.steps .bar { height: 3px; background: var(--line); margin-bottom: 12px; }
.steps li.current .bar { background: var(--accent); }
.steps strong { color: var(--text); font-weight: 500; }
.contact { margin-top: 56px; }
.contact p { margin: 0; }
a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
footer { margin-top: auto; padding-top: 56px; font-size: 14px; color: var(--muted); }
footer p { margin: 0; }
@media (max-width: 640px) {
  body { font-size: 17px; }
  .wrap { padding: 32px 22px; }
  .hero { margin-top: 10vh; }
  .steps ol { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
}