:root { --ink: #242820; --muted: #62665c; --orange: #bc4c00; --paper: #fffdf8; --line: #deded1; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: radial-gradient(ellipse at top right, #ffe4c5 0, transparent 55%), #f5f4eb; font-family: Georgia, 'Times New Roman', serif; line-height: 1.65; }
a { color: var(--orange); text-underline-offset: 4px; }
a:focus-visible { outline: 3px solid var(--orange); outline-offset: 5px; }
.wrap { width: min(100% - 48px, 1000px); margin: auto; }
header { display: flex; gap: 16px; align-items: center; padding: 30px 0; border-bottom: 1px solid var(--line); }
header img { width: 48px; height: 48px; }
.brand, .eyebrow, nav, footer, .steps, .note { font-family: 'Trebuchet MS', Verdana, sans-serif; }
.brand { font-size: 16px; font-weight: bold; line-height: 1.3; }
nav { margin-left: auto; display: flex; gap: 18px; font-size: 14px; }
nav a { color: var(--ink); }
main { padding: 58px 0 65px; }
.eyebrow { margin: 0 0 16px; color: var(--orange); text-transform: uppercase; letter-spacing: .13em; font-size: 12px; font-weight: bold; }
h1 { font-size: clamp(36px, 6vw, 66px); letter-spacing: -.035em; line-height: 1.08; margin: 0 0 24px; max-width: 820px; font-weight: normal; }
.lead { font-size: 22px; max-width: 740px; color: var(--muted); }
.intro { max-width: 770px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin: 44px 0; padding: 28px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.step-number { color: var(--orange); font-size: 13px; font-weight: bold; }
.steps h2 { font-size: 19px; margin: 8px 0; }
.steps p { margin: 0; font-size: 15px; color: var(--muted); }
.details { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
h2 { line-height: 1.3; font-size: 27px; font-weight: normal; margin: 30px 0 12px; }
.note { margin: 32px 0 0; padding: 20px 24px; background: var(--paper); border-left: 4px solid var(--orange); font-size: 14px; }
.document { max-width: 760px; }
.document h1 { font-size: clamp(36px, 5vw, 52px); }
.document p, .document li { font-size: 17px; }
.date { color: var(--muted); font-size: 14px !important; }
footer { border-top: 1px solid var(--line); padding: 24px 0 36px; display: flex; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
footer div { display: flex; gap: 18px; }
@media (max-width: 640px) { .wrap { width: calc(100% - 32px); } header { flex-wrap: wrap; padding: 22px 0; } nav { margin-left: 0; width: 100%; } main { padding: 38px 0; } .steps, .details { grid-template-columns: 1fr; gap: 22px; } .lead { font-size: 20px; } }
