:root { --ink: #27262c; --muted: #69666e; --line: #e9e4e1; --violet: #5c4b82; --red: #c62f2f; --paper: #fff; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #fbfaf8; font-family: "DM Sans", Arial, sans-serif; line-height: 1.65; }
.page-header { min-height: 82px; padding: 0 clamp(20px, 5vw, 76px); display: flex; align-items: center; justify-content: space-between; gap: 22px; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); }
.brand { color: var(--ink); font-size: 24px; font-weight: 600; letter-spacing: .13em; text-decoration: none; white-space: nowrap; }
.brand small { font-size: 8px; letter-spacing: .16em; }
.back-link { color: var(--violet); font-size: 13px; font-weight: 600; text-decoration: none; }
.offer { width: min(900px, calc(100% - 40px)); margin: 56px auto 72px; padding: clamp(28px, 5vw, 62px); background: var(--paper); border: 1px solid var(--line); box-shadow: 0 14px 48px rgba(48,37,42,.06); }
.eyebrow { margin: 0 0 9px; color: var(--violet); font-size: 12px; font-weight: 700; letter-spacing: .16em; }
h1 { margin: 0; font-family: "Playfair Display", Georgia, serif; font-size: clamp(31px, 4.2vw, 48px); font-weight: 500; line-height: 1.18; }
.lead { margin: 11px 0 31px; color: var(--muted); font-size: 16px; }
.draft-note { margin: 0 0 38px; padding: 15px 18px; border-left: 3px solid var(--red); background: #fff5f5; color: #5d3333; font-size: 14px; line-height: 1.5; }
section { padding: 26px 0; border-top: 1px solid var(--line); }
h2 { margin: 0 0 14px; font-size: 18px; line-height: 1.35; }
p { margin: 0 0 13px; font-size: 15px; }
p:last-child { margin-bottom: 0; }
a { color: var(--violet); }
.requires-fill { color: var(--red); font-weight: 700; }
.details { margin: 0; }
.details div { display: grid; grid-template-columns: minmax(180px, .42fr) 1fr; gap: 18px; padding: 13px 0; border-top: 1px solid #f0ece9; }
.details div:first-child { border-top: 0; }
dt { color: var(--muted); font-size: 14px; }
dd { margin: 0; }
footer { padding: 25px 20px 38px; color: var(--muted); text-align: center; font-size: 12px; }
@media (max-width: 600px) { .page-header { min-height: 68px; padding: 0 20px; } .brand { font-size: 18px; } .back-link { font-size: 12px; } .offer { width: min(100% - 24px, 900px); margin: 20px auto 38px; padding: 26px 20px; } p { font-size: 14px; } .details div { display: block; } dd { margin-top: 4px; } }