:root { color-scheme: light; --green: #3a7360; --green-dark: #1f4a3d; --sun: #f2b544; --coral: #e08466; --ink: #23302b; --muted: #61706a; --line: #e2ebe4; --field: #b3c4bc; --error: #a52828; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: #fdf7ec; background-image: radial-gradient(1100px 520px at 12% -8%, #fde9c9 0%, rgba(253,233,201,0) 62%), radial-gradient(950px 560px at 92% 4%, #dcefe3 0%, rgba(220,239,227,0) 60%), linear-gradient(180deg, #fdf7ec 0%, #f1f7f1 100%); background-attachment: fixed; font: 16px/1.6 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
main { width: min(880px, calc(100% - 32px)); margin: 0 auto; padding: 56px 0 80px; }
.hero { text-align: center; margin-bottom: 34px; }
h1 { margin: 0 0 12px; color: var(--green-dark); font-size: clamp(2.1rem, 7vw, 3.4rem); line-height: 1.08; letter-spacing: -.015em; }
h1::after { content: ""; display: block; width: 74px; height: 5px; margin: 16px auto 0; border-radius: 99px; background: linear-gradient(90deg, var(--sun), var(--coral)); }
h2 { margin-top: 0; color: var(--green-dark); }
h3 { margin: 24px 0 14px; color: var(--green-dark); font-size: 1.05rem; }
.lead { max-width: 34ch; margin: 0 auto; color: var(--muted); font-size: 1.1rem; }
.card { background: #fff; border: 1px solid rgba(31,74,61,.1); border-radius: 26px; box-shadow: 0 2px 4px rgba(31,74,61,.05), 0 24px 60px -24px rgba(31,74,61,.28); padding: clamp(24px, 5vw, 48px); }
fieldset { margin: 0 0 34px; padding: 0 0 32px; border: 0; border-bottom: 1px solid var(--line); }
fieldset:last-of-type { margin-bottom: 26px; padding-bottom: 0; border-bottom: 0; }
legend { display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 20px; color: var(--green-dark); font-size: 1.3rem; font-weight: 750; letter-spacing: -.01em; }
legend::before { content: ""; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 5px rgba(242,181,68,.2); }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.wide { grid-column: 1 / -1; }
label, .signature-field > span { display: block; font-weight: 650; }
input:not([type=checkbox]) { width: 100%; margin-top: 8px; padding: 13px 14px; border: 1px solid var(--field); border-radius: 12px; background: #fcfefd; color: var(--ink); font: inherit; transition: border-color .15s, box-shadow .15s, background-color .15s; }
input:not([type=checkbox]):hover { border-color: var(--green); }
input::placeholder { color: #9dada6; }
input:focus, canvas:focus { outline: none; border-color: var(--green); background: #fff; box-shadow: 0 0 0 4px rgba(58,115,96,.16); }
.check { display: flex; align-items: flex-start; gap: 12px; margin-top: 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: #f7fbf8; font-weight: 500; cursor: pointer; transition: border-color .15s, background-color .15s; }
.check:hover { border-color: var(--green); background: #f1f8f3; }
.check input { width: 21px; height: 21px; margin: 2px 0 0; accent-color: var(--green); flex: 0 0 auto; }
small, .hint, .privacy-note { display: block; color: var(--muted); font-weight: 400; }
small { margin-top: 6px; font-size: .88rem; }
.hint { margin: -8px 0 20px; }
.privacy-note { margin: 0 0 22px; padding: 16px 18px; border-radius: 14px; background: #f7fbf8; font-size: .92rem; }
.error { display: block; margin-top: 6px; color: var(--error); font-size: .92rem; font-weight: 650; }
.summary { margin-bottom: 20px; padding: 15px 20px; border-radius: 14px; border-left: 5px solid var(--error); background: #fff1ef; color: var(--error); font-weight: 700; }
.signature-field { margin-top: 22px; }
canvas { display: block; width: 100%; height: auto; margin: 10px 0 12px; border: 2px dashed #a9bfb6; border-radius: 16px; background: #fcfefd; touch-action: none; cursor: crosshair; }
button { border: 0; border-radius: 12px; padding: 13px 22px; font: inherit; font-weight: 700; cursor: pointer; transition: background-color .15s, transform .1s, box-shadow .15s; }
button:active { transform: translateY(1px); }
.primary { width: 100%; padding: 17px 22px; background: var(--green); color: #fff; font-size: 1.1rem; box-shadow: 0 10px 22px -10px rgba(31,74,61,.7); }
.primary:hover { background: var(--green-dark); }
.secondary { background: #eef4f0; color: var(--green-dark); }
.secondary:hover { background: #e2ece6; }
.message { text-align: center; }
.message p { max-width: 46ch; margin: 0 auto; color: var(--muted); }
.success { border-top: 7px solid var(--green); }
.failure { border-top: 7px solid var(--coral); }
@media (max-width: 620px) { main { width: min(100% - 20px, 880px); padding: 32px 0 48px; } .grid { grid-template-columns: 1fr; gap: 16px; } .wide { grid-column: auto; } .card { border-radius: 18px; } h1::after { margin-top: 12px; } }