/* Start page: flow figures (src/vignettes/start/*). Scoped to .page-start. */

/* the intro gets a little more room: the stream column sits inside it */
@media (min-width: 901px) { .page-start .formgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } }

/* "How it starts": stream column beside the list. The list keeps its numbers (they read without the figure). */
.page-start .howto-wrap { --pathw: clamp(96px, 9.5vw, 150px); display: grid; grid-template-columns: var(--pathw) minmax(0, 1fr); column-gap: var(--space-2); margin-top: var(--space-5); }
.page-start .howto-wrap .howto { margin: 0; padding: 4.25rem 0 3.25rem 1.3rem; }
.page-start .vig--path { align-self: stretch; min-height: 320px; }

/* the intro stays beside the form while it is filled, where there is height for it */
@media (min-width: 901px) and (min-height: 780px) {
  .page-start .formgrid__intro { position: sticky; top: 88px; }
}

/* "Straight answers": a plumb line in the margin, one bead per question */
.page-start .faq-wrap { display: grid; grid-template-columns: 56px minmax(0, 52rem); column-gap: var(--space-4); }
.page-start .vig--answers { align-self: stretch; min-height: 200px; }

@media (max-width: 900px) {
  .page-start .howto-wrap { --pathw: 76px; column-gap: var(--space-1); }
  .page-start .howto-wrap .howto { padding: 4.5rem 0 3.25rem 1.2rem; gap: var(--space-6); }
}
@media (min-width: 600px) and (max-width: 900px) { .page-start .howto-wrap { --pathw: 112px; } }
@media (max-width: 760px) {
  .page-start .faq-wrap { grid-template-columns: 34px minmax(0, 1fr); column-gap: var(--space-3); }
}

/* without the figures (?nogl, no WebGL2) the columns fold away */
.no-vig .page-start .howto-wrap, .no-vig .page-start .faq-wrap { grid-template-columns: minmax(0, 1fr); }
.no-vig .page-start .howto-wrap .howto { padding-top: 0; padding-bottom: 0; }