/* Get started (/start) and Thank you (/thank-you), direction B, loaded only by those two pages.
   Holds: the hero's side column (lede, program choice, portal button), the program chips, the
   steps band spacing (the steps themselves use .b-time from css/b.css), the closing row, and the
   thank-you page's three-step variant. Shared system: css/b.css. */

/* ── Hero ── */
.st-hero .ph-title { max-width: 11ch; }
.st-side { display: grid; gap: 26px; }
.st-side .ph-lede { margin: 0; }
.st-go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.st-go small { font-size: 14.5px; color: #50545B; }
.st-go .link-ul { display: inline-block; padding: 12px 0 4px; }
@media (min-width: 1024px) { .st-side { margin-bottom: 10px; } }

/* ── Program choice: three chips, one pressed ── */
.st-pick { margin: 0; padding: 0; border: 0; min-width: 0; }
.st-pick legend { padding: 0; margin-bottom: 10px; font-size: 14px; font-weight: 600; color: var(--stone); }
.st-pick-row { display: flex; flex-wrap: wrap; gap: 8px; }
.st-chip { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(22, 26, 34, .22); background: rgba(255, 255, 255, .55);
  font: inherit; font-size: 15.5px; font-weight: 500; color: var(--ink); cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.st-chip:hover { border-color: var(--ink); background: #fff; }
.st-chip[aria-pressed="true"] { background: #fff; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); font-weight: 600; } /* chosen, but never mistaken for the dark portal button under it */
.st-chip:focus-visible { outline: 2px solid var(--ember-dark); outline-offset: 3px; }

/* ── Steps ── */
.st-steps { padding-top: clamp(48px, 6vw, 80px); }
.st-steps .b-time { margin-top: 0; }
.st-name { font-weight: 600; color: var(--ink); }

/* ── Closing row ── */
.st-end { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(72px, 9vw, 128px); display: grid; gap: 22px; }
.st-end-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 32px; padding-top: 32px; border-top: 1px solid var(--rule); }
.st-end-row p { font-size: 16px; color: var(--stone); }

/* ── Thank you: three next steps ── */
.st-next { padding-bottom: clamp(72px, 9vw, 128px); }
.st-next-title { font-size: clamp(28px, 2.6vw, 36px); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 40px; }
@media (min-width: 900px) { .st-three { grid-template-columns: repeat(3, 1fr); } }
.st-urgent { margin-top: 44px; }