/* Headz landing — one column of text on white. No build step, no dependencies,
   no external requests: the type is the system stack. */

:root {
  --ink: #111114;
  --ink-soft: #6b6b70;
  /* system blue pulled a touch deeper: #0A7CFF sits at 3.9:1 on white, under the
     4.5:1 AA floor for text this size. This reads the same and clears it. */
  --link: #0a6ce0;

  /* 430 / 34 / 31 is not a taste call: it is the one combination probed in the
     browser that reproduces the reference's line breaks exactly — the headline
     breaking after "your", the body after "friends" onto four lines. */
  --col: 430px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 72px 32px;
  background: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter",
               system-ui, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* One left-aligned column, centred in the viewport. Everything shares the same
   left edge — the wordmark, the copy, the video and the link. */
.page {
  width: 100%;
  max-width: var(--col);
}

.masthead { margin-bottom: 88px; }

.wordmark {
  margin: 0;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.byline {
  margin: 8px 0 0;
  font-size: 15px;
  color: var(--ink-soft);
}

.headline {
  margin: 0;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.16;
}

.lead {
  margin: 34px 0 0;
  font-size: 31px;
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: -0.005em;
}

/* Sized and shaped here rather than on the element, so swapping the placeholder
   <img> for the real <video> needs no CSS change. */
.media {
  display: block;
  width: 64%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin: 56px 0 0;
  border-radius: 14px;
  background: #efeff1;
}

.cta { margin: 68px 0 0; }

.download {
  font-size: 19px;
  color: var(--link);
  text-decoration: none;
}
.download:hover { text-decoration: underline; }
.download:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ── Narrow screens ────────────────────────────────────────────────────────
   The column already suits a phone, so this only tightens the vertical rhythm
   and lets the video take the full width — at 64% it would be a stamp. */

@media (max-width: 600px) {
  body { padding: 48px 24px; }
  .masthead { margin-bottom: 56px; }
  .wordmark { font-size: 32px; }
  .headline { font-size: 27px; }
  .lead { font-size: 23px; margin-top: 26px; }
  .media { width: 100%; margin-top: 40px; }
  .cta { margin-top: 48px; }
  .download { font-size: 17px; }
}