/* 70, help (site/sections/70-help.html). Linked by scripts/build-home.mjs.
   The FAQ text lock, moved from the old closing-acts sheet unchanged in
   behaviour. The default state (no .vs-help__word or .vs-help__a-lead spans
   exist until js/acts/70-help.js runs) is plain, readable text: the no-JS
   floor. Once split, a row's words sit blurred and hidden until it locks
   (IntersectionObserver adds .is-locked once); opening the row (.is-open)
   locks the answer's opening sentence the same way. Reduced motion drops
   the blur and the per-word stagger and fades once instead.
   Desktop: the heading and the closing call to action hold the left
   column, the questions the right. */

.vs-help { border-top: 1px solid var(--vs-line); }

.vs-help__wrap {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  grid-template-rows: auto 1fr;
  gap: 0 clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.vs-help__title {
  grid-column: 1; grid-row: 1;
  margin: 0;
  font-family: var(--sc-font-display); font-weight: var(--vs-display-weight);
  font-size: var(--vs-h2); line-height: var(--sc-leading-tight);
  letter-spacing: var(--vs-display-track); text-wrap: balance;
}
.vs-help__list { grid-column: 2; grid-row: 1 / span 2; border-top: 1px solid var(--vs-line-strong); }
.vs-help__last {
  grid-column: 1; grid-row: 2;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--sc-3); margin: var(--sc-6) 0 0;
}
.vs-help__last-q { font-size: var(--sc-t-base); color: var(--sc-ink-soft); }

.vs-help__row { border-bottom: 1px solid var(--vs-line-strong); }
.vs-help__summary {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sc-4);
  min-height: 56px; padding-block: var(--sc-3);
  cursor: pointer; list-style: none;
}
.vs-help__summary::-webkit-details-marker { display: none; }
.vs-help__summary:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; border-radius: 2px; }
.vs-help__q {
  font-family: var(--sc-font-display); font-weight: var(--vs-display-weight);
  font-size: var(--sc-t-base); letter-spacing: -0.015em; color: var(--sc-ink);
}
/* The accent rule sits on the row's own hairline, under the question's first
   words: a marker, never a dash between the question and the icon. */
.vs-help__rule {
  position: absolute; left: 0; bottom: -1px;
  width: 2.5rem; height: 1px; background: var(--sc-accent);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--sc-d-slow) var(--sc-ease-out);
}
.vs-help__row.is-locked .vs-help__rule { transform: scaleX(1); }
.vs-help__icon { flex: none; position: relative; width: 1rem; height: 1rem; }
.vs-help__icon::before, .vs-help__icon::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  background: var(--sc-ink); border-radius: 1px;
}
.vs-help__icon::before { width: 100%; height: 1.5px; }
.vs-help__icon::after {
  width: 1.5px; height: 100%;
  transition: transform var(--sc-d-fast) var(--sc-ease-out);
}
.vs-help__row[open] .vs-help__icon::after { transform: scaleY(0); }
.vs-help__more { border-bottom: 1px solid var(--vs-line-strong); }
.vs-help__more > .vs-help__summary .vs-help__q { font-family: var(--sc-font-text); font-weight: 600; font-size: var(--sc-t-sm); }
.vs-help__more[open] > .vs-help__summary .vs-help__icon::after { transform: scaleY(0); }
.vs-help__more > .vs-help__row:last-child { border-bottom: 0; }

.vs-help__a { padding: 0 0 var(--sc-4); max-width: var(--sc-measure); }
.vs-help__a p {
  margin: 0; font-size: var(--sc-t-sm); line-height: var(--sc-leading-body); color: var(--sc-ink-soft);
}
.vs-help__a-lead { color: var(--sc-ink); }

.vs-help__word {
  display: inline-block;
  filter: blur(6px); opacity: 0;
  transition: filter var(--sc-d-slow) var(--sc-ease-out), opacity var(--sc-d-slow) var(--sc-ease-out);
  transition-delay: calc(var(--i, 0) * 24ms);
}
.vs-help__row.is-locked .vs-help__word { filter: blur(0); opacity: 1; }

.vs-help__a-lead {
  filter: blur(6px); opacity: 0;
  transition: filter var(--sc-d-slow) var(--sc-ease-out), opacity var(--sc-d-slow) var(--sc-ease-out);
}
.vs-help__row.is-open .vs-help__a-lead { filter: blur(0); opacity: 1; }

@media (max-width: 1023px) {
  .vs-help__wrap { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .vs-help__title { margin-bottom: var(--vs-head-gap); }
  .vs-help__title,
  .vs-help__list,
  .vs-help__last { grid-column: 1; grid-row: auto; }
  .vs-help__last { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  .vs-help__word, .vs-help__a-lead {
    filter: none;
    transition: opacity var(--sc-d-base) var(--sc-ease-out);
    transition-delay: 0ms;
  }
  .vs-help__rule { transition: none; }
}