/* Share gate — built from the system (no comp): eyebrow + Display/3 + an underline input like the footer invite. */
.share-gate { padding-block: 113px var(--space-160); min-height: calc(100svh - var(--nav-height) - 290px); align-content: start; }
.share-gate > * { grid-column: text; }
.share-gate__eyebrow { margin-bottom: var(--space-40); }
.share-gate__title { max-width: 12em; }
.share-gate__message { margin-top: var(--space-24); color: var(--ink-primary); }
.share-gate__form { margin-top: var(--space-48); display: grid; gap: var(--space-12); max-width: 520px; }
.share-gate__row { display: flex; gap: 15px; align-items: flex-end; min-width: 0; } /* a grid item: without this the form's track grows to the row's min-content */
.share-gate__input {
  flex: 1; min-width: 0; /* an input's own minimum is ~260px; the row must be able to shrink on a phone */
  height: 44px; padding: 0; border: 0; border-bottom: 1px solid var(--border-strong); border-radius: 0;
  background: transparent; outline: 0;
  font-family: var(--font-ui); font-size: var(--fs-label-lg); letter-spacing: 0.02em;
}
.share-gate__input:focus { border-bottom-width: 2px; }
.share-gate__help { margin-top: var(--space-8); }
.share-gate p .btn { margin-top: var(--space-40); }

@media (max-width: 1023px) {
  .share-gate { padding-block: var(--space-64) var(--space-80); min-height: 0; }
}
/* Phones: the text column is 167px wide there, and the input row needs 365, so the gate takes
   the content column (mobile experience, 2026-09-30; the row ran off the screen at 375). */
@media (max-width: 767px) {
  .share-gate > * { grid-column: content; }
}