/* Handoff — a desktop study. The two column story and the full width sheets
   come from sweep.css and the hero and meta list from lull.css; this file only
   adds the screen blocks, because a 1440 wide window cannot sit in the
   alternating phone layout the app studies use. */

.hf-shot {
  margin-top: clamp(40px, 4.5vw, 64px);
}

.hf-shot + .hf-shot {
  padding-top: clamp(40px, 4.5vw, 64px);
  border-top: 1px solid var(--border-soft, #efefef);
}

.hf-shot h3 {
  margin: 0 0 14px;
  color: var(--text-light-1);
  font-family: var(--font-display);
  font-size: var(--h5);
  font-weight: var(--fw-semibold);
  letter-spacing: -.02em;
  line-height: 1.2;
}

.hf-shot p {
  max-width: 720px;
  margin: 0;
  color: var(--text-light-2);
  font-size: var(--text-m);
  line-height: 1.65;
}

.hf-shot figure {
  margin: clamp(22px, 2.6vw, 34px) 0 0;
}

/* the screens are flat exports of a light interface, so they need an edge and
   a shadow to lift off the white page */
.hf-shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #E7E5E3;
  border-radius: 10px;
  box-shadow: 0 16px 38px rgba(30, 31, 33, .07);
}

/* the system sheets are drawn on transparency and carry their own spacing */
.hf-figure img { border-radius: 0; }

@media (max-width: 680px) {
  .hf-shot p { font-size: var(--text-r, 16px); }
  .hf-shot img { border-radius: 8px; }
}