/* A. Single screen.

   The first screen is a composed grid, sized to the viewport: hero and window
   side by side, the four callouts one tight row beneath. It is the whole pitch
   at a glance on a laptop. Below it the page continues quietly, because the
   waitlist is reached by the button, not by scrolling past a wall. */

.masthead {
  padding: var(--space-3) var(--gutter);
  max-width: 96rem;
  margin-inline: auto;
}

.wordmark {
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ── The screen ─────────────────────────────────────────────────────── */
.screen {
  max-width: 96rem;
  margin-inline: auto;
  padding: 0 var(--gutter) var(--space-4);
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 60rem) {
  .screen {
    /* The masthead is one line; the rest of the first viewport is this grid. */
    min-height: calc(100svh - 3.75rem);
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: 1fr auto;
    align-items: center;
    column-gap: clamp(2rem, 4vw, 4rem);
    row-gap: var(--space-4);
  }
  .screen .callouts {
    grid-column: 1 / -1;
  }
}

.hero h1 {
  font-size: clamp(1.25rem, 0.85rem + 1.05vw, 1.8rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.012em;
}

.cta,
.waitlist button {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin-top: var(--space-4);
  padding: 0.7em 1.4em;
  border-radius: var(--radius);
  background: var(--fg);
  color: var(--bg);
  font-weight: 600;
  text-decoration: none;
  border: 0;
}

.cta:hover,
.waitlist button:hover {
  background: var(--user-700);
}

.product {
  margin: 0;
}

.product-frame {
  border-radius: 0.75rem;
  box-shadow: 0 0 0 1px var(--line), 0 1.5rem 3rem -1.5rem rgb(15 23 42 / 0.35);
}

/* ── Callouts: one tight row ────────────────────────────────────────── */
.callout-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-3);
}

.callout {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: none;
}

.callout-visual {
  height: 6.25rem;
  overflow: hidden;
  border-radius: 0.6rem;
  background: var(--bg-sunken);
  padding: 0.6rem;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent);
  mask-image: linear-gradient(to bottom, #000 72%, transparent);
}

.callout-visual .cx {
  zoom: 0.82;
}

.callout-label {
  font-size: var(--step-0);
  font-weight: 650;
}

.callout-line {
  margin-top: 0.2rem;
  color: var(--fg-muted);
  font-size: var(--step--1);
}

/* ── Below the fold ─────────────────────────────────────────────────── */
.problem,
.what,
.waitlist {
  max-width: 96rem;
  margin-inline: auto;
  padding: var(--space-5) var(--gutter);
  border-top: 1px solid var(--line);
}

.problem,
.what {
  display: grid;
  gap: var(--space-3) var(--space-5);
}

@media (min-width: 60rem) {
  .problem,
  .what {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  }
  .what .primitives {
    grid-column: 2;
  }
}

.problem h2,
.what h2,
.waitlist h2 {
  font-size: var(--step-1);
  font-weight: 650;
}

.problem-text {
  font-size: var(--step-2);
  line-height: 1.35;
  letter-spacing: -0.01em;
  max-width: 34ch;
}

.what-text {
  font-size: var(--step-1);
  line-height: 1.45;
  max-width: 46ch;
}

.primitives {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--space-3);
}

.primitive {
  max-width: none;
}

.primitive-name {
  font-size: var(--step--1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
  margin-bottom: 0.5rem;
}

/* ── Waitlist ───────────────────────────────────────────────────────── */
.waitlist {
  scroll-margin-top: var(--space-3);
}

.waitlist form {
  display: grid;
  gap: var(--space-3);
  max-width: 34rem;
  margin-top: var(--space-3);
}

.waitlist label {
  margin-bottom: 0.35rem;
}

.waitlist button {
  justify-self: start;
  margin-top: 0;
}

.foot {
  max-width: 96rem;
  margin-inline: auto;
  padding: var(--space-4) var(--gutter);
  border-top: 1px solid var(--line);
  color: var(--fg-muted);
  font-size: var(--step--1);
}