/* ==========================================================================
   Austrian residency — residence permits for moving to Austria
   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;
  /* The red of --wt-red at the saturation and lightness of --wt-green, so
     the "No" chip sits as quietly on the page as the "Yes" chip. */
  --wt-red-matte: #ddb1ae;
  --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;
}

@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;
}

/* Every German term on the site is marked up with lang="de" and every one of
   them is a term quoted inside English prose, so the language mark carries the
   italic rather than each author remembering an <em>. */
[lang="de"] {
  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.

   The order is fixed and is the homepage's. Counting from the first section
   after the hero or the page head, the slots run green, white, orange, white,
   blue — and the closing call to action is yellow whatever slot it lands in.
   The sequence starts on the FIRST content section, not the second: a page
   whose opening section is untinted has drifted out of step with every other
   page. Shorter pages simply stop early — three sections mean green, white,
   orange — so a reader moving between pages meets the colours in the same
   sequence everywhere and the rhythm reads as one site rather than four.
   Reordering these on a page is a visible change, not a cosmetic one. */
.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;
}

/* Same doubling on a subpage, where `.page-head` already closes with a black
   rule and the first content section below it is the green one. The head's
   rule marks that edge; the section must not draw a second. */
.page-head + :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 text clears 4.5:1 on white and on none of the four tints — 3.8:1 against
   the yellow is the best of them. A hovered link therefore stays black on a
   tinted surface and doubles its underline instead, so the hover is still
   answered without a colour that cannot be read. */
:is(.section--green, .section--blue, .section--yellow, .section--orange)
  :is(.cta-link, .prose a, .table a, .deflist__source a):is(:hover, :focus-visible) {
  color: inherit;
  text-decoration-thickness: 2px;
}

.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;
}

/* --------------------------------------------------------------------------
   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;
  text-decoration: none;
  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);
}

/* :not(:disabled) matches the specificity of .btn:hover:not(:disabled) above;
   without it that rule wins and the ghost button never inverts. */
.btn--ghost:hover:not(:disabled) {
  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;
}

/* Content links — one treatment for every link that sits inside running copy,
   whether it is a whole sentence's worth of "read this next" or three words in
   the middle of a paragraph. It inherits font and colour from whatever it is
   set in, so the link reads as the text it belongs to and the underline is the
   only thing marking it; red is kept for the hover. Nav, footer, breadcrumbs
   and buttons are chrome and keep their own conventions. */
.cta-link,
.prose a,
.table a,
.deflist__source a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 0.2s ease, text-decoration-thickness 0.2s ease;
}

.cta-link:hover,
.cta-link:focus-visible,
.prose a:hover,
.prose a:focus-visible,
.table a:hover,
.table a:focus-visible,
.deflist__source a:hover,
.deflist__source a:focus-visible {
  color: var(--wt-red);
}

/* --------------------------------------------------------------------------
   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);
}

/* The compact menu marks the current page too — same convention as the
   desktop nav, which is the only place the underline was drawn before. */
.header__panel a:hover,
.header__panel a:focus-visible,
.header__panel a[aria-current="page"] {
  box-shadow: inset 0 -2px 0 var(--wt-black);
}

/* 1024px, not 768px. The nav carried three items when this was written and
   768px was the width at which the wordmark and those three could both hold
   their line. It now carries six, because the site has six places to go rather
   than two, and six will not fit beside the wordmark and the CTA until 1024.
   Below that the compact menu carries the same list — it always did. */
@media (min-width: 1024px) {
  .header__menu {
    display: none;
  }
  .header__nav {
    display: block;
    margin-left: 24px;
  }
  .header__nav ul {
    gap: 20px;
  }
  .header__nav a {
    font-size: 15px;
  }
}

@media (min-width: 1200px) {
  .header__nav ul {
    gap: 28px;
  }
  .header__nav a {
    font-size: 16px;
  }
}

@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__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;
}

/* --------------------------------------------------------------------------
   8. 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);
}

/* --------------------------------------------------------------------------
   9. 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;
}

/* The pointer to the glossary, below the last answer — it needs air so it
   reads as a way out of the list rather than another item in it. */
.faq__outro {
  margin-top: 32px;
}

/* The accordions close on a rule; without this the following line sits right
   against it. */
.cases__outro {
  margin-top: 40px;
}

/* 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;
  }
}

/* --------------------------------------------------------------------------
   10. 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);
}

/* The second way in is not a smaller offer than the first, so it is set at the
   size of the "Are you eligible?" heading above it rather than at the h3 step.
   It stays an <h3> because it sits inside that section. */
.contact__title {
  font-size: 28px;
  line-height: 38px;
  margin-bottom: 12px;
}

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

.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;
}

/* --------------------------------------------------------------------------
   11. 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);
}

/* --------------------------------------------------------------------------
   12. Questionnaire page
   -------------------------------------------------------------------------- */

/* The top padding is the homepage stage's, to the pixel. A reader moving from
   the landing page to a subpage should find the title where they left it, so
   `.stage` and `.page-head` are kept on one number rather than two that happen
   to be close. */
.page-head {
  padding-top: 56px;
  padding-bottom: 40px;
  border-bottom: 2px solid var(--wt-black);
}

@media (min-width: 768px) {
  .page-head {
    padding-top: 96px;
    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. */
/* No rule of its own: the bar is the divider. A border here stacked a third
   line under the tab underline and the bar within a few pixels. */
.q__progress {
  margin-bottom: 36px;
}

.q__phases ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  list-style: none;
  margin: 0 0 20px;
  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);
}

/* Outlined track, yellow fill — the outline is what makes the bar legible:
   yellow against a light interior alone would be about 1.2:1. The fill's
   dark leading edge marks the progress point at the 3:1 graphics threshold. */
.q__bar {
  height: 16px;
  background-color: var(--wt-white);
  border: 1px solid var(--wt-black);
  border-radius: 8px;
  overflow: hidden;
}

.q__bar-fill {
  display: block;
  height: 100%;
  background-color: var(--wt-yellow);
  box-shadow: 1px 0 0 var(--wt-black);
  transition: width 0.2s ease;
}

.q__bar-fill[style*="width:0%"],
.q__bar-fill[style*="width: 0%"] {
  box-shadow: none;
}

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

.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;
}

.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-yellow);
}

/* 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-rule);
}

/* No rule of its own: it always follows the "Why we ask this" accordion,
   which already closes on one. A third grey line here read as clutter. */
.q__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
}

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

/* A solid back button (the send page) still belongs on the left with the
   clear button; only the forward/submit button takes the auto margin. */
.q__nav .btn[data-back] {
  margin-left: 0;
}

/* The solid copy button (the sent page) likewise stays on the left, paired
   with the clear button beside it. */
.q__nav .btn[data-copy] {
  margin-left: 0;
}

/* 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-red-matte);
}

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

.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;
  font-size: 17px;
  line-height: 26px;
}

/* 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;
  }
}

/* --------------------------------------------------------------------------
   13. Content pages

   The six case pages, the two process pages and the two reference pages are
   built from these. Nothing here is a new visual language: the type, the
   colour and the rhythm are section 2's tokens, and the components below are
   the smallest set that lets a long statutory argument stay readable.
   -------------------------------------------------------------------------- */

.breadcrumbs {
  font-family: var(--font-sans-book);
  font-size: 15px;
  line-height: 24px;
  padding-top: 20px;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The separator is decorative and is drawn rather than typed, so it is never
   read out between the two link texts. */
.breadcrumbs li + li::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 8px;
  border-top: 1.5px solid var(--wt-grey-600);
  border-right: 1.5px solid var(--wt-grey-600);
  transform: rotate(45deg) translateY(-1px);
}

.breadcrumbs a {
  color: var(--wt-grey-600);
  border-bottom: 1px solid transparent;
}

.breadcrumbs a:hover {
  color: var(--wt-black);
  border-bottom-color: var(--wt-red);
}

.breadcrumbs [aria-current="page"] {
  color: var(--wt-black);
}

/* The same two-part title as the homepage stage: the first half in the bold
   weight, the <span> dropped onto its own line in the lighter one. One rule,
   because the two heads should not drift apart. */
.page-head h1 span,
.stage__title span {
  display: block;
  font-weight: 400;
}

/* And the same measure. A 68px line running the full width of the container
   reads as a banner rather than as a title; the stage has always been held to
   a short measure, and the subpage heads were the ones that drifted. Slightly
   wider than the stage's 18ch because the second half of a case headline
   ("as a successor-state citizen, or stateless") is longer than "by
   descent". */
.page-head h1 {
  max-width: 20ch;
}

.page-head__eyebrow {
  display: block;
  font-family: var(--font-sans-book);
  font-size: 15px;
  line-height: 24px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wt-red);
  margin-bottom: 16px;
}

.page-head__lead {
  max-width: 40rem;
  margin-top: 24px;
  margin-bottom: 0;
  font-size: 20px;
  line-height: 32px;
  color: var(--wt-black);
}

@media (min-width: 768px) {
  .page-head__lead {
    font-size: 24px;
    line-height: 36px;
  }
}

/* Mirrors .stage__actions, at the smaller step the page head is set in. */
.page-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 32px;
}

.page-meta {
  font-family: var(--font-sans-book);
  font-size: 15px;
  line-height: 24px;
  color: var(--wt-grey-600);
  margin-top: 32px;
}

/* Comparison table. Wide content scrolls inside its own box; the page body
   never scrolls sideways. */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 32px;
}

/* On the case pages the summary table follows the opening prose directly, and
   its first row would otherwise read as the next line of that paragraph. The
   gap matches the one the table already leaves below itself. */
.prose + .table-wrap {
  margin-top: 32px;
}

.table {
  width: 100%;
  min-width: 44rem;
  border-collapse: collapse;
  font-size: 17px;
  line-height: 26px;
  text-align: left;
}

.table th,
.table td {
  padding: 16px 20px 16px 0;
  vertical-align: top;
  border-bottom: 1px solid var(--wt-rule);
}

.table thead th {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  border-bottom: 2px solid var(--wt-black);
}

.table tbody th {
  font-family: var(--font-sans);
  font-weight: 700;
  white-space: nowrap;
}

/* The evidence matrix carries seven columns and still has to fit a phone
   without scrolling sideways, so it drops the shared table's 44rem floor and
   divides the width by rule instead: the label column takes 40%, the six case
   columns 10% each. */
.table--matrix {
  min-width: 0;
  table-layout: fixed;
}

.table--matrix th:first-child {
  width: 40%;
}

/* The shared table keeps its row headers on one line; this one cannot, or the
   longest label pushes the whole matrix past the viewport again. */
.table--matrix tbody th {
  white-space: normal;
}

.table--matrix thead th + th,
.table--matrix td {
  text-align: center;
  padding-left: 4px;
  padding-right: 4px;
}

@media (max-width: 640px) {
  .table--matrix {
    font-size: 13px;
    line-height: 20px;
  }
  /* Sighted readers get "1"; the column header still reads "Case 1" aloud. */
  .table--matrix .table__case-word {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* The statutory text, set apart from the prose around it. A reader must never
   be in doubt about which of the two they are reading, so the verbatim wording
   gets a rule, a label and a different measure from the explanation. */
.statute {
  border-left: 3px solid var(--wt-red);
  padding-left: 28px;
  margin-bottom: 40px;
}

.statute__label {
  display: block;
  font-family: var(--font-sans-book);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wt-grey-600);
  margin-bottom: 16px;
}

.section--green .statute,
.section--blue .statute,
.section--yellow .statute,
.section--orange .statute {
  border-left-color: var(--wt-black);
}

/* Grey-600 is chosen for secondary text against white. It does not clear 4.5:1
   against the tinted surfaces, so secondary text goes black there — the same
   trade the red list markers already make. */
.section--green .statute__label,
.section--blue .statute__label,
.section--yellow .statute__label,
.section--orange .statute__label,
.section--green .deflist__source,
.section--blue .deflist__source,
.section--yellow .deflist__source,
.section--orange .deflist__source {
  color: var(--wt-black);
}

/* One statutory limb, with its plain-English restatement under it. */
.limb {
  padding-top: 32px;
  border-top: 1px solid var(--wt-rule);
  margin-bottom: 32px;
}

.limb:first-child {
  border-top: 0;
  padding-top: 0;
}

.limb__statutory {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 19px;
  line-height: 30px;
  margin-bottom: 16px;
}

.limb__plain {
  margin-bottom: 0;
}

.card-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  margin-bottom: 32px;
}

@media (min-width: 768px) {
  .card-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .card-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card {
  border: 2px solid var(--wt-black);
  padding: 28px;
  display: flex;
  flex-direction: column;
}

.card__title {
  margin-bottom: 12px;
}

.card__body {
  font-size: 17px;
  line-height: 27px;
  margin-bottom: 20px;
}

.card__body:last-child {
  margin-bottom: 0;
}

.card__link {
  margin-top: auto;
}

/* Numbered process steps. The number is generated, so the markup stays an
   ordered list and the count cannot drift from the content. */
.steps {
  counter-reset: step;
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
}

.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 64px;
  padding-bottom: 40px;
}

.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--wt-black);
  color: var(--wt-white);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 18px;
}

.steps > li:last-child {
  padding-bottom: 0;
}

.step__title {
  margin-bottom: 12px;
  padding-top: 6px;
}

/* Glossary and document definitions. */
.deflist {
  margin: 0 0 40px;
}

/* On the case pages the list of what has to be proved follows the "what this
   case turns on" paragraph directly, and the first term has no rule above it
   to separate the two. The gap does that work instead. */
.prose + .deflist {
  margin-top: 32px;
}

.deflist__item {
  padding-top: 32px;
  border-top: 1px solid var(--wt-rule);
  margin-bottom: 32px;
}

.deflist__item:first-child {
  border-top: 0;
  padding-top: 0;
}

.deflist__term {
  margin-bottom: 12px;
}

/* The list of sources sets its terms a step down from a full h3. That size
   used to arrive through .cta-link, which no longer carries one. */
.deflist__term--sm {
  font-size: 17px;
  line-height: 26px;
}

.deflist__term .de {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--wt-grey-600);
}

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

/* The line under a definition that is part of the argument rather than a note
   about it — "Needed for cases 3 and 4" is a statement the reader acts on, so
   it is set as body text and not as the smaller grey .deflist__source. */
.deflist__needed {
  margin-top: 16px;
  margin-bottom: 0;
}

.deflist__source {
  font-family: var(--font-sans-book);
  font-size: 15px;
  line-height: 24px;
  color: var(--wt-grey-600);
  margin-top: 12px;
}

/* The FAQ page sets its questions as real headings rather than as accordion
   summaries — each one is a linkable anchor, which is the granularity an
   answer engine quotes. */
.qa {
  padding-top: 40px;
  border-top: 1px solid var(--wt-rule);
  margin-bottom: 40px;
}

.qa:first-child {
  border-top: 0;
  padding-top: 0;
}

.qa__question {
  margin-bottom: 20px;
}

.qa__permalink {
  margin-left: 12px;
  color: var(--wt-grey-300);
  font-family: var(--font-sans-book);
  font-weight: 400;
  font-size: 18px;
}

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

/* Footer sitemap. Every URL within one click of every page. */
.footer__sitemap {
  padding-top: 56px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.footer__sitemap-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .footer__sitemap-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .footer__sitemap-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.footer__sitemap h2 {
  font-family: var(--font-sans-book);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wt-grey-300);
  margin-bottom: 16px;
}

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

.footer__sitemap li {
  margin-bottom: 10px;
  /* Set on the li too, so the line box is not held open by the inherited
     strut on the entries that wrap. */
  line-height: 20px;
}

.footer__sitemap a {
  font-family: var(--font-sans-book);
  font-size: 16px;
  /* Single spacing: the six case entries wrap to two lines, and the wider
     leading made each one read as two separate links. */
  line-height: 20px;
  color: var(--wt-white);
  border-bottom: 1px solid transparent;
}

.footer__sitemap a:hover {
  border-bottom-color: var(--wt-red);
}

/* A page-level call through to the questionnaire. */
.next-step {
  padding-top: 40px;
  margin-top: 8px;
}

.next-step__title {
  margin-bottom: 16px;
}

.next-step__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 28px;
}