/* sykloo marketing: teaser landing.
   Tokens live in ./colors_and_type.css.
   Components (.btn, .input, .badge, …) live in ./components.css
   and are lifted verbatim from the design system: do not duplicate
   or override component-level styling here. This file is page layout
   and copy typography only. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

html { min-height: 100%; }

body {
  min-height: 100vh;
  min-height: 100svh;
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: grid;
  padding: var(--s-8) var(--s-10);
}

/* ---- Main column ---- */

main {
  align-self: center;
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 9vh, 112px);
  padding: var(--s-12) 0;
}

.wordmark {
  color: var(--fg-1);
  line-height: 0;
}
.wordmark svg {
  display: block;
  width: clamp(300px, 38vw, 680px);
  height: auto;
}

/* ---- Copy stack ---- */

.copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero {
  margin: 0;
  max-width: 18ch;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(36px, 5.4vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--fg-1);
  text-wrap: pretty;
}
.hero__muted { color: var(--fg-3); }

.lede {
  margin: var(--s-6) 0 0;
  max-width: 38ch;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  color: var(--fg-2);
}

/* ---- Form layout (components themselves come from .input / .btn) ---- */

.form {
  margin: var(--s-10) 0 0;
  display: flex;
  align-items: stretch;
  gap: var(--s-3);
  width: 100%;
  max-width: 560px;
  flex-wrap: wrap;
}

.form__honey {
  position: absolute;
  left: -10000px;
}

.form .input { flex: 1 1 240px; }
.form .btn   { flex: 0 0 auto; }

/* ---- Narrow viewports ---- */

@media (max-width: 720px) {
  body {
    padding: var(--s-6) var(--s-5);
    align-content: center;
  }
  main { padding: var(--s-8) 0; gap: var(--s-12); }
  .form .btn { flex: 1 1 100%; }
}