#intro.intro-letter-cover .intro-letter {
  position: relative;
  inset: auto;
  transform: none;
  translate: none;
  width: min(1180px, 100%);
  max-width: 100%;
  height: auto;
  max-height: none;
  overflow: visible;
  padding: 0;
  margin: 0 auto;
}
/* Text directly on the office background; only the English opening screen.
 * Blur belongs to the artwork layer, so the text remains sharp. */
#intro.intro-letter-cover .intro-letter {
  box-sizing: border-box;
  overscroll-behavior: contain;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #bec2c8;
  box-shadow: none;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .55);
  text-align: center;
  z-index: 2;
  scrollbar-width: thin !important;
  scrollbar-color: #9a9da0 transparent;
}
#intro.intro-letter-cover .intro-letter::-webkit-scrollbar {
  display: block !important;
  width: 5px !important;
}
#intro.intro-letter-cover .intro-letter::-webkit-scrollbar-thumb {
  background: #9a9da0 !important;
  border-radius: 3px;
}
#intro.intro-letter-cover .intro-letter:focus-visible {
  outline: 2px solid #bec2c8;
  outline-offset: 5px;
}
#intro.intro-letter-cover .intro-letter-copy {
  font: 200 20px/1.65 "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  color: inherit;
  letter-spacing: 0;
}
#intro.intro-letter-cover .intro-letter-copy p {
  font: inherit;
  color: inherit;
  text-align: justify;
  text-align-last: left;
  text-justify: inter-word;
  margin: 0 0 22px;
  padding: 0;
}
#intro.intro-letter-cover .intro-letter-copy p:last-child { margin-bottom: 0; }
#intro.intro-letter-cover .intro-letter-copy > p:first-child { text-indent: 1ch; }
body:has(#intro.intro-letter-cover.on)::after {
  content: "";
  position: fixed;
  inset: -18px;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
  background-image:
    radial-gradient(ellipse at 50% 43%, rgba(9,13,20,.88) 0%, rgba(9,13,20,.78) 38%, rgba(9,13,20,.28) 90%),
    linear-gradient(180deg, rgba(9,13,20,.08), rgba(9,13,20,.5)),
    url("/citizenship-test-assets/assets/illustrations/warsaw-online-legal-hub-v1.png");
  background-repeat: no-repeat;
  background-position: center, center, right bottom;
  background-size: cover, cover, auto 118vh;
  filter: blur(3px) saturate(.65) brightness(.8);
}
@media (min-width: 800px) and (max-width: 1099px) {
  #intro.intro-letter-cover .intro-letter {
  }
}
@media (min-width: 800px) and (max-height: 860px) {
  #intro.intro-letter-cover .intro-letter-copy { font-size: 19px; line-height: 1.6; }
  #intro.intro-letter-cover .intro-letter-copy p { margin-bottom: 20px; }
}
@media (max-width: 799px) {
  #intro.intro-letter-cover .intro-letter {
  }
  #intro.intro-letter-cover .intro-letter-copy { font-size: 17px; line-height: 1.6; }
  #intro.intro-letter-cover .intro-letter-copy p { margin-bottom: 18px; }
  body:has(#intro.intro-letter-cover.on)::after {
    background-size: cover, cover, auto 110vh;
    background-position: center, center, 65% center;
  }
}

/* The funnel has one dark visual system.  Browser colour preference must not
 * replace the readable opening screen with the previous pale campaign skin. */
#intro.intro-letter-cover .intro-letter {
  color: #bec2c8;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .55);
  scrollbar-color: #9a9da0 transparent;
}
body:has(#intro.intro-letter-cover.on)::after {
  background-image:
    radial-gradient(ellipse at 50% 43%, rgba(9,13,20,.88) 0%, rgba(9,13,20,.78) 38%, rgba(9,13,20,.28) 90%),
    linear-gradient(180deg, rgba(9,13,20,.08), rgba(9,13,20,.5)),
    url("/citizenship-test-assets/assets/illustrations/warsaw-online-legal-hub-v1.png");
  filter: blur(3px) saturate(.65) brightness(.8);
}
#intro.intro-letter-cover #intro-next {
  color: rgba(190, 194, 200, .85) !important;
  background: rgba(20, 24, 28, .14) !important;
  border-color: rgba(190, 194, 200, .22) !important;
  box-shadow: none !important;
}
#intro.intro-letter-cover #intro-restart-workflow {
  font-family: "Fraunces", Georgia, serif !important;
  font-style: italic !important;
  font-weight: 300 !important;
  font-size: 18px !important;
  letter-spacing: .01em !important;
  color: rgba(190, 194, 200, .85) !important;
  background: rgba(14, 20, 32, .35) !important;
  border: 1px solid rgba(182, 190, 198, .16) !important;
  box-shadow: none !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease, transform 150ms ease !important;
}
#intro.intro-letter-cover #intro-restart-workflow > span,
#intro.intro-letter-cover #intro-restart-workflow .intro-restart-label {
  font-family: "Fraunces", Georgia, serif !important;
  font-style: italic !important;
  font-weight: 300 !important;
  font-size: 18px !important;
  letter-spacing: .01em !important;
  color: rgba(190, 194, 200, .85) !important;
}
#intro.intro-letter-cover #intro-restart-workflow:hover {
  background: rgba(28, 38, 56, .6) !important;
  border-color: rgba(255, 255, 255, .3) !important;
  color: #ffffff !important;
}
#intro.intro-letter-cover #intro-restart-workflow:hover > span,
#intro.intro-letter-cover #intro-restart-workflow:hover .intro-restart-label {
  color: #ffffff !important;
}
#intro.intro-letter-cover #intro-restart-workflow:active {
}

/* Eight connected steps; animation illustrates the path, not saved progress. */
#intro.intro-letter-cover .intro-process {
  --step-bg: rgba(20, 24, 28, .28);
  --step-border: rgba(182, 190, 198, .16);
  --step-lit: rgba(66, 73, 79, .34);
  --step-outline: rgba(190, 199, 207, .38);
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 14px;
  list-style: none;
  margin: 16px 0 20px;
  padding: 4px 2px;
  color: inherit;
  text-shadow: none;
}
#intro.intro-letter-cover .intro-process li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 86px;
  box-sizing: border-box;
  padding: 12px 5px;
  border: 1px solid var(--step-border);
  border-radius: 12px;
  background: var(--step-bg);
  box-shadow: 0 5px 16px rgba(0,0,0,.05);
  font: 300 11.5px/1.4 "Plus Jakarta Sans", system-ui, sans-serif;
  letter-spacing: .035em;
  text-transform: uppercase;
}
/* The stage tiles stay clickable in the local funnel, while preserving the
   centred, unadorned two-line labels used by the live introduction. */
#intro.intro-letter-cover .intro-stage-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  color: inherit;
  text-align: center;
  text-decoration: none !important;
}
#intro.intro-letter-cover .intro-stage-link:visited,
#intro.intro-letter-cover .intro-stage-link:hover,
#intro.intro-letter-cover .intro-stage-link:active {
  color: inherit;
  text-decoration: none !important;
}
#intro.intro-letter-cover .intro-stage-link:focus-visible {
  outline: 1px solid rgba(190, 199, 207, .75);
  outline-offset: -5px;
  border-radius: 8px;
}
#intro.intro-letter-cover.on .intro-process li {
  animation: intro-step-travel 16s ease-in-out infinite;
  animation-delay: calc(var(--step) * 1.65s);
}
#intro.intro-letter-cover .intro-process li:nth-child(1) { --step: 0; }
#intro.intro-letter-cover .intro-process li:nth-child(2) { --step: 1; }
#intro.intro-letter-cover .intro-process li:nth-child(3) { --step: 2; }
#intro.intro-letter-cover .intro-process li:nth-child(4) { --step: 3; }
#intro.intro-letter-cover .intro-process li:nth-child(5) { --step: 4; }
#intro.intro-letter-cover .intro-process li:nth-child(6) { --step: 5; }
#intro.intro-letter-cover .intro-process li:nth-child(7) { --step: 6; }
#intro.intro-letter-cover .intro-process li:nth-child(8) { --step: 7; }
#intro.intro-letter-cover .intro-process-number {
  font-size: 10px;
  letter-spacing: .12em;
  opacity: .72;
}
#intro.intro-letter-cover .intro-process li:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: calc(50% - 10px);
  right: -13px;
  font-size: 12px;
  line-height: 20px;
  opacity: .7;
}
@keyframes intro-step-travel {
  0%, 14%, 100% { background: var(--step-bg); border-color: var(--step-border); }
  4%, 9% { background: var(--step-lit); border-color: var(--step-outline); }
}
@media (max-width: 799px) {
  #intro.intro-letter-cover .intro-process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "a b" "d c" "e f" "h g";
    gap: 18px 22px;
    max-width: 350px;
    margin: 0 auto;
  }
  #intro.intro-letter-cover .intro-process li { min-height: 74px; gap: 8px; }
  #intro.intro-letter-cover .intro-process li:nth-child(1) { grid-area: a; }
  #intro.intro-letter-cover .intro-process li:nth-child(2) { grid-area: b; }
  #intro.intro-letter-cover .intro-process li:nth-child(3) { grid-area: c; }
  #intro.intro-letter-cover .intro-process li:nth-child(4) { grid-area: d; }
  #intro.intro-letter-cover .intro-process li:nth-child(5) { grid-area: e; }
  #intro.intro-letter-cover .intro-process li:nth-child(6) { grid-area: f; }
  #intro.intro-letter-cover .intro-process li:nth-child(7) { grid-area: g; }
  #intro.intro-letter-cover .intro-process li:nth-child(8) { grid-area: h; }
  #intro.intro-letter-cover .intro-process li:not(:last-child)::after { right: -19px; }
  #intro.intro-letter-cover .intro-process li:nth-child(2)::after,
  #intro.intro-letter-cover .intro-process li:nth-child(4)::after,
  #intro.intro-letter-cover .intro-process li:nth-child(6)::after {
    content: "↓"; top: auto; bottom: -22px; right: calc(50% - 5px);
  }
  #intro.intro-letter-cover .intro-process li:nth-child(3)::after,
  #intro.intro-letter-cover .intro-process li:nth-child(7)::after {
    content: "←"; right: auto; left: -19px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #intro.intro-letter-cover.on .intro-process li { animation: none; }
}

@media (min-width: 800px) {
  #intro.intro-letter-cover .intro-process {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas: "a b c d" "h g f e";
    gap: 22px;
  }
  #intro.intro-letter-cover .intro-process li:nth-child(1) { grid-area: a; }
  #intro.intro-letter-cover .intro-process li:nth-child(2) { grid-area: b; }
  #intro.intro-letter-cover .intro-process li:nth-child(3) { grid-area: c; }
  #intro.intro-letter-cover .intro-process li:nth-child(4) { grid-area: d; }
  #intro.intro-letter-cover .intro-process li:nth-child(5) { grid-area: e; }
  #intro.intro-letter-cover .intro-process li:nth-child(6) { grid-area: f; }
  #intro.intro-letter-cover .intro-process li:nth-child(7) { grid-area: g; }
  #intro.intro-letter-cover .intro-process li:nth-child(8) { grid-area: h; }
  #intro.intro-letter-cover .intro-process li:not(:last-child)::after { right: -19px; }
  #intro.intro-letter-cover .intro-process li:nth-child(4)::after {
    content: "↓"; top: auto; bottom: -22px; right: calc(50% - 5px);
  }
  #intro.intro-letter-cover .intro-process li:nth-child(n+5):not(:last-child)::after {
    content: "←"; right: auto; left: -19px;
  }
}

/* RTL flow support (Hebrew): reverse arrow directions and anchors so flow follows reading direction. */
[dir="rtl"] #intro.intro-letter-cover .intro-letter {
  direction: rtl;
}
#intro.intro-letter-cover .codex-homepage-wordmark-svg {
  direction: ltr;
}
#intro.intro-letter-cover .codex-homepage-wordmark-svg text {
  direction: ltr;
  text-anchor: start;
}
@media (min-width: 800px) {
  [dir="rtl"] #intro.intro-letter-cover .intro-process li:nth-child(-n+3)::after {
    content: "←";
    left: -19px;
    right: auto;
  }
  [dir="rtl"] #intro.intro-letter-cover .intro-process li:nth-child(4)::after {
    content: "↓";
    top: auto;
    bottom: -22px;
    left: calc(50% - 5px);
    right: auto;
  }
  [dir="rtl"] #intro.intro-letter-cover .intro-process li:nth-child(n+5):not(:last-child)::after {
    content: "→";
    right: -19px;
    left: auto;
  }
}
@media (max-width: 799px) {
  [dir="rtl"] #intro.intro-letter-cover .intro-process li:nth-child(1)::after,
  [dir="rtl"] #intro.intro-letter-cover .intro-process li:nth-child(5)::after {
    content: "←";
    left: -19px;
    right: auto;
  }
  [dir="rtl"] #intro.intro-letter-cover .intro-process li:nth-child(2)::after,
  [dir="rtl"] #intro.intro-letter-cover .intro-process li:nth-child(4)::after,
  [dir="rtl"] #intro.intro-letter-cover .intro-process li:nth-child(6)::after {
    content: "↓";
    top: auto;
    bottom: -22px;
    left: calc(50% - 5px);
    right: auto;
  }
  [dir="rtl"] #intro.intro-letter-cover .intro-process li:nth-child(3)::after,
  [dir="rtl"] #intro.intro-letter-cover .intro-process li:nth-child(7)::after {
    content: "→";
    right: -19px;
    left: auto;
  }
}

/* Give the eight-step diagram more room on a full desktop canvas. */
@media (min-width: 1100px) {
  #intro.intro-letter-cover .intro-letter {
  }
  #intro.intro-letter-cover .intro-letter-copy p {
    max-width: 894px;
    margin-left: auto;
    margin-right: auto;
  }
  #intro.intro-letter-cover .intro-process li { font-size: 13px; }
}

#intro.intro-letter-cover .intro-letter-copy strong {
  font-weight: 600;
  color: inherit;
}
@media (min-width: 1100px) {
  #intro.intro-letter-cover .intro-letter-copy .intro-client-reference {
    max-width: 960px;
    margin-left: max(0px, calc((100% - 894px) / 2));
    margin-right: 0;
  }
  #intro.intro-letter-cover .intro-reference-followup { display: block; }
}

/* Two-row process: larger tiles (2026-09-14, Roman), mobile kept shorter so both CTAs stay in a 375x667 viewport. */
#intro.intro-letter-cover .intro-process li {
  min-height: 78px;
  gap: 8px;
  padding: 14px 8px;
  font-size: 13px;
}
#intro.intro-letter-cover .intro-process-number { font-size: 11px; }
@media (max-width: 799px) {
  #intro.intro-letter-cover .intro-process li {
    min-height: 68px;
    gap: 6px;
    padding: 11px 6px;
    font-size: 12px;
  }
}
@media (min-width: 800px) {
  #intro.intro-letter-cover .intro-letter-copy > p:first-child { margin-bottom: 0; }
  #intro.intro-letter-cover .intro-process {
    max-width: 1000px;
    margin: calc(24px + 1lh) auto;
  }
}
#intro.intro-letter-cover #intro-next,
#intro.intro-letter-cover #intro-restart-workflow {
  border-radius: 16px !important;
  box-sizing: border-box !important;
}
#intro.intro-letter-cover #intro-next {
  background: rgba(20, 24, 28, .14) !important;
  border-color: rgba(190, 194, 200, .22) !important;
  box-shadow: none !important;
  color: rgba(190, 194, 200, .85) !important;
  font-size: 18px !important;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
/* The Start label reads slightly larger than the restart one (Roman,
 * 2026-09-14); the button keeps its fixed --intro-cta-width/height. */
#intro.intro-letter-cover #intro-next .intro-cta-label {
  color: inherit !important;
  font-size: 20px !important;
}
@media (max-width: 799px) {
  #intro.intro-letter-cover #intro-next,
  #intro.intro-letter-cover #intro-restart-workflow {
    font-size: 15px !important;
  }
  #intro.intro-letter-cover #intro-restart-workflow > span,
  #intro.intro-letter-cover #intro-restart-workflow .intro-restart-label {
    font-size: 15px !important;
  }
  #intro.intro-letter-cover #intro-next .intro-cta-label {
    font-size: 16.5px !important;
  }
}

#intro.intro-letter-cover {
  --intro-cta-width: 296px;
  --intro-cta-height: 52px;
}
@media (max-width: 799px) {
  #intro.intro-letter-cover {
    --intro-cta-width: 216px;
    --intro-cta-height: 48px;
  }
}


#intro.intro-letter-cover #intro-next .intro-cta-label {
  line-height: 1;
}

/* Half a body-text line of extra space below the logo on desktop. */
@media (min-width: 800px) {
  #intro.intro-letter-cover .intro-letter {
  }
  #intro.intro-letter-cover #intro-next,
  #intro.intro-letter-cover #intro-restart-workflow {
  }
}