/* /join, how to join BiteOut (28 Oct 2026): the heading, the join film and the
   same moves in words. On a phone they stack in that order, the film right
   under the heading; on a computer the film stands beside the words. The film's
   frame and button (.pxf) and the green closing block (.pxc) are partner.css's;
   tokens are site.css's. */

.jn__hero {
  padding: var(--space-24) var(--gutter) var(--space-48);
}

.jn__inner {
  display: grid;
  grid-template-areas:
    "head"
    "film"
    "how";
  gap: var(--space-24);
  max-width: var(--max-width);
  margin-inline: auto;
}

.jn__head {
  grid-area: head;
}

.jn__title {
  margin: var(--space-8) 0 0;
}

.jn__lede {
  margin: var(--space-8) 0 0;
}

.jn__film {
  grid-area: film;
  justify-self: center;
}

.jn__how {
  grid-area: how;
}

.jn__steps {
  display: grid;
  gap: var(--space-16);
  margin: 0;
  padding: 0;
  list-style: none;
}

.jn__step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.45;
  color: var(--text);
}

.jn__step .bo-step-n {
  flex: none;
}

.jn__step b {
  font-weight: 700;
}

.jn__badges {
  margin-top: var(--space-24);
}

.jn__plans {
  color: inherit;
  text-decoration: underline;
}

@media (min-width: 1024px) {
  .jn__hero {
    padding-block: var(--space-32) calc(var(--space-32) * 2);
  }

  .jn__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "head film"
      "how film";
    grid-template-rows: auto 1fr;
    column-gap: var(--space-48);
    row-gap: var(--space-32);
    align-items: start;
  }

  .jn__film {
    align-self: center;
    width: 320px;
  }
}