/* Red Kite brand tokens and type. Söhne is self-hosted, licensed to Red Kite. */
@font-face { font-family: 'Soehne'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/soehne-buch.woff2') format('woff2'); }
@font-face { font-family: 'Soehne'; font-weight: 400; font-style: italic; font-display: swap; src: url('/fonts/soehne-buch-kursiv.woff2') format('woff2'); }
@font-face { font-family: 'Soehne'; font-weight: 700; font-style: normal; font-display: swap; src: url('/fonts/soehne-halbfett.woff2') format('woff2'); }
@font-face { font-family: 'Soehne'; font-weight: 700; font-style: italic; font-display: swap; src: url('/fonts/soehne-halbfett-kursiv.woff2') format('woff2'); }
@font-face { font-family: 'Soehne'; font-weight: 800; font-style: normal; font-display: swap; src: url('/fonts/soehne-fett.woff2') format('woff2'); }
@font-face { font-family: 'Soehne'; font-weight: 800; font-style: italic; font-display: swap; src: url('/fonts/soehne-fett-kursiv.woff2') format('woff2'); }

:root {
  --navy: #09002E;
  --red: #EE255A;
  --red-dark: #D11A4B;
  --purple: #A37FCC;
  --lilac: #E9DFF2;
  --lilac-2: #F4EFF9;
  --lilac-3: #F8F4FB;
  --yellow: #EED325;
  --green: #B0D29D;
  --ink: #09002E;
  --ink-soft: #4A4462;
  --ink-muted: #7A748F;
  --line: #E4DCEE;
  --white: #fff;
  --radius-s: .3em;
  --radius-m: .5em;
  --radius-l: 1em;
  --font: 'Soehne', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --shadow: 0 10px 30px rgba(9, 0, 46, 0.08);
  --shadow-lg: 0 24px 60px rgba(9, 0, 46, 0.16);
  --ease: cubic-bezier(.2,.7,.2,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
img, svg, canvas { max-width: 100%; height: auto; display: block; }
/* Links match redkite.design: purple, bold, underlined below */
a { color: var(--purple); font-weight: 700; text-decoration: underline; text-underline-position: under; text-decoration-thickness: 1.5px; }
a:hover { color: var(--navy); text-decoration: none; }
/* Headings match redkite.design: Söhne extra bold italic, tight leading */
h1, h2, h3, h4 { font-weight: 800; font-style: italic; line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 .5em; color: var(--navy); text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 1.3rem + 2.8vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 1.15rem + 1.5vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.45rem); }
h4 { font-size: 1.1rem; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 700; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.muted { color: var(--ink-muted); }
.small { font-size: .9rem; }
.eyebrow { display: flex; align-items: center; gap: .6rem; font-size: 1.05rem; font-weight: 700; font-style: italic; color: var(--purple); margin-bottom: .9rem; }
.eyebrow::after { content: ''; width: 60px; height: 10px; background: currentColor; -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='4' fill='none'%3E%3Cpath fill='%23B593D4' d='M.005 2.228C.27-.01 17.22 1.29 20.892 1.29 52.602 1.29 60-.488 60 1.29S39.699 3.068 25.302 3.068-.261 4.468.005 2.228'/%3E%3C/svg%3E") center / 100% no-repeat; mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='4' fill='none'%3E%3Cpath fill='%23B593D4' d='M.005 2.228C.27-.01 17.22 1.29 20.892 1.29 52.602 1.29 60-.488 60 1.29S39.699 3.068 25.302 3.068-.261 4.468.005 2.228'/%3E%3C/svg%3E") center / 100% no-repeat; }
.lead { font-size: 1.2em; line-height: 1.5; color: var(--ink-soft); }

/* Buttons match redkite.design: red, small radius, bold, Title Case, sketchy arrow that swaps sides on hover */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  border: 2px solid transparent; border-radius: var(--radius-s);
  padding: .7em 1em; font-weight: 700; font-style: normal; font-size: 1rem; line-height: 1.5; text-transform: capitalize;
  text-decoration: none; cursor: pointer; transition: scale .5s var(--ease), filter .25s, background .15s, color .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { filter: brightness(1.05); scale: 1.025 1; text-decoration: none; }
.btn:active { scale: .99 1; }
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { color: #fff; }
.btn-secondary { background: var(--navy); color: #fff; }
.btn-secondary:hover { color: #fff; }
.btn-primary::before, .btn-primary::after, .btn-secondary::before, .btn-secondary::after {
  content: ''; display: flex; height: 1em; width: 1em; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='17' fill='none'%3E%3Cpath fill='%23EE255A' fill-rule='evenodd' d='M11.937 4.47c-1.551-1.064-2.973-2.04-2.954-2.792.084-3.274 8.677 5.173 8.677 6.749s-6.063 6.66-8.24 7.626c-1.159-1.344.719-2.548 2.733-3.84 1.427-.915 2.922-1.874 3.458-2.958-.334-.023-.751-.07-1.265-.13a64 64 0 0 0-7.901-.464c-.202 0-.556.043-.99.096-1.658.203-4.493.549-4.549-.82-.048-1.18 1.322-1.049 3.414-.848.967.093 2.088.2 3.294.2 2.732 0 6.266 0 8.054.503-.502-1.107-2.181-2.259-3.73-3.322' clip-rule='evenodd'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='17' fill='none'%3E%3Cpath fill='%23EE255A' fill-rule='evenodd' d='M11.937 4.47c-1.551-1.064-2.973-2.04-2.954-2.792.084-3.274 8.677 5.173 8.677 6.749s-6.063 6.66-8.24 7.626c-1.159-1.344.719-2.548 2.733-3.84 1.427-.915 2.922-1.874 3.458-2.958-.334-.023-.751-.07-1.265-.13a64 64 0 0 0-7.901-.464c-.202 0-.556.043-.99.096-1.658.203-4.493.549-4.549-.82-.048-1.18 1.322-1.049 3.414-.848.967.093 2.088.2 3.294.2 2.732 0 6.266 0 8.054.503-.502-1.107-2.181-2.259-3.73-3.322' clip-rule='evenodd'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: width .1s var(--ease), translate .5s var(--ease);
}
.btn-primary::after, .btn-secondary::after { width: 0; translate: -1em 0; }
.btn-primary:hover::before, .btn-secondary:hover::before { width: 0; translate: 1em 0; }
.btn-primary:hover::after, .btn-secondary:hover::after { width: 1em; translate: 0 0; }
.btn-ghost { background: transparent; color: var(--navy); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--navy); color: var(--navy); }
.btn-light { background: #fff; color: var(--navy); }
.btn-small { padding: .5em .85em; font-size: .9rem; }
.btn-large { padding: .8em 1.4em; font-size: 1.1rem; }
.btn[disabled], .btn.is-disabled { opacity: .5; cursor: not-allowed; }
.link-btn { background: none; border: 0; padding: 0; color: var(--purple); font-weight: 700; text-decoration: underline; text-underline-position: under; text-decoration-thickness: 1.5px; }
.link-btn:hover { color: var(--navy); text-decoration: none; }

/* Forms */
.field { display: block; margin-bottom: 1rem; }
.field > span { display: block; font-size: .9rem; font-weight: 700; margin-bottom: .35rem; color: var(--ink-soft); }
.field input, .field select, .field textarea, .input {
  width: 100%; border: 2px solid var(--line); border-radius: var(--radius-m); padding: .75rem 1rem; background: #fff;
  transition: border-color .15s, box-shadow .15s; font-size: 1rem;
}
.field input:focus, .field select:focus, .field textarea:focus, .input:focus { outline: 0; border-color: var(--purple); box-shadow: 0 0 0 4px rgba(163,127,204,.2); }
.field textarea { min-height: 120px; resize: vertical; }
.field .hint { font-size: .85rem; color: var(--ink-muted); margin-top: .3rem; display: block; font-weight: 400; }

.tick-list { list-style: none; padding: 0; margin: 0 0 1em; }
.tick-list li { position: relative; padding-left: 1.7em; margin-bottom: .45em; }
.tick-list li::before { content: ''; position: absolute; left: 0; top: .42em; width: 1.05em; height: 1.05em; border-radius: 50%; background: var(--lilac); }
.tick-list li::after { content: ''; position: absolute; left: .32em; top: .6em; width: .35em; height: .6em; border: solid var(--navy); border-width: 0 2px 2px 0; transform: rotate(45deg); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
