/* The question page (/start): step 1 of the flow. The page frame, heading and lead are flow.css; only its own parts are here. */
.st { padding-bottom: 64px; }
.st-plan { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; font-size: 14px; color: var(--muted); text-decoration: none; }
.st-plan span:first-child { padding: 3px 9px; border-radius: 999px; background: var(--iris-soft); font-weight: 600; color: var(--iris); }
.st-plan:hover { color: var(--ink); }
.st .st-plan + h1 { margin-top: 0; }
.st-box { position: relative; margin-top: 28px; }
.st-form { border: 1.5px solid var(--field-line); border-radius: 22px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.st-form:focus-within { border-color: var(--iris); box-shadow: 0 0 0 4px rgba(74, 58, 235, .15); }
.st-form textarea { display: block; width: 100%; min-height: 132px; padding: 20px 22px 8px; border: 0; border-radius: 22px 22px 0 0; background: none; font: 400 var(--fs-20)/1.4 var(--serif); color: var(--ink); resize: none; field-sizing: content; }
.st-form textarea:focus { outline: 0; }
.st-form textarea::placeholder { color: var(--muted); opacity: .75; }
.st-form__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px 14px 22px; }
.st-form__hint { flex: 1 1 200px; margin: 0; font-size: 14px; color: var(--muted); }
.st-form .dictation-panel { order: 3; margin: 0; }
.st-busy { border-radius: 22px; padding: 20px; }
.st-note { margin-left: 0; }
.st-examples { margin-top: 36px; }
.st .st-examples h2 { margin: 0; font: 600 var(--fs-12)/1.3 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.st-examples .group__detail { margin: 4px 0 12px; font-size: var(--fs-14); }
.st-examples__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.st-example { display: grid; gap: 2px; padding: 9px 14px; border: 1px solid var(--card-line); border-radius: 14px; background: #fff; text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.st-example:hover { border-color: var(--iris); background: var(--iris-soft); }
.st-example small { font-size: var(--fs-12); color: var(--muted); }
/* The examples are a help, not the action: lighter than the box above, which is where the eye should land. */
.st-example span { font-size: var(--fs-14); font-weight: 400; line-height: 1.35; color: var(--ink); }
.st-more { margin-top: 12px; }
.st-more summary { width: fit-content; padding: 6px 0; font-size: var(--fs-14); font-weight: 600; color: var(--iris); cursor: pointer; }
.st-more[open] summary { margin-bottom: 8px; }
@media (max-width: 640px) {
  .st-form textarea { padding: 16px 16px 6px; font-size: 19px; }
  .st-form__bar { padding: 8px 12px 12px 16px; }
  .st-form__bar .btn { flex: 1 1 100%; justify-content: center; order: 2; }
  .st-form__hint { flex-basis: 60%; }
  .st-examples__list { grid-template-columns: 1fr; }
}
.st-note svg { flex: none; width: 15px; height: 15px; }