/* The questions page (/xx/questions/), alternative A, approved on 28 October 2026 (review/redesign/pages/).
   The questions in four groups as an accordion with one "Show all answers" control, after the GOV.UK accordion
   (design-system.service.gov.uk/components/accordion/): buttons inside headings, full-width hairline rows, show-all above
   the list. The closing band carries the survey and the "Keep me informed" form (web/interest.js).
   Header, footer, phone survey bar and reveal safety: web/site.css and web/site.js. Colours only from tokens.css. */
:root { --sign: 32px; }
/* ---------- Page head ---------- */
.page-head { padding: var(--cap-space-8) 0 var(--cap-space-7); }
.page-head h1 { font: var(--cap-text-display); color: var(--cap-ink); }
.page-head h1::after { content: ""; display: block; width: 48px; height: 3px; margin-top: var(--cap-space-5); background: var(--cap-turquoise); }

/* ---------- Layout: contents on the left (sticky on wide screens), the questions on the right ---------- */
.qa-layout { display: grid; grid-template-columns: 264px minmax(0, 1fr); column-gap: var(--cap-space-8); align-items: start; padding-bottom: var(--cap-space-8); }
.qa-layout > .blk-src { position: sticky; top: var(--cap-space-5); }
main:focus { outline: none; }
.toc-head { font: var(--cap-text-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cap-slate); }
.toc ul { list-style: none; margin: var(--cap-space-3) 0 0; padding: 0; border-left: 1px solid var(--cap-ink-20); }
.toc a { display: flex; align-items: center; min-height: 44px; padding: 8px 0 8px var(--cap-space-4); margin-left: -1px; border-left: 3px solid transparent; font: 600 15px/22px var(--cap-font-sans); color: var(--cap-ink); text-decoration: none; }
.toc a:hover { color: var(--cap-turquoise-deep); border-left-color: var(--cap-ink-20); }
.toc a[aria-current="location"] { border-left-color: var(--cap-turquoise); }
.showall { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; margin-top: var(--cap-space-5); padding: 12px 20px 12px 16px; }
.showall .sign { --sign: 20px; }
.showall[hidden] { display: none; }

/* ---------- Groups and questions ---------- */
.qa-groups > .blk-src + .blk-src { margin-top: var(--cap-space-8); }
.qa-group h2 { font: var(--cap-text-h2); color: var(--cap-ink); scroll-margin-top: var(--cap-space-5); }
.qa-list { list-style: none; margin: var(--cap-space-4) 0 0; padding: 0; border-bottom: 1px solid var(--cap-ink-20); }
.qa { border-top: 1px solid var(--cap-ink-20); scroll-margin-top: var(--cap-space-5); }
.qa h3 { font: var(--cap-text-h3); }
.qa-btn { display: flex; align-items: center; justify-content: space-between; gap: var(--cap-space-5); width: 100%; min-height: 72px; padding: 20px 0; border: 0; background: transparent; color: var(--cap-ink); font: inherit; text-align: left; cursor: pointer; }
.qa-btn:focus-visible { outline: 2px solid var(--cap-turquoise-deep); outline-offset: 4px; }
.qa-q { text-wrap: pretty; }
@media (hover: hover) and (pointer: fine) {
  .qa-btn:hover .qa-q { color: var(--cap-turquoise-deep); }
  .qa-btn:hover .sign { border-color: var(--cap-turquoise-deep); }
}

/* The sign: a square with a plus; open, an ink square with a white minus */
.sign { position: relative; flex: none; width: var(--sign); height: var(--sign); border: 1.5px solid var(--cap-ink); background: var(--cap-white); transition: background-color 160ms ease, border-color 160ms ease; }
.sign::before, .sign::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--cap-ink); transition: transform 200ms var(--ease-out), background-color 160ms ease; }
.sign::after { transform: rotate(90deg); }
.showall .sign::before, .showall .sign::after { width: 10px; margin-left: -5px; }
[aria-expanded="true"] > .sign { background: var(--cap-ink); }
[aria-expanded="true"] > .sign::before, [aria-expanded="true"] > .sign::after { background: var(--cap-white); }
[aria-expanded="true"] > .sign::after { transform: rotate(0deg); }
.showall:hover .sign { border-color: var(--cap-ink); }

/* The answer: no padding on the panel itself, so a closed panel takes no room (hidden="until-found" keeps it findable) */
.qa-body { padding: 0 calc(var(--sign) + var(--cap-space-5)) var(--cap-space-6) 0; }
.qa-body > p { max-width: 40em; padding-left: var(--cap-space-5); border-left: 3px solid var(--cap-turquoise); text-wrap: pretty; }
.qa-src { margin-top: var(--cap-space-4); padding-left: calc(var(--cap-space-5) + 3px); }
.qa-src h4 { margin: 0; font: var(--cap-text-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cap-slate); }
.qa-src ul { list-style: none; margin: var(--cap-space-1) 0 0; padding: 0; }
/* Inline, so the external-link icon follows the last word when the title wraps; the padding keeps a 44 px target */
.qa-src li + li { margin-top: -4px; }
.qa-src a { display: inline-block; padding: 10px 0; font: var(--cap-text-small); }
.qa-src a svg { display: inline; margin-left: 6px; vertical-align: -1px; }
.nowrap { white-space: nowrap; }

/* A route from each group to the page that tells more */
.qa-more { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: var(--cap-space-3); font: 600 15px/22px var(--cap-font-sans); }
.qa-more svg { flex: none; transition: transform 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .qa-more:hover svg { transform: translateX(3px); } }

/* ---------- Closing band: the survey on the left, "Keep me informed" on the right (light ground, as reviewed for home block 7 B) ---------- */
.closing { background: var(--cap-light); padding: 88px 0; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px 80px; align-items: start; }
.b-kicker { display: flex; align-items: center; gap: 12px; font: var(--cap-text-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cap-slate); }
.b-kicker::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--cap-turquoise); }
.closing h2 { font: var(--cap-text-h1); color: var(--cap-ink); margin-top: 20px; text-wrap: balance; }
.b-lede { margin-top: var(--cap-space-4); max-width: 30em; }
.b-survey { padding-top: 8px; }
.hero-cta { display: inline-flex; align-items: center; gap: 14px; min-height: 56px; margin-top: 28px; padding: 18px 32px; font: 600 17px/20px var(--cap-font-sans); text-decoration: none; color: var(--cap-white); }
.hero-cta svg { flex: none; transition: transform 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .hero-cta:hover svg { transform: translateX(3px); } }

.interest { background: var(--cap-white); padding: 32px 32px 36px; --cap-cut: 24px; clip-path: polygon(0 0, calc(100% - var(--cap-cut)) 0, 100% var(--cap-cut), 100% 100%, 0 100%); }
.interest h3 { font: var(--cap-text-h3); color: var(--cap-ink); }
.interest-text { margin-top: var(--cap-space-2); font: var(--cap-text-small); color: var(--cap-slate); }
.i-form { margin-top: var(--cap-space-5); }
.i-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.i-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.i-field.wide { grid-column: 1 / -1; }
.i-field label { font: 600 15px/20px var(--cap-font-sans); color: var(--cap-ink); }
.i-field .cap-input { width: 100%; min-height: 48px; }
.i-field .cap-input::placeholder { color: var(--cap-slate); opacity: 1; }
.i-required { font: var(--cap-text-small); color: var(--cap-slate); margin-bottom: var(--cap-space-4); }
.i-consent { display: grid; grid-template-columns: 44px 1fr; gap: 0; align-items: start; margin-top: var(--cap-space-4); font: var(--cap-text-small); color: var(--cap-slate); }
/* The box: a 44 px target (12 px of transparent border) around a 20 px square, ink when ticked */
.i-consent input { -webkit-appearance: none; appearance: none; position: relative; width: 44px; height: 44px; margin: -10px 0 0 -12px; border: 12px solid transparent; background: var(--cap-white) padding-box; box-shadow: inset 0 0 0 1.5px var(--cap-ink); border-radius: 0; cursor: pointer; }
.i-consent input:checked { background-color: var(--cap-ink); }
.i-consent input:checked::before { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid var(--cap-white); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.i-consent input:focus-visible { outline: 2px solid var(--cap-turquoise-deep); outline-offset: -10px; }
.i-consent label { cursor: pointer; }
.i-consent-text a { display: inline-flex; align-items: center; min-height: 44px; margin-top: -10px; margin-bottom: -10px; font-weight: 600; text-underline-offset: 3px; }
.i-msg { display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 0; font: var(--cap-text-small); font-weight: 700; color: var(--cap-ink); }
.i-msg:empty { display: none; }
.i-msg::before { content: "!"; content: "!" / ""; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-top: 3px; background: var(--cap-ink); color: var(--cap-white); font: 700 12px/1 var(--cap-font-sans); }
.i-consent .i-msg { margin-top: 6px; }
.i-form .cap-button { display: inline-flex; align-items: center; min-height: 48px; margin-top: var(--cap-space-5); padding: 14px 24px; }
.i-field .cap-input[aria-invalid="true"] { border: 2px solid var(--cap-ink); padding: 9px 13px 9px 17px; box-shadow: inset 4px 0 0 var(--cap-ink); }
.i-field .cap-input[aria-invalid="true"]:focus-visible { border-color: var(--cap-turquoise-deep); }
.i-consent:has(input[aria-invalid="true"]) label { color: var(--cap-ink); font-weight: 700; }
.i-consent input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--cap-ink); outline: 2px solid var(--cap-ink); outline-offset: -10px; }
/* Focus on the invalid box: the turquoise ring, 4 px off the square (the 12 px border is the hit area) */
.i-consent input[aria-invalid="true"]:focus-visible { outline-color: var(--cap-turquoise-deep); outline-offset: -8px; }
.i-done { margin-top: var(--cap-space-4); font: 600 15px/24px var(--cap-font-sans); color: var(--cap-ink); }
.i-done:empty { display: none; }
.i-done:focus { outline: none; }
.i-error { margin-bottom: var(--cap-space-4); font: 600 15px/24px var(--cap-font-sans); color: var(--cap-ink); border-left: 4px solid var(--cap-ink); padding-left: 12px; }
.i-error:empty { display: none; }

/* ---------- Entry motion: once, CSS only (an observer only adds .is-in). All done by 1.2 s ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal [data-block]:not(.is-in) .rv { opacity: 0; }
  [data-block].is-in .rv { animation: rise 520ms var(--ease-out) both; }
  [data-block].is-in .rv:nth-child(2) { animation-delay: 60ms; }
  [data-block].is-in .rv:nth-child(3) { animation-delay: 120ms; }
  [data-block].is-in .rv:nth-child(4) { animation-delay: 180ms; }
  [data-block].is-in .rv:nth-child(5) { animation-delay: 240ms; }
  [data-block].is-in .rv:nth-child(6) { animation-delay: 300ms; }
  .page-head.is-in h1::after { animation: draw-x 600ms var(--ease-out) 200ms both; transform-origin: left center; }
  .js-reveal .page-head:not(.is-in) h1::after { transform: scaleX(0); }
  [data-block].is-in .toc.rv { animation-delay: 120ms; }
  [data-block].is-in .showall.rv { animation-delay: 180ms; }
  [data-block].is-in .interest.rv { animation-delay: 160ms; }
}
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes draw-x { from { transform: scaleX(0); } to { transform: none; } }

/* ---------- Under 1024 px: contents above the questions ---------- */
@media (max-width: 1023px) {
  .qa-layout { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
  .qa-layout > .blk-src { position: static; }
  .toc-wrap { margin-bottom: var(--cap-space-7); }
  .split { grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- Phone ---------- */
@media (max-width: 767px) {
  :root { --sign: 28px; }
  .page-head { padding: var(--cap-space-6) 0 var(--cap-space-5); }
  .page-head h1::after { margin-top: var(--cap-space-4); }
  .qa-layout { padding-bottom: var(--cap-space-7); }
  .toc-wrap { margin-bottom: var(--cap-space-6); }
  .showall { display: flex; width: 100%; justify-content: center; }
  .qa-groups > .blk-src + .blk-src { margin-top: var(--cap-space-7); }
  .qa-btn { min-height: 64px; padding: 16px 0; gap: var(--cap-space-4); align-items: flex-start; }
  .qa-btn .sign { margin-top: 1px; }
  .qa-body { padding: 0 0 var(--cap-space-5); }
  .qa-body > p { padding-left: var(--cap-space-4); }
  .qa-src { padding-left: calc(var(--cap-space-4) + 3px); }
  .closing { padding: 56px 0 0; }
  .hero-cta { display: flex; width: 100%; justify-content: center; padding: 18px 16px; margin-top: var(--cap-space-5); }
  .interest { padding: 24px 16px 28px; margin: 0 -16px; clip-path: none; }
  .i-fields { grid-template-columns: 1fr; }
  .i-form .cap-button { display: flex; width: 100%; justify-content: center; }
}

/* Reduced motion: nothing moves, no animations and no transitions */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .cap-button:active, a:hover svg, a:focus-visible svg { transform: none !important; }
}
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }