:root {
    --vaalea: #f6f4f0;
    --teksti: #1d1d1f;
    --korostus: #2a5d4f;
    --reuna: #dcd7cf;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font: 17px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--teksti);
    background: #fff;
}

.yla, main > section, .ala {
    padding-left: 16px;
    padding-right: 16px;
}

.yla {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--reuna);
}

.yla a { color: inherit; text-decoration: none; }
.yla nav a { margin-right: 16px; }
.nimi { font-weight: 700; font-size: 1.15rem; }

main > section {
    max-width: 960px;
    margin: 0 auto;
    padding-top: 48px;
    padding-bottom: 48px;
}

.sankari { background: var(--vaalea); max-width: none; }
.sankari > * { max-width: 960px; margin-left: auto; margin-right: auto; }
.sankari h1 { font-size: clamp(1.9rem, 6vw, 3rem); line-height: 1.15; margin-top: 0; }

h2 { margin-top: 0; }

.kortit { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.kortit article { border: 1px solid var(--reuna); border-radius: 8px; padding: 16px; }
.kortit h3 { margin-top: 0; }

.nappi {
    display: inline-block;
    padding: 12px 22px;
    border: 0;
    border-radius: 6px;
    background: var(--korostus);
    color: #fff;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

form { display: grid; gap: 14px; max-width: 520px; }
label { display: grid; gap: 4px; }
input, textarea {
    font: inherit;
    padding: 10px;
    border: 1px solid var(--reuna);
    border-radius: 6px;
    width: 100%;
}
.ansa { position: absolute; left: -9999px; }
.kiitos { padding: 14px; background: var(--vaalea); border-radius: 6px; }

.ala { padding-top: 24px; padding-bottom: 24px; color: #666; border-top: 1px solid var(--reuna); }