:root {
    --accent: #0e7490;
    --accent-dark: #155e75;
    --ink: #1c2733;
    --ink-soft: #51606e;
    --bg: #ffffff;
    --bg-tint: #f2f7f9;
    --rule: #dde6ea;
    --max: 760px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }
a:hover { color: var(--accent-dark); }

header.site {
    border-bottom: 1px solid var(--rule);
    background: var(--bg);
}
header.site .inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    align-items: baseline;
    gap: 24px;
}
header.site .brand {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ink);
    text-decoration: none;
    letter-spacing: -0.01em;
}
header.site .brand span { color: var(--accent); }
header.site nav { margin-left: auto; display: flex; gap: 18px; }
header.site nav a {
    font-size: 0.95rem;
    text-decoration: none;
    color: var(--ink-soft);
}
header.site nav a:hover { color: var(--accent-dark); }

main {
    max-width: var(--max);
    margin: 0 auto;
    padding: 40px 24px 64px;
}

h1 { font-size: 1.9rem; letter-spacing: -0.02em; line-height: 1.25; margin: 0 0 8px; }
h2 { font-size: 1.25rem; margin-top: 2.2em; }
h3 { font-size: 1.05rem; margin-top: 1.8em; }
p.lede { font-size: 1.15rem; color: var(--ink-soft); margin-top: 0; }
.meta { color: var(--ink-soft); font-size: 0.9rem; }

.hero { padding: 24px 0 8px; }
.hero h1 { font-size: 2.3rem; }

ul.features { padding-left: 0; list-style: none; margin: 28px 0; }
ul.features li {
    padding: 10px 0 10px 34px;
    position: relative;
}
ul.features li::before {
    content: "✓";
    position: absolute;
    left: 4px;
    color: var(--accent);
    font-weight: 700;
}

.card {
    background: var(--bg-tint);
    border: 1px solid var(--rule);
    border-radius: 12px;
    padding: 20px 24px;
    margin: 28px 0;
}
.card h2, .card h3 { margin-top: 0; }

form.support { margin-top: 24px; }
form.support label {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    margin: 18px 0 6px;
}
form.support input,
form.support textarea {
    width: 100%;
    font: inherit;
    color: var(--ink);
    padding: 10px 12px;
    border: 1px solid var(--rule);
    border-radius: 8px;
    background: var(--bg);
}
form.support input:focus,
form.support textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: 0;
    border-color: var(--accent);
}
form.support textarea { min-height: 160px; resize: vertical; }
form.support button {
    margin-top: 22px;
    font: inherit;
    font-weight: 600;
    color: #fff;
    background: var(--accent);
    border: 0;
    border-radius: 8px;
    padding: 12px 28px;
    cursor: pointer;
}
form.support button:hover { background: var(--accent-dark); }
.form-note { font-size: 0.9rem; color: var(--ink-soft); margin-top: 12px; }
form.support .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

footer.site {
    border-top: 1px solid var(--rule);
    background: var(--bg-tint);
}
footer.site .inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 20px 24px;
    font-size: 0.9rem;
    color: var(--ink-soft);
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
}
footer.site a { color: var(--ink-soft); }

@media (max-width: 540px) {
    .hero h1 { font-size: 1.8rem; }
    header.site nav { gap: 12px; }
}