/* ==========================================================================
   Austrian citizenship for Nazi victims and their descendants
   Design system imported from wolftheiss.com (360vier-theme)
   Typefaces: Circular XX (Lineto) + Lyon Text (Commercial Type)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts
   -------------------------------------------------------------------------- */

@font-face {
  font-display: swap;
  font-family: "Circular";
  font-weight: 400;
  src: url("../fonts/CircularXXWeb-Regular.woff") format("woff");
}
@font-face {
  font-display: swap;
  font-family: "Circular";
  font-weight: 500;
  src: url("../fonts/CircularXXWeb-Medium.woff") format("woff");
}
@font-face {
  font-display: swap;
  font-family: "Circular";
  font-weight: 700;
  src: url("../fonts/CircularXXWeb-Bold.woff") format("woff");
}
@font-face {
  font-display: swap;
  font-family: "Circular Book";
  src: url("../fonts/CircularXXWeb-Book.woff") format("woff");
}
@font-face {
  font-display: swap;
  font-family: "Lyon Text";
  font-weight: 400;
  src: url("../fonts/LyonText-Regular.woff") format("woff");
}
@font-face {
  font-display: swap;
  font-family: "Lyon Text";
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/LyonText-RegularItalic.woff") format("woff");
}
@font-face {
  font-display: swap;
  font-family: "Lyon Text";
  font-weight: 600;
  src: url("../fonts/LyonText-Semibold.woff") format("woff");
}
@font-face {
  font-display: swap;
  font-family: "Lyon Text";
  font-style: italic;
  font-weight: 600;
  src: url("../fonts/LyonText-SemiboldItalic.woff") format("woff");
}
@font-face {
  font-display: swap;
  font-family: "Lyon Text";
  font-weight: 700;
  src: url("../fonts/LyonDisplay-Bold.woff") format("woff");
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Lets the <details> answer animate from 0 to auto height */
  interpolate-size: allow-keywords;

  /* Palette — sampled from wolftheiss.com */
  --wt-black: #000000;
  --wt-white: #ffffff;
  --wt-red: #e2130e;
  --wt-red-dark: #b50f0b;
  --wt-yellow: #ffe178;
  --wt-green: #aeddbd;
  --wt-blue-light: #82c8fa;
  --wt-blue: #5087dc;
  --wt-pink: #d2aabe;
  --wt-orange: #ff825a;
  --wt-cream: #fffbed;
  --wt-grey-100: #f0f0f0;
  --wt-grey-300: #b9b9b9;
  --wt-grey-600: #6e6e6e;
  --wt-rule: rgba(0, 0, 0, 0.15);

  /* Type */
  --font-sans: "Circular", "Circular Book", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-sans-book: "Circular Book", "Circular", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Lyon Text", Georgia, "Times New Roman", Times, serif;

  /* Metrics */
  --header-height: 60px;
  --container: 1140px;
  --gutter: 20px;
  --section-space: 64px;
}

@media (min-width: 1024px) {
  :root {
    --header-height: 89px;
    --section-space: 120px;
  }
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Pages tall enough to scroll and pages that fit the viewport would
     otherwise center on different widths, so navigating between them makes
     the whole layout jump by half a scrollbar. Reserve the gutter always. */
  scrollbar-gutter: stable;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background-color: var(--wt-white);
  color: var(--wt-black);
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-top: var(--header-height);
  /* Sticky footer: short pages (e.g. the empty questionnaire) still push the
     footer to the bottom of the viewport. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body > main {
  flex: 1 0 auto;
}

@media (min-width: 768px) {
  body {
    font-size: 20px;
    line-height: 32px;
  }
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--wt-black);
  margin: 0;
}

h1 {
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h2 {
  font-size: 28px;
  line-height: 38px;
}

h3 {
  font-size: 22px;
  line-height: 32px;
}

h4 {
  font-size: 18px;
  line-height: 28px;
}

@media (min-width: 768px) {
  h1 {
    font-size: 56px;
  }
  h2 {
    font-size: 36px;
    line-height: 46px;
  }
  h3 {
    font-size: 26px;
    line-height: 36px;
  }
}

@media (min-width: 1200px) {
  h1 {
    font-size: 68px;
  }
}

p {
  margin: 0 0 24px;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

strong,
b {
  font-weight: 600;
}

em {
  font-style: italic;
}

/* The source pages underline the load-bearing negation. <em> carries that
   emphasis to assistive technology; this renders it as the source's underline. */
em.negation {
  font-style: normal;
  text-decoration: underline;
  text-underline-offset: 3px;
}

img,
svg {
  max-width: 100%;
}

::selection {
  background: var(--wt-yellow);
  color: var(--wt-black);
}

/* The focus ring is reserved for the controls where it does work: anything
   that behaves as a button, and the hCaptcha box (which is an iframe, so this
   is the only handle we have on it). Text fields are left out: the caret is
   already in them, and a red rectangle on a field reads as an error against a
   form whose errors the browser reports itself. Links and headings carry their
   own hover and current-page treatment and would only be cluttered by one. */
:focus-visible {
  outline: none;
}

button:focus-visible,
.btn:focus-visible,
.skip-link:focus-visible,
[type="button"]:focus-visible,
[type="submit"]:focus-visible,
.q__summary:focus-visible,
.contact__captcha iframe:focus-visible {
  outline: 2px solid var(--wt-red);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   4. Layout helpers
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.measure {
  max-width: 46rem;
}

.section {
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
}

/* Tinted section surfaces — the Wolf Theiss block colours. A black rule marks
   every edge where the background colour changes. */
.section--green,
.section--blue,
.section--yellow,
.section--orange {
  border-top: 2px solid var(--wt-black);
  border-bottom: 2px solid var(--wt-black);
}

/* Two tinted sections in a row would otherwise stack their rules into one 4px
   line, twice the weight of every other edge. */
:is(.section--green, .section--blue, .section--yellow, .section--orange)
  + :is(.section--green, .section--blue, .section--yellow, .section--orange) {
  border-top: 0;
}

.section--green {
  background-color: var(--wt-green);
}

.section--blue {
  background-color: var(--wt-blue-light);
}

.section--yellow {
  background-color: var(--wt-yellow);
}

.section--orange {
  background-color: var(--wt-orange);
}

/* Red link text fails contrast on the orange surface. */
.section--orange .cta-link {
  color: var(--wt-black);
}

.section--orange .cta-link:hover {
  border-bottom-color: var(--wt-black);
  color: var(--wt-black);
}

.section--tight {
  padding-top: calc(var(--section-space) * 0.6);
  padding-bottom: calc(var(--section-space) * 0.6);
}

.section__title {
  margin-bottom: 40px;
}

[id] {
  scroll-margin-top: calc(var(--header-height) + 24px);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip link — hidden until it receives keyboard focus */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
}

.skip-link:focus {
  position: fixed;
  left: 12px;
  top: 12px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  background-color: var(--wt-black);
  color: var(--wt-white);
  font-family: var(--font-sans-book);
  font-size: 16px;
  border-radius: 50px;
}

main:focus {
  outline: none;
}

/* Prose lists — the "-" / "--" levels of the source copy */
.prose ul {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}

.prose ul:last-child {
  margin-bottom: 0;
}

.prose li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 14px;
}

.prose li:last-child {
  margin-bottom: 0;
}

.prose li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 12px;
  height: 2px;
  background-color: var(--wt-black);
}

.prose li ul {
  margin: 14px 0 0;
}

.prose li li::before {
  background-color: var(--wt-black);
  width: 8px;
  left: 2px;
}

.prose > p + ul {
  margin-top: -8px;
}

/* Links set in running prose. The global rule strips colour and underline from
   every anchor, which is right for navigation and buttons but leaves an inline
   link indistinguishable from the sentence around it. .cta-link is no help
   here — it is a standalone call to action in bold sans, and drops out of the
   serif line. An underline carries it instead, so the link reads as one on
   every one of the tinted section colours. */
.prose p a,
.prose li a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.prose p a:hover,
.prose li a:hover {
  text-decoration-thickness: 2px;
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-sans-book);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  min-height: 48px;
  padding: 0 28px;
  border: 2px solid var(--wt-black);
  border-radius: 50px;
  background-color: var(--wt-black);
  color: var(--wt-white);
  cursor: pointer;
  text-align: center;
  transition: background-color 0.2s ease, color 0.2s ease,
    border-color 0.2s ease;
}

/* Hover only — the focus ring must stay distinguishable from the button itself.
   Matches wolftheiss.com: the fill drops out and the outline stays.
   :not(:disabled) so a button that cannot be pressed does not answer the
   pointer as though it could. */
.btn:hover:not(:disabled) {
  background-color: transparent;
  border-color: var(--wt-black);
  color: var(--wt-black);
}

/* Kept as a safety net, not as a state anything reaches on purpose: no button
   on either page is ever disabled. The send button stays live and answers a
   missing spam check with a message above it, the way the sister site does. */
.btn:disabled {
  background-color: var(--wt-grey-600);
  border-color: var(--wt-grey-600);
  color: var(--wt-white);
  cursor: default;
}

.btn--ghost {
  background-color: transparent;
  color: var(--wt-black);
}

.btn--ghost:hover {
  background-color: var(--wt-black);
  border-color: var(--wt-black);
  color: var(--wt-white);
}

.btn--sm {
  min-height: 40px;
  font-size: 15px;
  padding: 0 20px;
}

/* Inline red call-to-action link, as used per case on the source pages */
.cta-link {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 17px;
  line-height: 26px;
  color: var(--wt-red);
  display: inline-block;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.cta-link:hover {
  border-bottom-color: var(--wt-red);
  color: var(--wt-red-dark);
}

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  background-color: var(--wt-white);
  border-bottom: 2px solid var(--wt-black);
  z-index: 100;
}

.header__container {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 24px;
}

/* Two-line wordmark: the site title, set like the hero — bold first line,
   book-weight second. It shrinks before it wraps, so the header stays one row. */
.header__logo {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  color: var(--wt-black);
}

.header__wordmark,
.header__wordmark-sub {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sized off the measured width of the longer line against the space the nav and
   the CTA leave over — it steps up only where that space actually exists. */
.header__wordmark {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
}

.header__wordmark-sub {
  font-family: var(--font-sans-book);
  font-weight: 400;
  font-size: 11px;
  line-height: 16px;
}

@media (min-width: 900px) {
  .header__wordmark {
    font-size: 16px;
    line-height: 21px;
  }
  .header__wordmark-sub {
    font-size: 13px;
    line-height: 19px;
  }
}

@media (min-width: 1024px) {
  .header__wordmark {
    font-size: 19px;
    line-height: 26px;
  }
  .header__wordmark-sub {
    font-size: 15px;
    line-height: 22px;
  }
}

.header__nav {
  display: none;
}

.header__nav ul {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.header__nav a {
  font-family: var(--font-sans-book);
  font-size: 16px;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--wt-black);
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.2s ease;
}

.header__nav a:hover,
.header__nav a:focus-visible,
.header__nav a[aria-current="page"] {
  border-bottom-color: var(--wt-black);
}

.header__cta {
  margin-left: auto;
}

/* Mobile disclosure menu (<768px) — no JS, <details> does the toggling */
.header__menu {
  margin-left: auto;
  position: relative;
}

/* When the CTA is present it already claims the free space */
.header__cta + .header__menu {
  margin-left: 0;
}

.header__menu > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
  list-style: none;
}

.header__menu > summary::-webkit-details-marker {
  display: none;
}

.header__burger {
  position: relative;
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--wt-black);
}

.header__burger::before,
.header__burger::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background-color: var(--wt-black);
  transition: transform 0.2s ease;
}

.header__burger::before {
  top: -7px;
}

.header__burger::after {
  top: 7px;
}

.header__menu[open] .header__burger {
  background-color: transparent;
}

.header__menu[open] .header__burger::before {
  transform: translateY(7px) rotate(45deg);
}

.header__menu[open] .header__burger::after {
  transform: translateY(-7px) rotate(-45deg);
}

.header__panel {
  position: absolute;
  top: calc(100% + 2px);
  right: -10px;
  min-width: 240px;
  background-color: var(--wt-white);
  border: 2px solid var(--wt-black);
  padding: 12px 20px 20px;
}

.header__panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.header__panel li {
  border-bottom: 1px solid var(--wt-rule);
}

.header__panel li:last-child {
  border-bottom: 0;
}

.header__panel a {
  display: block;
  padding: 12px 0;
  font-family: var(--font-sans-book);
  font-size: 16px;
  text-transform: uppercase;
  color: var(--wt-black);
}

/* 768px, not 700px: below that the wordmark and a three-item nav cannot both
   hold their line. */
@media (min-width: 768px) {
  .header__menu {
    display: none;
  }
  .header__nav {
    display: block;
    margin-left: 24px;
  }
  .header__nav ul {
    gap: 24px;
  }
}

@media (min-width: 1024px) {
  .header__nav ul {
    gap: 32px;
  }
}

@media (max-width: 560px) {
  .header__container {
    gap: 8px;
  }
  /* The wordmark's second line and the CTA cannot share this width. The menu
     still carries Questionnaire, and the hero's button is one screen down. */
  .header__cta {
    display: none;
  }
  /* With the CTA gone the burger has to reclaim the free space itself. */
  .header__cta + .header__menu {
    margin-left: auto;
  }
}

/* --------------------------------------------------------------------------
   7. Stage / hero
   -------------------------------------------------------------------------- */

.stage {
  padding-top: 56px;
  padding-bottom: 56px;
}

@media (min-width: 768px) {
  .stage {
    padding-top: 96px;
    padding-bottom: 96px;
  }
}

.stage__title {
  max-width: 18ch;
}

.stage__title span {
  display: block;
  font-weight: 400;
}

.stage__lead {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 32px;
  margin: 32px 0 0;
  max-width: 34rem;
}

@media (min-width: 768px) {
  .stage__lead {
    font-size: 24px;
    line-height: 38px;
  }
}

.stage__actions {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* The nationality in the lead cycles through every country the map covers.
   All thirteen words share one inline-grid cell and the line breaks after them,
   so the pill can change width without shifting a word of the sentence. One
   keyframe plus a per-word delay staggers the hand-off, and the whole thing
   runs without script — rotator.js only narrows the pill to the word on show,
   which left to itself stays as wide as "Bulgarian". */

.rotator {
  /* 13 words x 1.8s = a 23.4s round trip */
  --rotator-step: 1800ms;
  display: inline-grid;
  vertical-align: middle;
  transition: width 440ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Same black pill as the map labels and the countries index, sized off the
   lead so it keeps step with the 768px jump in the surrounding type. */
.rotator__word {
  grid-area: 1 / 1;
  justify-self: start;
  padding: 2px 14px;
  border-radius: 20px;
  background-color: var(--wt-black);
  color: var(--wt-white);
  font-family: var(--font-sans);
  font-size: 0.85em;
  line-height: 1.5;
  white-space: nowrap;
  opacity: 0;
  animation: rotator-word calc(var(--rotator-step) * 13)
    cubic-bezier(0.4, 0, 0.2, 1) infinite backwards;
  animation-delay: calc(var(--i) * var(--rotator-step));
}

/* 7.6923% is one word's turn out of thirteen. It enters over the first quarter
   of its turn and leaves over the last, and is out of sight for the other
   twelve turns. */
@keyframes rotator-word {
  0% {
    opacity: 0;
    transform: translateY(0.32em);
  }
  1.9% {
    opacity: 1;
    transform: translateY(0);
  }
  5.8% {
    opacity: 1;
    transform: translateY(0);
  }
  7.7% {
    opacity: 0;
    transform: translateY(-0.32em);
  }
  100% {
    opacity: 0;
    transform: translateY(-0.32em);
  }
}

/* Keep the hand-off, drop the travel. */
@media (prefers-reduced-motion: reduce) {
  .rotator {
    transition-duration: 0s;
  }
  .rotator__word {
    animation-name: rotator-word-still;
  }
}

@keyframes rotator-word-still {
  0% {
    opacity: 0;
  }
  1.9% {
    opacity: 1;
  }
  5.8% {
    opacity: 1;
  }
  7.7% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* On paper there is no rotation to be had, so the list keeps its first word. */
@media print {
  .rotator__word {
    animation: none;
    opacity: 1;
  }
  .rotator__word ~ .rotator__word {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   8. Interactive map
   -------------------------------------------------------------------------- */

/* Ported from wolftheiss.com: a flat SVG basemap with the country labels
   absolutely positioned on top as percentages, so the pills track the map at
   every width. Below 992px the labels drop out of position and reflow as a
   plain wrapped list under the map. */

.interactive-map {
  position: relative;
}

.interactive-map__background img {
  display: block;
  width: 100%;
  height: auto;
}

.interactive-map__locations {
  position: absolute;
  inset: 0;
}

.interactive-map__location {
  position: absolute;
  z-index: 2;
  display: block;
  padding: 1px 12px;
  border-radius: 20px;
  background-color: var(--wt-black);
  color: var(--wt-white);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.3s ease;
}

.interactive-map__location:hover,
.interactive-map__location:focus-visible {
  opacity: 0.7;
  color: var(--wt-white);
}

@media (max-width: 1400px) {
  .interactive-map__location {
    font-size: 12px;
  }
}

@media (max-width: 992px) {
  .interactive-map__locations {
    position: static;
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .interactive-map__location {
    position: static;
    top: auto !important;
    left: auto !important;
  }
}

/* The countries index reuses the map's pill labels, laid out as a wrapped
   list instead of pinned to coordinates. */

.country-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.country-list__link {
  display: block;
  padding: 4px 16px;
  border-radius: 20px;
  background-color: var(--wt-black);
  color: var(--wt-white);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.country-list__link:hover,
.country-list__link:focus-visible {
  opacity: 0.7;
  color: var(--wt-white);
}

/* --------------------------------------------------------------------------
   9. Cases
   -------------------------------------------------------------------------- */

.cases {
  border-top: 2px solid var(--wt-rule);
}

.case {
  border-bottom: 2px solid var(--wt-rule);
}

.case__summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
}

.case__summary::-webkit-details-marker {
  display: none;
}

.case__heading {
  display: block;
}

@media (min-width: 768px) {
  .case__heading {
    display: flex;
    align-items: baseline;
    gap: 16px;
  }
}

.case__label {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 22px;
  line-height: 32px;
  color: var(--wt-black);
  margin: 0;
}

@media (min-width: 768px) {
  .case__label {
    font-size: 26px;
    line-height: 36px;
  }
}

.case__ref {
  display: block;
  font-family: var(--font-sans-book);
  font-size: 15px;
  line-height: 24px;
  color: var(--wt-black);
}

/* Circular has no italic; set the Latin abbreviation in Lyon Text italic instead
   of letting the browser synthesise an oblique. */
.case__ref em {
  font-family: var(--font-serif);
  font-size: 16px;
}

.case__body {
  padding: 0 0 32px;
  max-width: 52rem;
}

.case__body > p:first-child {
  font-weight: 600;
}

.case__cta {
  margin-top: 28px;
}

/* Progressive enhancement: animate open/close where supported */
@supports selector(details::details-content) {
  .case::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 0.3s ease, content-visibility 0.3s allow-discrete;
  }
  .case[open]::details-content {
    block-size: auto;
  }
}

.case[open] .faq__icon::after {
  opacity: 0;
  transform: rotate(90deg);
}

/* --------------------------------------------------------------------------
   10. FAQ
   -------------------------------------------------------------------------- */

.faq {
  border-top: 2px solid var(--wt-rule);
}

.faq__item {
  border-bottom: 2px solid var(--wt-rule);
}

.faq__item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 19px;
  line-height: 28px;
}

@media (min-width: 768px) {
  .faq__item summary {
    font-size: 22px;
    line-height: 32px;
  }
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  margin-top: 3px;
  position: relative;
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  background-color: currentColor;
  border-radius: 1px;
}

.faq__icon::before {
  left: 0;
  top: 12px;
  width: 26px;
  height: 2px;
}

.faq__icon::after {
  left: 12px;
  top: 0;
  width: 2px;
  height: 26px;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.faq__item[open] .faq__icon::after {
  opacity: 0;
  transform: rotate(90deg);
}

.faq__answer {
  padding: 0 0 32px;
  max-width: 52rem;
}

.faq__answer p:first-child,
.faq__answer ul:first-child {
  margin-top: 0;
}

/* Progressive enhancement: animate open/close where supported */
@supports selector(details::details-content) {
  .faq__item::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 0.3s ease, content-visibility 0.3s allow-discrete;
  }
  .faq__item[open]::details-content {
    block-size: auto;
  }
}

/* --------------------------------------------------------------------------
   11. Assist / closing CTA
   -------------------------------------------------------------------------- */

.assist__grid {
  display: grid;
  gap: 40px;
}

@media (min-width: 1024px) {
  .assist__grid {
    grid-template-columns: 1fr 1.4fr;
    gap: 64px;
  }
}

.closing__inner {
  max-width: 42rem;
}

.closing__actions {
  margin-top: 36px;
}

/* The email path, below the questionnaire button. A rule separates the two so
   they read as two ways in rather than one interrupted thought. The fields are
   the same square boxes and the send button the same pill as the
   questionnaire: one vocabulary, two entry points. */
.contact {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 2px solid var(--wt-black);
}

.contact__title {
  margin-bottom: 12px;
}

.contact__lead {
  margin-bottom: 32px;
}

/* hCaptcha renders a fixed-width iframe that cannot be restyled. Let it scroll
   inside its own box rather than push the container wider than the viewport. */
.contact__captcha {
  max-width: 100%;
  overflow-x: auto;
}

/* The widget is something you act on, so it gets the same square black box as
   the fields above it rather than sitting loose on the yellow. The border goes
   on the wrapper because the iframe itself is not ours to style.

   :not(:empty) — the div is empty until hCaptcha fills it, and an empty box
   would draw a 4px black sliver wherever the script is blocked or absent.
   line-height: 0 drops the inline descender gap under the iframe. */
.contact__captcha .h-captcha:not(:empty) {
  display: inline-block;
  border: 2px solid var(--wt-black);
  line-height: 0;
}

/* Replaces the form in place, so the eye lands where the form was. White on
   the yellow, boxed like a field, because it is the answer to one. */
.contact__success {
  border: 2px solid var(--wt-black);
  background-color: var(--wt-white);
  padding: 28px;
}

/* Focused by script after a send, purely to move the screen reader. */
.contact__success:focus {
  outline: none;
}

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */

.footer {
  background-color: var(--wt-black);
  color: var(--wt-white);
}

.footer__secondary-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding-top: 26px;
  padding-bottom: 26px;
}

.footer__legal ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
}

.footer__legal a {
  font-family: var(--font-sans-book);
  font-size: 14px;
  color: var(--wt-white);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.footer__legal a:hover,
.footer__legal a:focus-visible {
  border-bottom-color: var(--wt-white);
}

/* No frame around the glyph — the 40px box is only there to keep the tap
   target at a usable size. */
.footer__top a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  opacity: 0.75;
  transition: opacity 0.2s ease;
}

.footer__top a:hover,
.footer__top a:focus-visible {
  opacity: 1;
}

.footer__top svg {
  width: 14px;
  height: 14px;
  fill: var(--wt-white);
}

/* --------------------------------------------------------------------------
   13. Questionnaire page
   -------------------------------------------------------------------------- */

.page-head {
  padding-top: 56px;
  padding-bottom: 40px;
  border-bottom: 2px solid var(--wt-black);
}

@media (min-width: 768px) {
  .page-head {
    padding-top: 88px;
    padding-bottom: 64px;
  }
}

.questionnaire {
  min-height: 40vh;
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
}

/* Placed here, after section 5, so it beats `.btn { display: inline-flex }` on
   source order rather than on !important. */
[hidden] {
  display: none;
}

/* Two mechanisms, and they must not be confused. The step machinery is the
   enhancement: without the flag the page is one long form with every question
   visible, which is the whole no-JS fallback. `.js-only` hides itself when the
   flag is absent rather than revealing itself when it is present — `display:
   revert` returns the UA value, not the author value, and would flatten
   `.q__nav`'s flex layout. */
[data-enhanced] .q__step:not(.is-current) {
  display: none;
}

html:not([data-enhanced]) .js-only {
  display: none;
}

[data-enhanced] .nojs-only {
  display: none;
}

.print-only {
  display: none;
}

.q__form {
  margin-left: auto;
  margin-right: auto;
}

/* Progress — deliberately not sticky. It carries an escape link, and a sticky
   bar with a control in it eats a small viewport at 200% zoom. Every step
   scrolls to the top, so it is in view on arrival anyway. */
.q__progress {
  padding-bottom: 16px;
  margin-bottom: 36px;
  border-bottom: 2px solid var(--wt-black);
}

.q__phases ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}

.q__phase {
  font-family: var(--font-sans-book);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wt-black);
  border-bottom: 2px solid transparent;
  padding-bottom: 3px;
}

/* Matches .header__nav a[aria-current="page"]. Red here would invent a second
   current-state convention on the same site. */
.q__phase.is-current {
  font-weight: 700;
  border-bottom-color: var(--wt-black);
}

.q__bar {
  height: 6px;
  background-color: var(--wt-grey-100);
  border-radius: 3px;
  overflow: hidden;
}

/* Red on grey-100 is 4.26:1, above the 3:1 threshold for graphics. */
.q__bar-fill {
  display: block;
  height: 100%;
  background-color: var(--wt-red);
  transition: width 0.2s ease;
}

.q__meta {
  font-family: var(--font-sans-book);
  font-size: 14px;
  line-height: 22px;
  margin: 10px 0 0;
}

.q__escape {
  margin: 10px 0 0;
}

.q__step {
  padding-bottom: 48px;
}

.q__group-heading {
  margin: 48px 0 24px;
}

.q__title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 24px;
  line-height: 34px;
  margin: 0 0 16px;
}

.q__title:focus {
  outline: none;
}

@media (min-width: 768px) {
  .q__title {
    font-size: 28px;
    line-height: 38px;
  }
}

.q__lead {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 30px;
  margin: 0 0 28px;
}

.q__frame,
.answers__note {
  font-family: var(--font-sans-book);
  font-size: 15px;
  line-height: 24px;
  margin: 0 0 20px;
  padding-left: 14px;
  border-left: 3px solid var(--wt-yellow);
}

.q__question {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.q__legend {
  display: block;
  padding: 0;
  margin: 0;
}

.q__help {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 28px;
  margin: 0 0 24px;
}

/* Options stack full width at every viewport. Three equal columns make
   "I'm not sure" wrap to two lines while "Yes" and "No" stay on one, which
   de-emphasises by layout exactly the option that must not be de-emphasised. */
.answers {
  display: grid;
  gap: 12px;
  margin: 0;
}

.answer {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 0 20px;
  border: 2px solid var(--wt-black);
  border-radius: 26px;
  background-color: var(--wt-white);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.answer:hover {
  border-color: var(--wt-red);
}

/* Native control, left visible: high-contrast mode then needs no rebuild. */
.answer__input {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 19px 0 0;
  accent-color: var(--wt-black);
}

.answer__label {
  flex: 1 1 auto;
  display: block;
  min-height: 60px;
  padding: 17px 0;
  font-family: var(--font-sans-book);
  font-size: 17px;
  line-height: 26px;
  cursor: pointer;
}

/* Extends the hit target to the whole pill. */
.answer__label::after {
  content: "";
  position: absolute;
  inset: 0;
}

.answer__sub {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  line-height: 24px;
}

/* Yellow, not black: a black pill would be pixel-identical to .btn, and one
   sits a few rows below. Where :has() is missing the native radio still shows
   its own checked state, so nothing is lost. */
.answer:has(.answer__input:checked) {
  background-color: var(--wt-yellow);
}

.answer:has(.answer__input:focus-visible) {
  outline: 2px solid var(--wt-red);
  outline-offset: 3px;
}

/* The three disclosures reuse .faq__item, so they inherit the site's open and
   close animation from section 9 for free. */
.q__why {
  margin-top: 32px;
  border-top: 2px solid var(--wt-rule);
}

.q__why > summary {
  font-family: var(--font-sans-book);
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  padding: 16px 0;
}

.q__answers > summary,
.q__optional > summary {
  font-family: var(--font-sans-book);
  font-weight: 400;
  font-size: 17px;
  line-height: 26px;
  padding: 18px 0;
}

.q__answers,
.q__optional {
  margin: 32px 0;
  border-top: 2px solid var(--wt-black);
}

.q__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 2px solid var(--wt-rule);
}

.q__nav .btn:not(.btn--ghost) {
  margin-left: auto;
}

/* Disabled below 601px of height so it cannot eat the viewport at 200% zoom. */
@media (max-width: 767px) and (min-height: 601px) {
  .q__nav--sticky {
    position: sticky;
    bottom: 0;
    background-color: var(--wt-white);
    padding-bottom: 16px;
    box-shadow: 0 -8px 12px -8px rgba(0, 0, 0, 0.15);
  }
}

.q__aside {
  flex-basis: 100%;
  font-family: var(--font-sans-book);
  font-size: 14px;
  line-height: 24px;
  margin: 12px 0 0;
}

/* One box, three fills — not three differently padded 2px-black boxes. */
.q__note {
  padding: 20px 24px;
  border: 2px solid var(--wt-black);
  margin: 0 0 28px;
  font-family: var(--font-sans-book);
  font-size: 15px;
  line-height: 25px;
}

.q__note--info {
  background-color: var(--wt-cream);
}

.q__note--note {
  background-color: var(--wt-yellow);
}

.q__note--plain {
  background-color: var(--wt-white);
}

.q__note p:last-child {
  margin-bottom: 0;
}

/* Result — red is never a result surface. It is the focus ring and the brand
   accent; as a verdict it would read as a rejection stamp. */
.q__result {
  padding: 32px 24px;
  margin-bottom: 28px;
  border: 2px solid var(--wt-black);
}

@media (min-width: 768px) {
  .q__result {
    padding: 40px;
  }
}

.q__result--match {
  background-color: var(--wt-green);
}

.q__result--open {
  background-color: var(--wt-yellow);
}

.q__result--none {
  background-color: var(--wt-grey-100);
}

/* Same rule as section 4: red drops below 3:1 on the tinted surfaces. */
.q__result .prose li::before {
  background-color: var(--wt-black);
}

.q__verdict {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 24px;
  line-height: 34px;
  margin: 0 0 20px;
}

.q__verdict:focus {
  outline: none;
}

@media (min-width: 768px) {
  .q__verdict {
    font-size: 30px;
    line-height: 40px;
  }
}

.points {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  border-top: 2px solid var(--wt-black);
}

.point {
  padding: 24px 0;
  border-bottom: 1px solid var(--wt-rule);
}

.point__badge {
  margin: 0 0 10px;
}

.point__title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 19px;
  line-height: 28px;
  margin: 0 0 14px;
}

.point__docs {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 28px;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 14px;
  border: 2px solid var(--wt-black);
  border-radius: 50px;
  background-color: var(--wt-white);
  font-family: var(--font-sans-book);
  font-size: 14px;
  line-height: 1;
}

.chip--yes {
  background-color: var(--wt-green);
}

.chip--no {
  background-color: var(--wt-grey-100);
}

/* A note colour, never a warning colour. */
.chip--unsure {
  background-color: var(--wt-yellow);
}

.review {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--wt-black);
}

.review__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 16px;
  align-items: start;
  padding: 18px 0;
  border-bottom: 1px solid var(--wt-rule);
}

.review__q {
  grid-column: 1 / -1;
  font-family: var(--font-sans-book);
  font-size: 16px;
  line-height: 26px;
  margin: 0;
}

.review__a,
.review__change {
  margin: 0;
}

.review__change a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Rhymes with the landing page's closing "Are you eligible?" block. */
.q__cta {
  margin: 36px 0 28px;
  border: 2px solid var(--wt-black);
  padding-left: 24px;
  padding-right: 24px;
}

.q__group {
  border: 0;
  padding: 0;
  margin: 0 0 40px;
  min-width: 0;
}

.q__group-legend {
  display: block;
  padding: 0;
  margin: 0 0 6px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 20px;
  line-height: 30px;
}

.q__group-note {
  font-family: var(--font-sans-book);
  font-size: 15px;
  line-height: 25px;
  margin: 0 0 24px;
}

.field {
  margin-bottom: 22px;
}

.field__label {
  display: block;
  font-family: var(--font-sans-book);
  font-size: 16px;
  line-height: 26px;
  margin-bottom: 8px;
}

.field__hint {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 24px;
  margin: 0 0 8px;
}

/* Square box for anything you type into, pill for anything you press, so a
   field is never mistaken for a button. 18px stops iOS zooming on focus. */
.field__input {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 2px solid var(--wt-black);
  border-radius: 0;
  background-color: var(--wt-white);
  color: var(--wt-black);
  font-family: var(--font-sans-book);
  font-size: 18px;
  line-height: 28px;
}

textarea.field__input {
  min-height: 120px;
  resize: vertical;
}

/* --wt-red-dark is 6.9:1 on white. The invalid state is an inset shadow rather
   than a border-width change, so nothing reflows when it appears. */
.field__error {
  margin: 8px 0 0;
  font-family: var(--font-sans-book);
  font-size: 15px;
  line-height: 24px;
  color: var(--wt-red-dark);
}

/* A field the browser itself has just objected to. Pressing Send with the name
   box empty raises the native message against the box, which is report enough.
   Firefox paints its own red glow on the same state; both forms on this site
   leave their errors to the browser, so nothing here paints a field red. */
.field__input:user-invalid {
  box-shadow: none;
}

/* The asterisk is decoration: the input carries `required`, which is what a
   screen reader announces, so the mark itself is aria-hidden. Black rather
   than red — red is the error colour on this page, and nothing is wrong yet. */
.field__ast {
  font-family: var(--font-sans-book);
}

.field__req {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 1px 10px;
  margin-left: 8px;
  border: 1px solid var(--wt-black);
  border-radius: 50px;
  background-color: var(--wt-yellow);
  font-family: var(--font-sans-book);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.checks {
  display: grid;
  gap: 10px;
  margin: 0;
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
}

.check__input {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 11px 0 0;
  accent-color: var(--wt-black);
}

.check__label {
  padding: 10px 0;
  font-family: var(--font-sans-book);
  font-size: 16px;
  line-height: 26px;
  cursor: pointer;
}

.gen {
  border: 2px solid var(--wt-rule);
  padding: 20px;
  margin-bottom: 16px;
  min-width: 0;
}

.gen__legend {
  padding: 0 8px;
  font-family: var(--font-sans-book);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.gen__grid {
  display: grid;
  gap: 16px;
}

@media (min-width: 768px) {
  .gen__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.q__summary {
  width: 100%;
  min-height: 320px;
  padding: 16px;
  border: 2px solid var(--wt-black);
  background-color: var(--wt-grey-100);
  color: var(--wt-black);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 22px;
}

/* The radios are native, so only the progress bar needs rebuilding here. */
@media (forced-colors: active) {
  .q__bar {
    border: 1px solid CanvasText;
  }
  .q__bar-fill {
    background-color: Highlight;
  }
}

/* Printing the result is the only offline copy a user gets, so make it the
   page. The two !important rules are the file's only additions of that kind. */
@media print {
  .header,
  .footer,
  .q__progress,
  .q__nav,
  .q__why,
  .q__optional,
  .skip-link {
    display: none !important;
  }
  [data-enhanced] .q__step:not(.is-current) {
    display: none;
  }
  #step-result {
    display: block !important;
  }
  body {
    padding-top: 0;
    font-size: 12pt;
    line-height: 1.5;
  }
  .q__result,
  .q__note,
  .point {
    break-inside: avoid;
  }
  .print-only {
    display: block;
  }
}