:root { color-scheme: light; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #19352d; background: #f4f6f0; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: #28664e; text-underline-offset: .23em; }
a:focus-visible, summary:focus-visible { outline: 3px solid #70a98b; outline-offset: 5px; }
.shell { width: min(100% - 40px, 940px); margin: 0 auto; }
header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; min-height: 96px; border-bottom: 1px solid #d5dfd3; }
.brand { color: inherit; font-size: 1rem; font-weight: 850; letter-spacing: .15em; text-decoration: none; }
header span, footer { color: #617465; font-size: .875rem; }
main { padding: clamp(28px, 6vw, 64px) 0 48px; }
.eyebrow { color: #4b7258; font-size: .8rem; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
h1 { margin: 18px 0 22px; max-width: 780px; font-size: clamp(2.1rem, 5.7vw, 3.6rem); line-height: 1.1; letter-spacing: -.045em; }
h2 { margin: 0 0 16px; font-size: 1.4rem; line-height: 1.35; letter-spacing: -.02em; }
h3 { margin: 0 0 10px; font-size: 1rem; }
p, li { font-size: 1rem; line-height: 1.8; }
.intro { max-width: 770px; color: #526859; font-size: 1.15rem; line-height: 1.8; }
.service { margin: 32px 0; padding: clamp(22px, 4vw, 36px); border: 1px solid #becfba; border-radius: 20px; background: #fcfdf9; }
.service p { max-width: 760px; color: #4d6352; }
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.badge { padding: 6px 10px; border-radius: 6px; background: #e4eddd; color: #3e653d; font-size: .8rem; font-weight: 700; }
.badge.neutral { background: #edf0eb; color: #677060; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 22px; margin: 24px 0 12px; }
.actions a { display: inline-flex; align-items: center; min-height: 44px; font-size: .95rem; font-weight: 700; }
.primary { padding: 12px 18px; border-radius: 10px; color: #fff; background: #285b43; text-decoration: none; }
.primary:hover { background: #1d4733; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; border-top: 1px solid #d5dfd3; margin-top: 32px; padding-top: 28px; }
.facts p { color: #526859; }
ul, ol { padding-left: 22px; }
li + li { margin-top: 10px; }
.notice { border-left: 3px solid #b2c79c; background: #edf2e5; padding: 16px 20px; color: #516a40; }
.breadcrumb { margin-bottom: 30px; font-size: .9rem; }
.documentation { margin-top: 32px; }
details { margin: 10px 0; border: 1px solid #d5dfd3; border-radius: 12px; padding: 0 20px; background: #fafcf6; }
summary { cursor: pointer; padding: 18px 0; font-size: 1rem; font-weight: 700; }
details p { margin-top: 0; color: #506551; }
code { overflow-wrap: anywhere; font-size: .9em; }
pre { overflow-x: auto; white-space: pre-wrap; padding: 20px; border: 1px solid #d5dfd3; border-radius: 12px; background: #fbfcf9; font-size: .9rem; line-height: 1.8; }
.reference { margin-top: 32px; color: #687963; font-size: .9rem; }
footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; border-top: 1px solid #d5dfd3; padding: 24px 0 36px; }
.invitation form { position: relative; max-width: 720px; margin: 24px 0; }
label { display: block; margin: 20px 0 8px; font-weight: 700; }
label span { color: #617465; font-size: .85rem; font-weight: 400; }
input, textarea { width: 100%; border: 1px solid #a7bba7; border-radius: 8px; padding: 12px; font: inherit; color: inherit; background: #fff; }
textarea { resize: vertical; }
button { border: 0; cursor: pointer; font: inherit; font-weight: 700; min-height: 46px; }
button:disabled { opacity: .65; cursor: wait; }
input:focus-visible, textarea:focus-visible, button:focus-visible { outline: 3px solid #70a98b; outline-offset: 3px; }
.service .form-help { font-size: .88rem; line-height: 1.6; }
.form-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#submission-status { margin: 14px 0 0; font-weight: 650; }
#submission-status[data-state="received"] { color: #225c3c; }
#submission-status[data-state="error"] { color: #943e31; }
@media (max-width: 600px) { .facts { grid-template-columns: 1fr; } header { min-height: 80px; } .shell { width: min(100% - 32px, 940px); } .service { border-radius: 16px; } }