/* The survey page (/xx/survey/), alternative A, approved on 28 October 2026 (review/redesign/pages/).
   The focused survey, after the ONS Design System, the system behind the Census 2021 online questionnaire
   (service-manual.ons.gov.uk): a short start text, then one calm centred column, one section per screen, large bordered
   answers, one Continue button, and a confirmation panel at the end. web/app.js draws the questions into this page.
   Header and footer: web/site.css (this page has no phone survey bar: the survey itself is the page). Colours only from tokens.css. */
:root {
  --col: 760px;      /* the one reading column of the page */
  --hang: 64px;      /* question numbers hang in the margin, left of the column */
}
/* A control that takes focus is never left under the sticky section bar (its height plus a little air).
   No bar sits at the bottom of this page, so there is no bottom padding to keep. */
html { scroll-padding-top: 104px; }
@media (max-width: 1023px) { html { scroll-padding-top: 88px; } }
@media (max-width: 767px) { html { scroll-padding-bottom: 0; } }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
/* The legend floats so it sits inside the fieldset's padding, under the rule, like any other line */
legend { float: left; width: 100%; padding: 0; margin-bottom: var(--cap-space-2); }
legend + * { clear: both; }
.q:not(:has(.q-hint:not([hidden]))) legend { margin-bottom: var(--cap-space-4); }
legend + .q-hint, legend + textarea.cap-input, legend + .opts { margin-top: 0 !important; }
.q-hint[hidden] + textarea.cap-input, .q-hint[hidden] + .opts { margin-top: 0 !important; clear: both; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h4 { margin: 0; }

/* Preview and draft notices (local copies without an endpoint; draft translations) */
.notice { font: var(--cap-text-small); text-align: center; padding: 8px 16px; }
.notice[hidden], .notice [hidden] { display: none; }
.notice-draft { color: var(--cap-gold); }
.noscript { margin: 0; padding: 24px 0; }

/* ---------- The one column ---------- */
.col { max-width: var(--col); margin: 0 auto; }

/* ---------- Start: what the survey is for, the report offer and the privacy line ---------- */
.start { background: var(--cap-light); padding: var(--cap-space-8) 0; border-bottom: 1px solid var(--cap-ink-20); }
.kicker { display: flex; align-items: center; gap: 12px; font: var(--cap-text-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cap-slate); }
.kicker::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--cap-turquoise); }
.start h1 { margin-top: 20px; font: var(--cap-text-display); color: var(--cap-ink); text-wrap: balance; }
.start-lede { margin-top: var(--cap-space-4); max-width: 36em; color: var(--cap-ink); }
/* The purpose, set as on the home page (block 2): serif, with the turquoise rule */
.start-why { margin-top: var(--cap-space-6); padding-left: var(--cap-space-5); border-left: 3px solid var(--cap-turquoise); font: var(--cap-text-h3); color: var(--cap-ink); text-wrap: pretty; }

/* The founding report: the cover as a small object beside the offer. The cover holds the section's one cut */
.offer { margin-top: var(--cap-space-6); display: grid; grid-template-columns: 152px minmax(0, 1fr); gap: var(--cap-space-5); align-items: start; padding: var(--cap-space-5); background: var(--cap-white); border: 1px solid var(--cap-ink-20); }
.cover { --cap-cut: 16px; aspect-ratio: 210 / 297; display: flex; flex-direction: column; padding: 14px 12px 14px; background: var(--cap-ink); color: var(--cap-white); }
.cover img { width: 112px; height: auto; }
.cover-foot { margin-top: auto; }
.cover-rule { height: 1px; background: var(--cap-ink-60); transform-origin: left center; }
.cover-title { margin-top: var(--cap-space-2); font: 600 17px/22px var(--cap-font-serif); color: var(--cap-white); }
.cover-year { margin-top: var(--cap-space-1); font: 600 15px/20px var(--cap-font-serif); color: var(--cap-gold); }
.offer h2 { font: var(--cap-text-h3); color: var(--cap-ink); }
.offer-text { margin-top: var(--cap-space-2); font: var(--cap-text-small); color: var(--cap-ink); text-wrap: pretty; }
.offer-strong { margin-top: var(--cap-space-3); padding-top: var(--cap-space-3); border-top: 1px solid var(--cap-ink-20); font: var(--cap-text-body); font-weight: 700; color: var(--cap-ink); text-wrap: pretty; }

/* Privacy line with a padlock, as on census screens */
.use { margin-top: var(--cap-space-5); display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; font: var(--cap-text-small); color: var(--cap-slate); }
.use svg { margin-top: 2px; color: var(--cap-ink); }
.use a { font-weight: 600; white-space: nowrap; }

/* ---------- The survey sheet ---------- */
.survey { padding: var(--cap-space-7) 0 var(--cap-space-8); }
.screen + .screen { margin-top: calc(var(--cap-space-8) + var(--cap-space-6)); }

/* Progress by section: five segments, sticky while a long section scrolls */
.progress-wrap { position: sticky; top: 0; z-index: 5; background: var(--cap-white); padding: var(--cap-space-4) 0 var(--cap-space-4); border-bottom: 1px solid var(--cap-ink-20); }
.step-line { display: none; }
/* From 1024 px the bar reaches into the margin where the question numbers hang, so each label holds on two lines at most */
@media (min-width: 1024px) { .progress-wrap { margin: 0 calc(-1 * var(--hang)); } }
.progress ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--cap-space-2); }
.progress li { min-width: 0; }
.seg-bar { display: block; height: 6px; background: var(--cap-ink-20); overflow: hidden; }
.seg-fill { display: block; height: 100%; width: 100%; background: var(--cap-turquoise); transform-origin: left center; transform: scaleX(var(--f, 0)); }
.is-done .seg-fill { background: var(--cap-ink); }
.seg-text { display: flex; gap: 6px; margin-top: var(--cap-space-2); font: 500 14px/20px var(--cap-font-sans); color: var(--cap-slate); }
.seg-no { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }
.seg-no svg { display: block; margin-top: 3px; color: var(--cap-ink); }
.progress [aria-current="step"] .seg-text { color: var(--cap-ink); font-weight: 700; }
.is-done .seg-text { color: var(--cap-ink); }

/* Section heading */
.sec-head { padding-top: var(--cap-space-6); }
.sec-head .kicker::before { display: none; }
.sec-head h2 { margin-top: var(--cap-space-2); font: var(--cap-text-h1); color: var(--cap-ink); text-wrap: balance; }
.sec-head p:last-child { margin-top: var(--cap-space-2); color: var(--cap-slate); }

/* One question */
.q { position: relative; margin-top: var(--cap-space-7); }
.q + .q { padding-top: var(--cap-space-7); border-top: 1px solid var(--cap-ink-20); }
.q-no { position: absolute; left: calc(-1 * var(--hang)); top: 3px; font: 700 15px/24px var(--cap-font-sans); color: var(--cap-turquoise-deep); font-variant-numeric: tabular-nums; }
.q + .q .q-no { top: calc(var(--cap-space-7) + 3px); }
.q-text { display: block; font: var(--cap-text-h3); color: var(--cap-ink); text-wrap: pretty; }
.q-optional { margin-left: 10px; font: 600 14px/20px var(--cap-font-sans); color: var(--cap-slate); vertical-align: 2px; }
.q-hint { margin-top: var(--cap-space-2); font: var(--cap-text-small); color: var(--cap-slate); max-width: 40em; }
.counter { font-weight: 700; color: var(--cap-ink); }
.counter.full { color: var(--cap-ink); }

/* Answers: large bordered targets, the whole row is the target */
.opts { display: grid; gap: var(--cap-space-2); margin-top: var(--cap-space-4); }
.opts.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opt { position: relative; display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 14px 16px; border: 1px solid var(--cap-ink-60); background: var(--cap-white); font: 500 17px/24px var(--cap-font-sans); color: var(--cap-ink); cursor: pointer; transition: border-color 120ms ease, background-color 120ms ease; }
.opt input { position: absolute; left: 16px; top: 50%; width: 24px; height: 24px; margin: -12px 0 0; opacity: 0; cursor: pointer; }
.mark { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid var(--cap-ink); background: var(--cap-white); color: var(--cap-white); }
.mark svg { opacity: 0; }
/* A choice of one is a circle, a choice of several a square, as on every census form */
.radio .mark { border-radius: 50%; color: var(--cap-ink); }
.opt:has(input:checked) { border-color: var(--cap-ink); box-shadow: inset 0 0 0 1px var(--cap-ink); background: var(--cap-turquoise-12); }
.opt input:checked + .mark svg { opacity: 1; }
.check input:checked + .mark { background: var(--cap-ink); }
.opt:has(input:focus-visible) { outline: 2px solid var(--cap-turquoise-deep); outline-offset: 2px; }
.opt:has(input:disabled) { color: var(--cap-slate); border-color: var(--cap-ink-20); background: var(--cap-white); cursor: not-allowed; }
.opt:has(input:disabled) .mark { border-color: var(--cap-ink-20); }
@media (hover: hover) and (pointer: fine) {
  .opt:hover { border-color: var(--cap-ink); }
  .opt:has(input:disabled):hover { border-color: var(--cap-ink-20); }
}

/* Statements on one scale: one row of four answers per statement, "I don't know" apart */
.matrix { margin-top: var(--cap-space-4); }
.mx-head { display: none; }
.mx-row { padding: var(--cap-space-5) 0; border-top: 1px solid var(--cap-ink-20); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 1.25fr); column-gap: var(--cap-space-3); }
.mx-text { grid-column: 1 / -1; display: grid; grid-template-columns: 28px minmax(0, 1fr); font: 600 17px/26px var(--cap-font-sans); color: var(--cap-ink); text-wrap: pretty; }
.mx-i { font-weight: 700; color: var(--cap-slate); }
.mx-miss { display: none; }
.mx-scale { margin-top: var(--cap-space-3); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mx-cell { position: relative; display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 8px 6px; border: 1px solid var(--cap-ink-60); background: var(--cap-white); font: 600 15px/20px var(--cap-font-sans); color: var(--cap-ink); text-align: center; cursor: pointer; transition: background-color 120ms ease; }
.mx-scale .mx-cell + .mx-cell { margin-left: -1px; }
.mx-row > .mx-dk { margin-top: var(--cap-space-3); border-style: dashed; color: var(--cap-slate); }
.mx-cell input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.mx-dot { display: none; }
.mx-cell:has(input:checked) { z-index: 1; background: var(--cap-ink); border-color: var(--cap-ink); color: var(--cap-white); }
.mx-cell:has(input:focus-visible) { z-index: 2; outline: 2px solid var(--cap-turquoise-deep); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .mx-cell:hover { z-index: 1; border-color: var(--cap-ink); }
  .mx-cell:has(input:checked):hover { background: var(--cap-ink); }
}

/* Open answer */
.q textarea.cap-input { display: block; width: 100%; min-height: 136px; margin-top: var(--cap-space-4); resize: vertical; }
.cap-input::placeholder { color: var(--cap-slate); opacity: 1; }
.consent { position: relative; display: flex; align-items: flex-start; gap: 14px; min-height: 56px; margin-top: var(--cap-space-3); padding: 14px 16px; border: 1px solid var(--cap-ink-60); background: var(--cap-white); font: var(--cap-text-small); color: var(--cap-ink); cursor: pointer; }
.consent .mark { margin-top: 0; }
.consent input { position: absolute; left: 16px; top: 14px; width: 24px; height: 24px; margin: 0; opacity: 0; cursor: pointer; }
.consent input:checked + .mark { background: var(--cap-ink); }
.consent input:checked + .mark svg { opacity: 1; }
.consent:has(input:focus-visible) { outline: 2px solid var(--cap-turquoise-deep); outline-offset: 2px; }
.consent:has(input:checked) { border-color: var(--cap-ink); box-shadow: inset 0 0 0 1px var(--cap-ink); }
/* Error states, as on the live survey: the message under the question or field, the question text and the
   unchosen answers in gold-deep (gold text for white grounds), and one summary line at the top of the section */
.err { display: flex; gap: 8px; align-items: flex-start; margin: var(--cap-space-3) 0 0; color: var(--cap-gold-deep); font: var(--cap-text-small); font-weight: 600; }
.err:empty { display: none; }
.err svg { flex: none; margin-top: 3px; }
.q.has-error .q-text { color: var(--cap-gold-deep); }
.q.has-error .opt:not(:has(input:checked)) { border-color: var(--cap-gold-deep); }
.field.has-error .cap-input { border-color: var(--cap-gold-deep); box-shadow: inset 0 0 0 1px var(--cap-gold-deep); }
.field.has-error .cap-input:focus-visible { border-color: var(--cap-turquoise-deep); }
.send-error { display: flex; gap: 10px; align-items: flex-start; margin-top: var(--cap-space-6); padding: var(--cap-space-3) var(--cap-space-4); border-left: 4px solid var(--cap-gold-deep); background: var(--cap-white); color: var(--cap-gold-deep); font: var(--cap-text-small); font-weight: 700; }
.send-error:empty { display: none; }
.send-error svg { flex: none; margin-top: 3px; }

/* Contact details: a light panel at the end of the last section */
.contact { margin-top: var(--cap-space-7); padding: var(--cap-space-6); background: var(--cap-light); border-top: 3px solid var(--cap-ink); }
.contact h3 { font: var(--cap-text-h2); color: var(--cap-ink); }
.contact > p { margin-top: var(--cap-space-2); font: var(--cap-text-small); color: var(--cap-ink); max-width: 40em; }
.contact .reassure { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; color: var(--cap-slate); }
.contact .reassure svg { margin-top: 2px; color: var(--cap-ink); }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cap-space-5) var(--cap-space-5); margin-top: var(--cap-space-5); }
.field.wide { grid-column: 1 / -1; }
.field label { display: block; font: 600 15px/20px var(--cap-font-sans); color: var(--cap-ink); }
.field label span { margin-left: 6px; font-weight: 600; color: var(--cap-slate); }
.field .cap-input { display: block; width: 100%; min-height: 52px; margin-top: var(--cap-space-2); }
.field-hint { margin-top: var(--cap-space-2); font: 500 14px/20px var(--cap-font-sans); color: var(--cap-slate); }
.contact .consent { margin-top: var(--cap-space-5); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Controls: one clear way on, the way back beside it */
.controls { display: flex; align-items: center; gap: var(--cap-space-4); margin-top: var(--cap-space-7); padding-top: var(--cap-space-6); border-top: 1px solid var(--cap-ink-20); }
.btn-next { display: inline-flex; align-items: center; gap: 14px; min-height: 56px; padding: 18px 32px; font: 600 17px/20px var(--cap-font-sans); }
.btn-next svg { flex: none; transition: transform 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .btn-next:hover svg { transform: translateX(3px); } }
.btn-back { min-height: 56px; padding: 18px 28px; font: 600 17px/20px var(--cap-font-sans); }
.btn-back:disabled { display: none; }
.controls[hidden], .progress-wrap[hidden] { display: none; }
.time-left { display: none; }

/* ---------- Thank-you screen ---------- */
.done-panel { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--cap-space-5); padding: var(--cap-space-6); background: var(--cap-turquoise-12); border-left: 4px solid var(--cap-turquoise); }
.done-mark { display: grid; place-items: center; width: 48px; height: 48px; background: var(--cap-ink); color: var(--cap-white); }
.done-panel h2 { font: var(--cap-text-h1); color: var(--cap-ink); }
.done-panel p { margin-top: var(--cap-space-3); color: var(--cap-ink); max-width: 36em; }
.done-report { margin-top: var(--cap-space-6); display: grid; grid-template-columns: 152px minmax(0, 1fr); gap: var(--cap-space-5); align-items: center; }
.done-report > p { font: var(--cap-text-h3); color: var(--cap-ink); text-wrap: pretty; }
.invite { margin-top: var(--cap-space-7); padding-top: var(--cap-space-6); border-top: 1px solid var(--cap-ink-20); }
.invite h3 { font: var(--cap-text-h2); color: var(--cap-ink); }
.invite > p { margin-top: var(--cap-space-2); color: var(--cap-ink); }
.share { display: flex; flex-wrap: wrap; gap: var(--cap-space-2); margin-top: var(--cap-space-5); }
.share .cap-input { flex: 1 1 260px; min-width: 0; min-height: 52px; background: var(--cap-light); }
.share .cap-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 12px 20px; }
.copy-status { margin-top: var(--cap-space-2); min-height: 24px; font: var(--cap-text-small); font-weight: 600; color: var(--cap-ink); }
.copy-status + .share-list { margin-top: var(--cap-space-2); }
.share-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cap-space-2); list-style: none; margin: var(--cap-space-5) 0 0; padding: 0; }
.share-list a, .share-list button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; padding: 12px 14px; font: 600 15px/20px var(--cap-font-sans); text-decoration: none; background: var(--cap-white); }
.share-list .cap-button--secondary:hover { background: var(--cap-ink-10); color: var(--cap-ink); border-color: var(--cap-ink); }
.share-list svg { flex: none; }

/* ---------- Keep me informed: the quiet second route, under the survey, for people who will not answer today ---------- */
.interest { padding: var(--cap-space-7) 0 var(--cap-space-8); background: var(--cap-light); border-top: 1px solid var(--cap-ink-20); }
.interest h2 { font: var(--cap-text-h2); color: var(--cap-ink); }
.interest-text { margin-top: var(--cap-space-2); color: var(--cap-ink); max-width: 36em; }
.interest-form { margin-top: var(--cap-space-5); }
.interest-form .fields { margin-top: 0; }
.interest-form .consent { margin-top: var(--cap-space-5); }
.interest-form .cap-button { margin-top: var(--cap-space-5); min-height: 52px; padding: 16px 28px; font: 600 17px/20px var(--cap-font-sans); }
.interest-done:empty { display: none; }
.interest-done { margin-top: var(--cap-space-4); font: var(--cap-text-h3); color: var(--cap-ink); }

/* ---------- Parts of the live survey that the board did not show: drawn here in the same language ---------- */
/* A statement left unanswered in a grid: its text and a short note in gold-deep, as the questions */
.mx-miss { margin-left: 8px; font: var(--cap-text-small); font-weight: 700; color: var(--cap-gold-deep); }
.mx-row.is-missing .mx-miss { display: block; grid-column: 2; margin: var(--cap-space-1) 0 0; }
.mx-row.is-missing .mx-text { color: var(--cap-gold-deep); }
.mx-row.is-missing .mx-cell:not(:has(input:checked)) { border-color: var(--cap-gold-deep); }
.q.has-error .mx-text { color: var(--cap-ink); }
.q.has-error .mx-row.is-missing .mx-text { color: var(--cap-gold-deep); }
/* "Other": the field to say what, under the answers */
.other-box { margin-top: var(--cap-space-3); }
.other-box[hidden] { display: none; }
.other-box label { display: block; font: 600 15px/20px var(--cap-font-sans); color: var(--cap-ink); }
.other-box .cap-input { display: block; width: 100%; min-height: 52px; margin-top: var(--cap-space-2); }
.quote-opt { margin-top: var(--cap-space-3); }
.done-panel .note { font: var(--cap-text-small); color: var(--cap-slate); }
.btn-next[aria-busy="true"] { cursor: progress; }
.interest[hidden] { display: none; }
.interest-done:focus { outline: none; }

/* ---------- Entry motion: once, CSS only, all done by 1.4 s; nothing moves between screens ---------- */
@media (prefers-reduced-motion: no-preference) {
  .start .col > * { animation: rise 500ms var(--ease-out) both; }
  .start .col > :nth-child(1) { animation-delay: 80ms; }
  .start .col > :nth-child(2) { animation-delay: 140ms; }
  .start .col > :nth-child(3) { animation-delay: 200ms; }
  .start .col > :nth-child(4) { animation-delay: 260ms; }
  .start .col > :nth-child(5) { animation-delay: 320ms; }
  .start .col > :nth-child(6) { animation-delay: 380ms; }
  .cover-rule { animation: draw-x 600ms var(--ease-out) 700ms both; }
  .first .progress-wrap, .first .sec-head, .first .q:nth-of-type(1) { animation: rise 500ms var(--ease-out) 460ms both; }
  .first [aria-current="step"] .seg-fill { animation: fill 700ms var(--ease-out) 700ms both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes draw-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(var(--f, 0)); } }
/* Focus arriving inside an element that is still entering: shown at once */
.is-instant, .is-instant * { animation-duration: 1ms !important; animation-delay: 0s !important; }

/* ---------- Under 1024 px: the section labels give way to one line, step and then the section title ---------- */
@media (max-width: 1023px) {
  .progress-wrap { padding: var(--cap-space-3) 0; }
  .step-line { display: flex; flex-wrap: wrap; gap: 0 8px; margin-bottom: var(--cap-space-2); font: 600 14px/20px var(--cap-font-sans); color: var(--cap-ink); }
  .step-line span:first-child { color: var(--cap-slate); }
  .seg-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .progress ol { gap: 4px; }
  .seg-bar { height: 4px; }
}

/* ---------- Under 900 px: the numbers sit above the question ---------- */
@media (max-width: 899px) {
  .q-no { position: static; display: block; margin-bottom: var(--cap-space-1); }
}

/* ---------- Phone ---------- */
@media (max-width: 767px) {
  .start { padding: var(--cap-space-6) 0 var(--cap-space-7); }
  .start h1 { margin-top: var(--cap-space-3); }
  .start-why { margin-top: var(--cap-space-5); padding-left: var(--cap-space-4); }
  .offer { grid-template-columns: 96px minmax(0, 1fr); gap: var(--cap-space-4); padding: var(--cap-space-4); }
  .cover { --cap-cut: 12px; padding: 10px 8px; }
  .cover img { width: 76px; }
  .cover-title { font-size: 13px; line-height: 16px; }
  .cover-year { font-size: 12px; line-height: 16px; }
  .offer-strong { font: var(--cap-text-small); font-weight: 700; }
  .survey { padding: var(--cap-space-5) 0 var(--cap-space-7); }
  .screen + .screen { margin-top: var(--cap-space-7); }
  .progress-wrap { margin: 0 -16px; padding: var(--cap-space-3) 16px; }
  .sec-head { padding-top: var(--cap-space-5); }
  .q { margin-top: var(--cap-space-6); }
  .q + .q { padding-top: var(--cap-space-6); }
  .opts.cols-2 { grid-template-columns: minmax(0, 1fr); }
  .opts.cols-2.tiny { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opt { padding: 14px 14px; gap: 12px; font-size: 16px; }
  .opt input { left: 14px; }
  .mx-row { grid-template-columns: minmax(0, 1fr); }
  .mx-scale { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mx-scale .mx-cell + .mx-cell { margin-left: 0; }
  .mx-row > .mx-dk { margin-top: 8px; }
  .contact { margin: var(--cap-space-6) -16px 0; padding: var(--cap-space-5) 16px; }
  .fields { grid-template-columns: minmax(0, 1fr); gap: var(--cap-space-4); }
  .controls { flex-direction: column; align-items: stretch; gap: var(--cap-space-3); padding-top: var(--cap-space-5); }
  .btn-next { justify-content: center; }
  .done-panel { grid-template-columns: minmax(0, 1fr); gap: var(--cap-space-4); padding: var(--cap-space-5); }
  .done-report { grid-template-columns: 96px minmax(0, 1fr); gap: var(--cap-space-4); }
  .done-report > p { font: var(--cap-text-small); font-weight: 600; }
  .share-list { grid-template-columns: minmax(0, 1fr); }
  .share .cap-input { flex-basis: 100%; font: var(--cap-text-small); }
  .share .cap-button { flex: 1 1 100%; }
  .interest { padding: var(--cap-space-6) 0 var(--cap-space-7); }
}

/* Reduced motion: nothing moves */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .cap-button:active, .btn-next:hover svg { transform: none !important; }
}
@media print {
  *, *::before, *::after { opacity: 1 !important; animation: none !important; transition: none !important; }
  .progress-wrap { position: static; }
}

/* Kazakh phones: the report title has long words; a wider cover and one size smaller, so they stay inside it */
:lang(kk) .cover-title { overflow-wrap: anywhere; }
@media (max-width: 767px) {
  :lang(kk) .offer, :lang(kk) .done-report { grid-template-columns: 116px minmax(0, 1fr); }
  :lang(kk) .cover-title { font-size: 12px; }
}