/* Start with a question (flag home-questions; docs/design/home-questions/brief.md): the home page's outcome-led front
   door, between the Portal story and Good to know. Hidden unless the flag is on; laid out like Good to know (the title
   left, the list right), so the page keeps one rhythm. Void's own tokens and home-story.css's --hs-line and --hs-white.
   No motion; hover only in @media (hover: hover), a focus-visible twin beside it. */
.hs-ask { display: none; }
html[data-flag-home-questions="on"] .hs-ask { display: block; border-top: 1px solid var(--hs-line); padding-block: 72px; }
html[data-flag-home-questions="on"] .hs-ask-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px; }
html[data-flag-home-questions="on"] .hs-ask h2 { margin: 0; color: var(--hs-white); font: 700 34px/1.15 var(--font); letter-spacing: -0.015em; }
html[data-flag-home-questions="on"] .hs-ask-lede { margin: 12px 0 0; max-width: 34ch; color: var(--soft); line-height: 1.6; }
html[data-flag-home-questions="on"] .hs-ask-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
html[data-flag-home-questions="on"] .hs-ask-q { display: grid; grid-template-columns: minmax(0, 1fr) 20px; column-gap: 12px; align-items: start; padding-block: 18px; border-bottom: 1px solid var(--hs-line); color: inherit; text-decoration: none; }
html[data-flag-home-questions="on"] .hs-ask-t { color: var(--hs-white); font-weight: 600; }
html[data-flag-home-questions="on"] .hs-ask-d { grid-column: 1; margin-top: 6px; color: var(--soft); line-height: 1.5; font-size: 15px; }
html[data-flag-home-questions="on"] .hs-ask-q svg { grid-column: 2; grid-row: 1; width: 20px; height: 20px; margin-top: 2px; color: var(--sky); }
html[data-flag-home-questions="on"] .hs-ask-q:focus-visible { outline: 2px solid var(--sky); outline-offset: 4px; border-radius: 4px; }
@media (hover: hover) {
  html[data-flag-home-questions="on"] .hs-ask-q:hover .hs-ask-t { color: var(--sky); }
}
@media (max-width: 900px) {
  html[data-flag-home-questions="on"] .hs-ask { padding-block: 48px; }
  html[data-flag-home-questions="on"] .hs-ask-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  html[data-flag-home-questions="on"] .hs-ask h2 { font-size: 27px; }
  html[data-flag-home-questions="on"] .hs-ask-list { grid-template-columns: minmax(0, 1fr); }
}