:root {
  color: #19352f;
  background: #f5f7f5;
  font-family: "Jost", "Segoe UI Variable Text", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { min-width: 320px; margin: 0; }
.site-header, .vahti-main, .site-footer { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.site-header { padding: 24px 0 28px; }
.header-inner { display: flex; align-items: center; }
.site-brand { display: inline-flex; align-items: center; gap: 10px; color: #19352f; font-size: 1.25rem; font-weight: 900; letter-spacing: -0.02em; line-height: 1; text-decoration: none; }
.site-brand-wordmark { font-family: "Jost", "Segoe UI Variable Text", "Segoe UI", sans-serif; }
.site-brand-domain { display: inline-block; margin-left: 3px; color: #08765b; font-size: .7em; letter-spacing: 0; vertical-align: .04em; }
.site-brand-mark { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 11px; box-shadow: 0 8px 18px rgba(6, 75, 87, .18); transition: transform 160ms ease, box-shadow 160ms ease; }
.site-brand:hover .site-brand-mark { transform: translateY(-1px) rotate(-3deg); box-shadow: 0 12px 22px rgba(6, 75, 87, .24); }
.vahti-main { padding: 32px 0 56px; }
.hero { max-width: 780px; margin: 0 auto; padding: clamp(28px, 5vw, 52px); border: 1px solid #d9e3de; border-radius: 18px; background: #fff; box-shadow: 0 16px 36px rgba(25, 53, 47, .07); }
.eyebrow { margin: 0 0 13px; color: #08765b; font-size: .78rem; font-weight: 800; letter-spacing: .1em; }
h1 { max-width: 680px; margin: 0; color: #19352f; font-size: clamp(2.35rem, 5vw, 4.35rem); font-weight: 700; letter-spacing: -.045em; line-height: 1; text-wrap: balance; }
.intro { max-width: 620px; margin: 24px 0 0; color: #64756f; font-size: 1.06rem; line-height: 1.55; }
.watch-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 34px; padding-top: 28px; border-top: 1px solid #d9e3de; }
.watch-form label:first-of-type, .watch-form label:last-of-type, .watch-form button { grid-column: 1 / -1; }
label { display: grid; gap: 7px; color: #19352f; font-size: .94rem; font-weight: 700; }
input, select, button { width: 100%; min-height: 48px; border-radius: 10px; font: inherit; }
input, select { border: 1px solid #b8c8c0; padding: 10px 12px; color: #19352f; background: #fff; }
input:focus, select:focus { border-color: #08765b; outline: 3px solid #d8eee5; }
button, .button-link { display: inline-flex; align-items: center; justify-content: center; border: 1px solid #b7d9cd; padding: 12px 18px; border-radius: 999px; color: #007567; background: #e7f4ef; box-shadow: 0 8px 18px rgba(0, 91, 83, .08); font-weight: 850; text-decoration: none; cursor: pointer; }
button:hover, .button-link:hover { border-color: #8fc8b8; background: #d8eee5; }
.message { margin: 22px 0 0; padding: 13px 15px; border-radius: 10px; font-weight: 650; }
.message-error { color: #8b1c1c; background: #fce8e6; }
.message-success { color: #1e5c2a; background: #e7f4e5; }
.site-footer { padding: 25px 0 34px; border-top: 1px solid #d9e3de; color: #64756f; font-size: .92rem; }
.footer-brand { color: #19352f; font-size: 1rem; font-weight: 800; }
.footer-brand-block p { margin: 6px 0 0; }
@media (max-width: 640px) {
  .site-header, .vahti-main, .site-footer { width: min(100% - 32px, 1180px); }
  .site-header { padding: 18px 0 20px; }
  .vahti-main { padding-top: 16px; }
  .hero { padding: 28px 20px; border-radius: 14px; }
  .watch-form { grid-template-columns: 1fr; }
  .watch-form label, .watch-form label:first-of-type, .watch-form label:last-of-type, .watch-form button { grid-column: auto; }
  .site-footer { flex-direction: column; padding-top: 22px; }
}