/* ============================================================================
   spanier.one — Design System v2 ("2026")
   ----------------------------------------------------------------------------
   Single global stylesheet. Page component .css files only hold page-scoped
   overrides built on these tokens. web-app/public/styles.css is an auto-synced
   copy of this file — never edit it directly.

   Doctrine: search intent → action. Eyebrow (context) → display heading
   (a verb) → one support line → one action. Evidence below the action or in
   <details>. Type is the layout; shadow is state; motion is optional.

   Contents
   01 Tokens
   02 Reset & base
   03 Accessibility primitives
   04 Typography (display scale, eyebrow, lead)
   05 Buttons
   06 Cards, chips, notices, price, steps, FAQ, details
   07 Forms
   08 Layout (containers, stage, grid helpers)
   09 Site shell (header, brand, nav, footer)
   10 Landing page components
   11 Checker components
   12 Knowledge components
   13 Legal & confirmation pages
   14 Responsive
   15 Forced colors, contrast, reduced motion, print
   ========================================================================== */

/* ============================================================================
   01 TOKENS
   ========================================================================== */
:root {
  color-scheme: light;

  /* Brand colors (see BRAND.md) */
  --canvas: #f3f5f1;
  --paper: #ffffff;
  --ink: #151514;
  --muted: #555a54;
  --line: #cbd0c8;
  --one: #3b2bbd;
  --one-dark: #261b82;
  --one-soft: #e8e6ff;
  --signal: #ffcb45;
  --danger: #a3213d;

  /* Semantic additions */
  --success: #226135;
  --danger-soft: #fff4f1;
  --success-soft: #f2f8f0;
  --signal-soft: #fff8df;
  --danger-strong: #8b2038;

  /* Legacy knowledge aliases (kept so existing class overrides keep working) */
  --knowledge-line: var(--ink);
  --knowledge-muted: #5e625d;
  --knowledge-soft: #e5e8e2;

  /* Layout */
  --measure: 1240px;
  --measure-narrow: 1180px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);

  /* Type stacks — system fonts only */
  --display: 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
  --body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --utility: ui-monospace, 'SFMono-Regular', Consolas, monospace;

  /* Shape & state */
  --radius: 0.2rem;
  --ease: cubic-bezier(0.22, 0.75, 0.2, 1);
  --shadow: 0 1.5rem 4rem rgba(21, 21, 20, 0.09);
  --shadow-hard: 0.9rem 0.9rem 0 var(--signal);
  --shadow-hard-sm: 0.45rem 0.45rem 0 var(--signal);
}

/* ============================================================================
   02 RESET & BASE
   ========================================================================== */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: auto;
  scrollbar-color: var(--one) var(--canvas);
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  font-family: var(--body);
  font-size: 1.125rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

body.knowledge-page {
  display: flex;
  min-height: 100svh;
  flex-direction: column;
  background: var(--canvas);
}

body.knowledge-page main {
  flex: 1;
}

body.app-page {
  background: var(--paper);
}

[hidden] {
  display: none !important;
}
[id] {
  scroll-margin-top: 6rem;
}

::selection {
  color: var(--paper);
  background: var(--one);
}

a {
  color: var(--one);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.22em;
}

a:hover {
  text-decoration-thickness: 0.16em;
}

button,
input,
select {
  font: inherit;
}

button,
select {
  cursor: pointer;
}

img {
  max-width: 100%;
  height: auto;
}

/* ============================================================================
   03 ACCESSIBILITY PRIMITIVES
   ========================================================================== */

/* One visible 3px focus ring with offset, everywhere interactive. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--one);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 1rem;
  left: -100vw;
  min-height: 2.75rem;
  padding: 0.65rem 1rem;
  color: var(--paper);
  background: var(--ink);
  font-weight: 800;
}

.skip-link:focus {
  left: 1rem;
}

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

/* ============================================================================
   04 TYPOGRAPHY
   ----------------------------------------------------------------------------
   Display H1 is the layout: clamp(3.5rem, 8vw, 7rem), weight 900,
   letter-spacing -0.05em, max-width 12ch. Long-form contexts (checker
   workspace, knowledge articles) intentionally cap their own headings.
   ========================================================================== */
h1,
h2,
h3,
h4 {
  margin-top: 0;
  font-family: var(--display);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

h1 {
  max-width: 12ch;
  margin-bottom: 1.6rem;
  font-size: clamp(3.5rem, 8vw, 7rem);
  line-height: 1;
  letter-spacing: -0.05em;
}

h2 {
  max-width: 20ch;
  margin-bottom: 2.5rem;
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

h3 {
  margin-bottom: 1rem;
  font-size: clamp(1.3rem, 1.9vw, 1.6rem);
}

h4 {
  font-size: 1.25rem;
}

/* .display promotes any element to the full display scale. */
.display {
  max-width: 12ch;
  font-family: var(--display);
  font-size: clamp(3.5rem, 8vw, 7rem);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1;
}

/* Monospace uppercase eyebrow with leading dash. Violet = context. */
.eyebrow,
.check-step,
.package-fit {
  font-family: var(--utility);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.35;
  text-transform: uppercase;
}

.eyebrow {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  margin: 0 0 1.4rem;
  color: var(--one);
}

.eyebrow::before {
  width: 1.4rem;
  height: 0.24rem;
  background: currentColor;
  content: '';
}

/* Eyebrow on dark bands (final-cta, ablauf) uses the signal color. */
.eyebrow--signal {
  color: var(--signal);
}

/* One support line, ≤12 words. */
.lead {
  max-width: 57ch;
  color: var(--muted);
  font-size: clamp(1.15rem, 1.6vw, 1.3rem);
  line-height: 1.55;
  text-wrap: pretty;
}

/* Inline code inside prose. */
p code,
li code {
  padding: 0.05em 0.28em;
  background: var(--one-soft);
  font-family: var(--utility);
  font-size: 0.86em;
}

/* Giant ".one" watermark motif. Decorative: aria-hidden="true" required. */
.watermark {
  position: absolute;
  z-index: 0;
  top: -0.35em;
  right: 0.04em;
  color: rgba(255, 255, 255, 0.1);
  font-family: var(--display);
  font-size: clamp(8rem, 18vw, 16rem);
  letter-spacing: -0.1em;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.watermark--soft {
  color: var(--one-soft);
}

/* ============================================================================
   05 BUTTONS
   ----------------------------------------------------------------------------
   ≥44px targets. Violet primary, ghost secondary. No radius beyond 0.2rem.
   ========================================================================== */
.button {
  display: inline-flex;
  min-height: 2.85rem;
  padding: 0.78rem 1.15rem;
  border: 2px solid var(--one);
  border-radius: var(--radius);
  align-items: center;
  justify-content: center;
  color: var(--paper);
  background: var(--one);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    translate 160ms var(--ease);
}

.button:hover {
  border-color: var(--one-dark);
  background: var(--one-dark);
}

.button:active {
  translate: 0 2px;
}

.button:disabled {
  border-color: var(--line);
  color: var(--muted);
  background: #e4e7e1;
  cursor: not-allowed;
}

.button--ghost {
  border-color: var(--ink);
  color: var(--ink);
  background: transparent;
}

.button--ghost:hover {
  border-color: var(--ink);
  color: var(--paper);
  background: var(--ink);
}

/* Signal action: reserved for dark offer surfaces. */
.button--signal {
  border-color: var(--signal);
  color: var(--ink);
  background: var(--signal);
}

.button--signal:hover {
  border-color: var(--ink);
  color: var(--paper);
  background: var(--ink);
}

.button-small {
  min-height: 2.75rem;
  padding: 0.65rem 0.9rem;
  font-size: 0.9rem;
}

/* ============================================================================
   06 CARDS, CHIPS, NOTICES, PRICE, STEPS, FAQ, DETAILS
   ----------------------------------------------------------------------------
   Shadow is state: quiet cards carry a 1px line; interactive cards carry a
   2px ink border plus a hard signal shadow that shifts on hover and flattens
   on :active.
   ========================================================================== */

/* Quiet card: 1px line border, paper. */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  background: var(--paper);
}

.card h3 {
  font-size: clamp(1.4rem, 2vw, 1.7rem);
}

.card p {
  color: var(--muted);
}

.card ul {
  padding-left: 1.2rem;
}

.card li {
  margin-block: 0.35rem;
}

.card li::marker {
  color: var(--one);
}

.card a {
  margin-top: auto;
  font-weight: 800;
}

/* Interactive card: 2px ink border + hard signal shadow as state. */
.card--shadow {
  border: 2px solid var(--ink);
  box-shadow: var(--shadow-hard);
}

/* Chip: monospace uppercase tag. */
.chip {
  display: inline-flex;
  min-height: 2.3rem;
  align-items: center;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--ink);
  color: var(--ink);
  font-family: var(--utility);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-decoration: none;
}

/* WCAG criterion chip: signal on dark bands. */
.wcag-chip {
  display: inline-flex;
  min-height: 2.3rem;
  align-items: center;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--signal);
  color: var(--signal);
  font-family: var(--utility);
  font-size: 0.75rem;
  font-weight: 900;
  text-decoration: none;
}

/* Notice blocks: left-bar callouts. */
.notice {
  max-width: 74rem;
  margin-top: 2.5rem;
  padding: 1.25rem 1.5rem;
  border-left: 0.5rem solid var(--one);
  background: var(--one-soft);
}

.notice strong {
  font-family: var(--display);
  font-size: 1.08rem;
}

.notice--signal {
  border-left-color: var(--signal);
  background: var(--paper);
}

.notice--danger {
  border-left-color: var(--danger);
  background: var(--danger-soft);
}

/* Price strip: big display price with utility unit. */
.price {
  margin: 0.5rem 0;
  color: var(--one);
  font-family: var(--display);
  font-size: clamp(2.25rem, 3.2vw, 2.9rem);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 1;
}

.price small {
  font-family: var(--utility);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Numbered steps 01–04: signal square marker on a top rule. */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 4rem 0 0;
  padding: 0;
  list-style: none;
}

.steps.three-steps {
  grid-template-columns: repeat(3, 1fr);
}

.steps li {
  position: relative;
  padding: 4.5rem 1.75rem 1.75rem;
  border-top: 1px solid currentColor;
}

.steps .step-number {
  position: absolute;
  top: 0;
  left: 1.75rem;
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  color: var(--ink);
  background: var(--signal);
  font-family: var(--utility);
  font-size: 0.8rem;
  font-weight: 900;
  translate: 0 -50%;
}

.steps strong,
.steps li > span:not(.step-number) {
  display: block;
}

.steps strong {
  font-family: var(--display);
  font-size: 1.25rem;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.steps li > span:not(.step-number) {
  margin-top: 0.75rem;
  opacity: 0.78;
}

/* FAQ: disclosure list with plus/minus indicator. */
.faq {
  max-width: 58rem;
}

.faq details {
  border-top: 1px solid var(--ink);
  padding-block: 0.75rem;
}

.faq details:last-child {
  border-bottom: 1px solid var(--ink);
}

.faq summary {
  display: grid;
  grid-template-columns: 1fr 2.75rem;
  gap: 1rem;
  align-items: center;
  min-height: 3.5rem;
  list-style: none;
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  cursor: pointer;
}

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

.faq summary::after {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  border: 2px solid var(--one);
  place-items: center;
  color: var(--one);
  content: '+';
  font-family: var(--utility);
  font-size: 1.1rem;
}

.faq details[open] summary::after {
  color: var(--paper);
  background: var(--one);
  content: '−';
}

.faq details p {
  max-width: 68ch;
  color: var(--muted);
}

/* Compact details inside cards (e.g. "Was ist enthalten?"). */
.card-details {
  margin-top: 1rem;
  border-top: 1px solid var(--line);
}

.card-details summary {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.6rem;
  list-style: none;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  cursor: pointer;
}

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

.card-details summary::after {
  display: grid;
  flex: 0 0 auto;
  width: 1.7rem;
  height: 1.7rem;
  border: 2px solid var(--one);
  place-items: center;
  color: var(--one);
  content: '+';
  font-family: var(--utility);
  font-size: 0.95rem;
}

.card-details[open] summary::after {
  color: var(--paper);
  background: var(--one);
  content: '−';
}

.card-details ul {
  margin: 0 0 1.25rem;
  font-size: 0.92rem;
}

/* ============================================================================
   07 FORMS
   ----------------------------------------------------------------------------
   Generic field primitives for new markup. The checker keeps its scoped
   .check-form selectors (section 11); both use the same visual language:
   2px ink borders, zero radius, canvas background, violet focus.
   ========================================================================== */
.field {
  display: grid;
  gap: 0.4rem;
}

.field label,
.field > span {
  font-family: var(--utility);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.input,
.select {
  width: 100%;
  min-height: 3.2rem;
  padding: 0.75rem 0.85rem;
  border: 2px solid var(--ink);
  border-radius: 0;
  color: var(--ink);
  background: var(--canvas);
}

.input::placeholder {
  color: #6a7069;
  opacity: 1;
}

.input:focus,
.select:focus {
  border-color: var(--one);
  background: var(--paper);
}

.input:user-invalid:not(:focus),
.select:user-invalid:not(:focus),
.input[aria-invalid='true'] {
  border-color: var(--danger);
}

.field-error {
  margin: 0.5rem 0 0;
  color: var(--danger);
  font-weight: 700;
}

.field-hint {
  display: block;
  color: var(--muted);
  font-size: 0.85rem;
}

/* Checkbox consent row. */
.consent {
  display: flex;
  gap: 0.7rem;
  align-items: start;
  margin-top: 1rem;
  font-size: 0.9rem;
}

.consent input {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.18rem;
  accent-color: var(--one);
}

/* ============================================================================
   08 LAYOUT
   ========================================================================== */
.container,
.site-header,
.hero,
.section,
.business-case,
.final-cta,
footer {
  width: min(var(--measure), calc(100% - var(--gutter) * 2));
  margin-inline: auto;
}

.section {
  padding-block: clamp(5rem, 9vw, 8.5rem);
}

.section-intro {
  max-width: 68ch;
  margin: -1rem 0 3rem;
  color: var(--muted);
  font-size: 1.12rem;
}

.section-muted {
  width: 100%;
  max-width: none;
  padding-inline: max(var(--gutter), calc((100% - var(--measure)) / 2));
  background: #e8ebe5;
}

/* Full-viewport stage: one viewport = one decision. */
.stage {
  display: flex;
  min-height: calc(100svh - 5.6rem);
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(4rem, 9vw, 8rem);
}

.stage-number {
  margin: 0 0 1rem;
  color: var(--one);
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  letter-spacing: -0.04em;
}

/* Grid helpers. */
.grid {
  display: grid;
  gap: 1.25rem;
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* ============================================================================
   09 SITE SHELL
   ----------------------------------------------------------------------------
   One visual language for all page modes (landing, checker, knowledge,
   legal). Mode-specific tweaks live in site-shell.css on top of this.
   ========================================================================== */
.site-header {
  position: sticky;
  z-index: 30;
  top: 0;
  display: flex;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  align-items: center;
  width: 100%;
  min-height: 5.6rem;
  margin-inline: 0;
  padding-inline: max(var(--gutter), calc((100% - var(--measure)) / 2));
  border-bottom: 1px solid rgba(21, 21, 20, 0.16);
  background: rgba(243, 245, 241, 0.94);
  backdrop-filter: blur(16px);
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.4rem;
  letter-spacing: -0.06em;
  text-decoration: none;
}

.brand img {
  display: block;
  width: clamp(9.5rem, 15vw, 12rem);
  height: auto;
}

footer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 2rem;
  align-items: center;
  padding-block: 2.5rem;
  border-top: 1px solid var(--ink);
}

footer nav {
  display: flex;
  gap: 0.4rem 1rem;
  flex-wrap: wrap;
  font-family: var(--utility);
  font-size: 0.8rem;
}

footer a {
  color: var(--ink);
}

/* ============================================================================
   10 LANDING PAGE COMPONENTS
   ========================================================================== */

/* Hero: two columns — statement left, decision right. */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(22rem, 0.8fr);
  gap: clamp(3rem, 6vw, 6rem);
  align-items: start;
  min-height: calc(100svh - 5.6rem);
  padding-block: clamp(5rem, 10vw, 9rem) clamp(6rem, 11vw, 10rem);
}

.hero > * {
  min-width: 0;
}

.hero > div:first-child {
  position: relative;
  z-index: 1;
}

/* Signal underline on the highlighted word. */
.hero-word {
  position: relative;
  display: inline-block;
  color: var(--one);
}

.hero-word::after {
  position: absolute;
  right: -0.2rem;
  bottom: -0.12em;
  left: 0.02em;
  height: 0.12em;
  background: var(--signal);
  content: '';
}

.hero-action {
  margin: 2rem 0 0.75rem;
}

/* Business case: sticky intro + numbered reasons. */
.business-case {
  display: grid;
  grid-template-columns: minmax(16rem, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: start;
  padding-block: clamp(4rem, 8vw, 7rem);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.business-case-intro {
  position: sticky;
  top: 8rem;
}

.business-case-intro h2 {
  max-width: 10ch;
  margin-bottom: 0;
  font-size: clamp(2rem, 3.2vw, 2.75rem);
}

.business-reasons {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: business-reason;
}

.business-reasons li {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 1rem 2rem;
  padding-block: 2rem;
  border-top: 1px solid var(--line);
  counter-increment: business-reason;
}

.business-reasons li:last-child {
  border-bottom: 1px solid var(--line);
}

.business-reasons h3 {
  margin-bottom: 0;
  font-size: clamp(1.35rem, 2vw, 1.65rem);
}

.business-reasons li > p:last-child {
  grid-column: 2;
  max-width: 58ch;
  margin: 0;
  color: var(--muted);
}

.reason-label {
  margin: 0.15rem 0 0;
  color: var(--one);
  font-family: var(--utility);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.reason-label::before {
  display: block;
  margin-bottom: 0.7rem;
  color: var(--ink);
  content: '0' counter(business-reason);
  font-family: var(--display);
  font-size: 1.4rem;
  letter-spacing: -0.04em;
  line-height: 1;
}

/* Dark "ablauf" band. */
#ablauf.section-muted {
  color: var(--paper);
  background: var(--one-dark);
}

#ablauf .eyebrow {
  color: var(--signal);
}

/* Packages: quiet price cards in a grid. */
.package-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}

.price-card {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  background: var(--paper);
}

.price-card h3 {
  font-size: clamp(1.4rem, 2vw, 1.7rem);
}

.price-card p {
  color: var(--muted);
}

.price-card ul {
  padding-left: 1.2rem;
}

.price-card li {
  margin-block: 0.35rem;
}

.price-card li::marker {
  color: var(--one);
}

.price-card::before {
  display: block;
  margin-bottom: 2.5rem;
  color: var(--muted);
  content: 'Preisorientierung · netto';
  font-family: var(--utility);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.package-card {
  display: flex;
  flex-direction: column;
}

.package-card::before {
  content: 'Beispiel · KMU';
}

.package-fit {
  min-height: 2.25rem;
  margin: 0 0 0.75rem;
  color: var(--one) !important;
}

.package-summary {
  min-height: 6.5rem;
}

.package-disclaimer {
  max-width: 82ch;
  color: var(--muted);
  font-size: 0.88rem;
}

/* Final CTA: violet band with ".one" watermark. */
.final-cta {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3rem;
  align-items: end;
  margin-bottom: 5rem;
  padding: clamp(2.25rem, 6vw, 5rem);
  overflow: hidden;
  color: var(--paper);
  background: var(--one);
}

.final-cta::before {
  position: absolute;
  top: -1.6rem;
  right: 4%;
  color: rgba(255, 255, 255, 0.1);
  content: '.one';
  font-family: var(--display);
  font-size: clamp(8rem, 18vw, 16rem);
  letter-spacing: -0.1em;
  line-height: 1;
}

.final-cta > * {
  position: relative;
}

.final-cta h2 {
  margin-bottom: 0;
}

.final-cta .eyebrow {
  color: var(--signal);
}

.final-cta .button {
  border-color: var(--paper);
  color: var(--one);
  background: var(--paper);
}

.cta-actions {
  display: grid;
  gap: 0.75rem;
  justify-items: center;
}

.cta-actions > a:last-child {
  color: var(--paper);
  font-weight: 800;
}

.cta-actions > span {
  font-size: 0.9rem;
  opacity: 0.82;
}

/* ============================================================================
   11 CHECKER COMPONENTS
   ----------------------------------------------------------------------------
   The checker is the reference language: hard-shadow workspace, numbered
   plan, live progress, result counts, findings, report download, offer card.
   body.checker-body / body.checker-active drive the full-viewport mode.
   ========================================================================== */
.checker-body {
  display: flex;
  min-height: 100svh;
  flex-direction: column;
}

.checker-body main {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
}

.checker-body .site-header .button {
  margin-left: auto;
}

.checker-body .hero {
  min-height: 100svh;
  padding-block: clamp(2rem, 5vh, 4rem);
}

.checker-body footer {
  padding-block: 1.25rem;
}

.checker-hero {
  grid-template-columns: minmax(0, 0.9fr) minmax(28rem, 1.1fr);
  align-items: center;
  transition:
    grid-template-columns 420ms var(--ease),
    gap 420ms var(--ease);
}

.checker-intro {
  overflow: hidden;
  opacity: 1;
  transition: opacity 220ms ease;
}

.checker-hero.is-check-active {
  grid-template-columns: minmax(0, 0fr) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
}

.checker-hero.is-check-active .checker-intro {
  opacity: 0;
  pointer-events: none;
}

.checker-hero h1 {
  max-width: 16ch;
  font-size: clamp(2.5rem, 4.5vw, 3.75rem);
  line-height: 1.02;
}

/* Workspace = interactive card with hard signal shadow. */
.check-form {
  position: relative;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 2px solid var(--ink);
  background: var(--paper);
  box-shadow: var(--shadow-hard);
}

.check-form h2 {
  max-width: 12ch;
  margin-bottom: 1.5rem;
  font-size: clamp(1.6rem, 2.4vw, 2.05rem);
}

.check-form > form > .button {
  width: 100%;
  margin-top: 1.25rem;
}

.check-form:focus-within {
  box-shadow:
    0.9rem 0.9rem 0 var(--signal),
    0 0 0 4px var(--one-soft);
}

.check-workspace {
  width: 100%;
  min-height: 31rem;
  overflow: hidden;
  background: var(--paper);
  transition:
    min-height 420ms var(--ease),
    box-shadow 220ms ease;
}

.check-workspace[data-phase='input'] {
  min-height: 0;
}

.checker-hero.is-check-active .check-workspace {
  min-height: 0;
}

.check-phase {
  min-height: 0;
}

.check-phase-lead {
  max-width: 60ch;
  color: var(--muted);
}

.check-step {
  display: inline-block;
  margin: 0 0 1rem;
  color: var(--one);
}

.check-running-header {
  display: block;
}

.check-running-header .check-step {
  margin-bottom: 0.55rem;
}

.check-running-header h2 {
  max-width: none;
  margin-bottom: 0;
  font-size: clamp(1.7rem, 3vw, 2.25rem);
}

.check-running-header .check-phase-lead {
  margin: 0.35rem 0 0;
}

.check-field-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  max-width: 38rem;
}

.check-form label:not(.consent) {
  display: block;
  margin: 0 0 0.4rem;
  font-family: var(--utility);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.check-form input:not([type='checkbox']),
.check-form select {
  width: 100%;
  min-height: 3.2rem;
  border: 2px solid var(--ink);
  border-radius: 0;
  padding: 0.75rem 0.85rem;
  color: var(--ink);
  background: var(--canvas);
}

.check-form input::placeholder {
  color: #6a7069;
  opacity: 1;
}

.check-form input:not([type='checkbox']):focus,
.check-form select:focus {
  border-color: var(--one);
  background: var(--paper);
}

.check-form input:not([type='checkbox']):user-invalid:not(:focus),
.check-form select:user-invalid:not(:focus) {
  border-color: var(--danger);
}

.check-form small {
  display: block;
  color: var(--muted);
}

.check-form input[aria-invalid='true'] {
  border-color: var(--danger);
}

.check-progress {
  height: 0.3rem;
  margin-block: 1.25rem 1.1rem;
  background: var(--line);
}

.check-progress span {
  display: block;
  height: 100%;
  background: var(--one);
  transition: width 500ms var(--ease);
}

.check-plan {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.check-plan::before {
  position: absolute;
  top: 1rem;
  right: 12.5%;
  left: 12.5%;
  height: 1px;
  background: var(--line);
  content: '';
}

.check-plan li {
  position: relative;
  display: grid;
  gap: 0.4rem;
  justify-items: center;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.check-plan li > span {
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  background: var(--paper);
  font-family: var(--utility);
  font-size: 0.7rem;
  font-weight: 800;
}

.check-plan strong {
  display: block;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.2;
}

.check-plan li[data-state='done'] > span {
  border-color: var(--ink);
  color: var(--paper);
  background: var(--ink);
}

.check-plan li[data-state='active'] > span {
  border-color: var(--one);
  color: var(--paper);
  background: var(--one);
}

.check-plan li[data-state='active'] strong {
  color: var(--ink);
}

/* Result phase. */
.check-result {
  position: relative;
}

.check-result-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: end;
}

.check-result-header h2 {
  max-width: 20ch;
  margin-bottom: 0;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  text-decoration: underline;
  text-decoration-color: var(--signal);
  text-decoration-thickness: 0.16em;
  text-underline-offset: 0.08em;
}

.check-result .check-step {
  margin-bottom: 0.65rem;
  padding: 0.3rem 0.45rem;
  color: var(--ink);
  background: var(--signal);
}

.result-counts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  min-width: 23rem;
}

.result-counts p {
  margin: 0;
  padding: 0.55rem 0.7rem 0.45rem;
  border: 0;
  background: var(--one-soft);
}

.result-counts strong,
.result-counts span {
  display: block;
}

.result-counts strong {
  color: var(--one);
  font-family: var(--display);
  font-size: 1.55rem;
  line-height: 1;
}

.result-counts span {
  color: var(--muted);
  font-size: 0.78rem;
}

.result-context {
  margin: 1rem 0;
  padding: 0.7rem 0.9rem;
  border-left: 0.35rem solid var(--signal);
  color: var(--ink);
  background: var(--signal-soft);
  font-size: 0.92rem;
}

.check-result-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr);
  gap: 1rem;
  align-items: stretch;
}

.result-findings h3 {
  margin-bottom: 0.65rem;
  font-size: 1.15rem;
}

.teaser-findings {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.teaser-findings li {
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line);
  border-left: 0.3rem solid var(--danger);
  background: var(--paper);
}

.teaser-findings strong,
.teaser-findings span,
.teaser-findings small {
  display: block;
}

.teaser-findings strong {
  color: var(--danger);
  font-family: var(--utility);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.teaser-findings span {
  font-size: 0.9rem;
  line-height: 1.35;
}

.teaser-findings small {
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.72rem;
}

.teaser-disclaimer {
  margin: 0.6rem 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

/* Report download strip. */
.report-download {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  margin: 0.65rem 0 0;
  padding: 0.65rem 0.75rem;
  border: 2px solid var(--one);
  background: var(--paper);
}

.report-download div {
  display: grid;
  gap: 0.1rem;
}

.report-download strong,
.report-download span {
  line-height: 1.3;
}

.report-download strong {
  font-size: 0.86rem;
}

.report-download span {
  color: var(--muted);
  font-size: 0.72rem;
}

.report-download-link {
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--ink);
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.report-download-link:hover {
  color: var(--paper);
  background: var(--ink);
}

/* Offer card: violet band with small signal shadow. */
.check-package {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 1rem;
  border: 0;
  color: var(--paper);
  background: var(--one);
  box-shadow: var(--shadow-hard-sm);
}

.check-package-label {
  margin: 0 0 0.55rem;
  color: var(--signal);
  font-family: var(--utility);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.check-package h3 {
  margin-bottom: 0.35rem;
  color: var(--paper);
  font-size: 1.25rem;
}

.check-package-price {
  margin: 0.25rem 0 0.6rem;
  color: var(--paper);
  font-family: var(--display);
  font-size: clamp(2rem, 4vw, 2.5rem);
  line-height: 1;
}

.check-package-price small {
  color: var(--paper);
  font-family: var(--body);
  font-size: 0.8rem;
}

.check-package > p:not([class]) {
  margin: 0;
  font-size: 0.86rem;
}

.check-package ul {
  margin: 0.65rem 0;
  padding-left: 1.1rem;
  font-size: 0.82rem;
}

.check-package li {
  margin-block: 0.2rem;
}

.check-package .button {
  width: 100%;
  margin-top: auto;
  padding: 0.7rem 0.8rem;
  border-color: var(--signal);
  color: var(--ink);
  background: var(--signal);
}

.check-package > small {
  margin-top: 0.45rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.7rem;
  line-height: 1.3;
}

.check-package-alternatives {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  margin-top: 0.45rem;
  padding-top: 0.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  font-size: 0.69rem;
}

.check-package-alternatives a {
  color: var(--paper);
}

.check-again {
  margin-top: 0.65rem;
  padding: 0;
  border: 0;
  color: var(--one);
  background: transparent;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ============================================================================
   12 KNOWLEDGE COMPONENTS
   ----------------------------------------------------------------------------
   Absorbed from the former knowledge.css (now deprecated). Long-form reading
   context: capped headings, numbered steps on a rail line, state labs,
   code pairs, self tests, tickets, handoffs.
   ========================================================================== */

/* Knowledge page hosts render transparently (was :host in knowledge.css). */
app-knowledge-hub-page,
app-knowledge-lab-page {
  display: contents;
}

.knowledge-shell {
  width: min(var(--measure-narrow), calc(100% - 32px));
  margin-inline: auto;
}

.knowledge-breadcrumb {
  padding: 22px 0 0;
  font-family: var(--utility);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.knowledge-breadcrumb a {
  color: var(--knowledge-muted);
}

.knowledge-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: clamp(42px, 8vw, 110px);
  align-items: start;
  padding: 30px 0 96px;
}

.knowledge-article {
  min-width: 0;
}

/* Knowledge kicker = article eyebrow. */
.knowledge-kicker,
.knowledge-step__number {
  font-family: var(--utility);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.knowledge-kicker {
  color: var(--one);
}

/* Article hero: capped long-form headings. */
.knowledge-hero h1,
.knowledge-hub-hero h1 {
  max-width: 900px;
  margin: 14px 0 20px;
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.knowledge-hero__answer,
.knowledge-hub-hero__intro {
  max-width: 62ch;
  margin: 0;
  color: var(--knowledge-muted);
  font-size: clamp(1.15rem, 1.6vw, 1.3rem);
  line-height: 1.55;
}

.knowledge-article .knowledge-hero h1 {
  margin: 10px 0 14px;
  font-size: clamp(2.35rem, 4.2vw, 3.4rem);
}

.knowledge-article .knowledge-hero__answer {
  font-size: clamp(1.05rem, 1.35vw, 1.18rem);
  line-height: 1.45;
}

.knowledge-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 16px 0 0;
  padding: 11px 0;
  border-top: 1px solid var(--knowledge-line);
  border-bottom: 1px solid var(--knowledge-line);
  color: var(--knowledge-muted);
  font-size: 0.9rem;
}

/* Numbered article steps on a vertical rail. */
.knowledge-step {
  position: relative;
  padding: 64px 0 0 52px;
}

.knowledge-step::before {
  position: absolute;
  top: 0;
  bottom: -64px;
  left: 13px;
  width: 2px;
  background: var(--knowledge-line);
  content: '';
}

.knowledge-step__number {
  position: absolute;
  top: 64px;
  left: 0;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 2px solid var(--knowledge-line);
  border-radius: 50%;
  background: var(--canvas);
}

.knowledge-step h2 {
  margin: 0 0 18px;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.knowledge-step h3 {
  margin: 30px 0 10px;
  font-size: 1.2rem;
}

.knowledge-step p,
.knowledge-step li {
  line-height: 1.65;
}

.knowledge-step li + li {
  margin-top: 8px;
}

/* State lab: side-by-side wrong/right comparison with hard shadow. */
.state-lab {
  margin: 24px 0 54px;
  border: 2px solid var(--knowledge-line);
  background: var(--paper);
  box-shadow: 10px 10px 0 var(--signal);
}

.state-lab__header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: baseline;
  padding: 14px 18px;
  border-bottom: 1px solid var(--knowledge-line);
  font-family: var(--utility);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.state-lab__header span:last-child {
  color: var(--one);
}

.lab-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px 24px;
  align-items: center;
  padding: 16px 18px;
  border-bottom: 1px solid var(--knowledge-line);
  background: #eef0eb;
}

.lab-controls > div:first-child {
  display: grid;
}

.lab-controls span {
  color: var(--knowledge-muted);
  font-size: 0.85rem;
}

.lab-controls__actions,
.lab-choice {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lab-controls button {
  min-height: 2.8rem;
  padding: 0.55rem 0.8rem;
  border: 2px solid var(--ink);
  background: var(--paper);
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

.lab-controls button:hover,
.lab-controls button:focus-visible,
.lab-controls button.is-selected {
  border-color: var(--one);
  color: var(--paper);
  background: var(--one);
}

.lab-controls button:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 3px;
}

.lab-controls button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.lab-controls .lab-key {
  color: var(--paper);
  background: var(--ink);
}

.lab-controls kbd {
  padding: 0.12rem 0.32rem;
  border: 1px solid currentColor;
  border-radius: 2px;
  font-family: var(--utility);
  font-size: 0.78em;
}

.lab-live-status {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0.7rem 0.8rem;
  border-left: 5px solid var(--one);
  background: var(--paper);
  font-family: var(--utility);
  font-size: 0.82rem;
}

.state-lab__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.state-panel {
  position: relative;
  min-width: 0;
  padding: clamp(22px, 4vw, 34px);
}

.state-panel + .state-panel {
  border-left: 1px solid var(--knowledge-line);
}

.state-panel--wrong {
  background: var(--danger-soft);
}

.state-panel--right {
  background: var(--success-soft);
}

.state-panel__verdict {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  margin-bottom: 22px;
  padding: 0.35rem 0.65rem;
  border: 1px solid currentColor;
  font-family: var(--utility);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.state-panel--wrong .state-panel__verdict {
  color: var(--danger-strong);
}

.state-panel--right .state-panel__verdict {
  color: var(--success);
}

.state-panel h2,
.state-panel h3 {
  max-width: 20ch;
  margin: 0 0 10px;
  font-size: clamp(1.45rem, 2.5vw, 2rem);
  line-height: 1.08;
}

.state-panel > p:last-child {
  margin-bottom: 0;
  color: var(--knowledge-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.state-observation {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--knowledge-line) 35%, transparent);
  font-size: 0.88rem;
}

.state-observation strong {
  display: block;
  color: var(--ink);
  font-family: var(--utility);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* WCAG impact band: ink strip with criterion chips. */
.wcag-impact {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: start;
  padding: 18px;
  border-top: 1px solid var(--knowledge-line);
  color: var(--paper);
  background: var(--ink);
}

.wcag-impact__criteria {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.wcag-impact p {
  margin: 0;
  color: #e0e0dc;
  font-size: 0.9rem;
  line-height: 1.5;
}

.comparison-cta {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  padding: 18px;
  border-top: 1px solid var(--knowledge-line);
}

.comparison-cta p {
  max-width: 52ch;
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
}

.comparison-cta a {
  flex: 0 0 auto;
  color: var(--one);
  font-weight: 900;
}

/* Code reveal + wrong/right code pair. */
.code-reveal {
  margin: 26px 0;
  border: 1px solid var(--knowledge-line);
  background: var(--paper);
}

.code-reveal summary {
  position: relative;
  display: flex;
  min-height: 3.5rem;
  align-items: center;
  padding: 0.8rem 4rem 0.8rem 1rem;
  color: var(--ink);
  font-weight: 900;
  cursor: pointer;
  list-style: none;
}

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

.code-reveal summary::after {
  position: absolute;
  right: 1rem;
  display: grid;
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--one);
  place-items: center;
  color: var(--one);
  content: '+';
  font-family: var(--utility);
  font-size: 1.25rem;
}

.code-reveal[open] summary::after {
  content: '−';
}

.code-reveal .code-pair {
  margin: 0;
  padding: 0 1rem 1rem;
}

.code-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 26px 0;
}

.code-card {
  overflow: hidden;
  border: 1px solid var(--knowledge-line);
  background: var(--paper);
}

.code-card__label {
  display: block;
  padding: 10px 14px;
  border-bottom: 1px solid var(--knowledge-line);
  font-family: var(--utility);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.code-card--bad .code-card__label {
  background: #ffd9d2;
}

.code-card--good .code-card__label {
  background: #d7f1d7;
}

.code-card pre {
  margin: 0;
  padding: 18px;
  font-size: 0.84rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.code-card code {
  font-family: var(--utility);
}

/* Inline knowledge note: signal left bar. */
.knowledge-note {
  margin: 24px 0;
  padding: 18px 20px;
  border-left: 5px solid var(--signal);
  background: var(--paper);
}

.knowledge-note strong {
  display: block;
  margin-bottom: 4px;
}

/* Self test: ink panel with checklist. */
.self-test {
  margin-top: 24px;
  padding: clamp(22px, 4vw, 38px);
  border-radius: 2px;
  color: var(--paper);
  background: var(--ink);
}

.self-test__status {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
  color: #d7d7d3;
}

.self-test__status output {
  color: var(--signal);
  font-weight: 800;
}

.self-test label {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  align-items: start;
  padding: 15px 0;
  border-top: 1px solid #41413f;
  line-height: 1.45;
  cursor: pointer;
}

.self-test input {
  width: 20px;
  height: 20px;
  accent-color: var(--signal);
}

/* Ticket template + copy button. */
.ticket {
  position: relative;
  margin: 24px 0;
  padding: 24px;
  border: 2px dashed var(--knowledge-line);
  background: var(--paper);
  font-family: var(--utility);
  white-space: pre-wrap;
}

.ticket-copy {
  margin-top: 8px;
  padding: 10px 15px;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  font-weight: 800;
  cursor: pointer;
}

.ticket-copy:hover,
.ticket-copy:focus-visible {
  color: var(--paper);
  background: var(--ink);
}

/* Handoff: signal band closing an article. */
.handoff {
  margin: 70px 0 0;
  padding: clamp(28px, 5vw, 54px);
  color: var(--ink);
  background: var(--signal);
}

.handoff h2 {
  max-width: 24ch;
  margin: 0 0 16px;
  font-size: clamp(1.9rem, 3.5vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.handoff p {
  max-width: 62ch;
  line-height: 1.6;
}

.handoff__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.handoff__button {
  display: inline-block;
  padding: 0.78rem 1.15rem;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  color: var(--paper);
  background: var(--ink);
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
}

.handoff__button:hover {
  color: var(--ink);
  background: transparent;
}

.handoff__button--secondary {
  color: var(--ink);
  background: transparent;
}

.handoff__button--secondary:hover {
  color: var(--paper);
  background: var(--ink);
}

.handoff__boundary {
  margin: 20px 0 0;
  font-size: 0.88rem;
  font-weight: 700;
}

.handoff__boundary + .handoff__actions {
  margin-top: 14px;
}

/* Article rail: sticky table of contents. */
.knowledge-rail {
  position: sticky;
  top: 24px;
  padding-top: 11px;
  border-top: 5px solid var(--one);
}

.knowledge-rail h2 {
  margin: 0 0 14px;
  font-family: var(--utility);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.knowledge-rail ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: rail;
}

.knowledge-rail li {
  counter-increment: rail;
  border-top: 1px solid #b8bbb5;
}

.knowledge-rail a {
  display: grid;
  grid-template-columns: 25px 1fr;
  gap: 8px;
  padding: 12px 0;
  color: var(--ink);
  font-size: 0.86rem;
  text-decoration: none;
}

.knowledge-rail a::before {
  color: var(--knowledge-muted);
  content: '0' counter(rail);
  font-family: var(--utility);
}

.knowledge-rail a:hover {
  color: var(--one);
}

/* Related articles. */
.related {
  margin-top: 72px;
}

.related h2 {
  font-size: 1.6rem;
}

.related__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.related__grid a {
  padding: 18px;
  border: 1px solid var(--knowledge-line);
  color: var(--ink);
  background: var(--paper);
  font-weight: 800;
  text-decoration: none;
}

.related__grid a:hover {
  color: var(--paper);
  background: var(--ink);
}

/* Hub hero + checker stage. */
.knowledge-hub-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(21rem, 0.7fr);
  gap: clamp(2rem, 7vw, 6rem);
  align-items: center;
  width: 100%;
  min-height: min(44rem, calc(100svh - 5rem));
  margin-inline: 0;
  padding: clamp(56px, 9vw, 112px) max(16px, calc((100vw - var(--measure-narrow)) / 2)) 64px;
  border-bottom: 2px solid var(--knowledge-line);
  overflow: hidden;
}

.knowledge-hub-mood {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--paper);
}

.knowledge-hub-mood::after {
  position: absolute;
  inset: 0;
  background: rgb(247 247 243 / 12%);
  content: '';
}

.knowledge-hub-mood,
.knowledge-hub-mood img {
  width: 100%;
  height: 100%;
}

.knowledge-hub-mood img {
  display: block;
  object-fit: cover;
  object-position: center;
  animation: knowledge-mood-arrive 650ms ease-out both;
}

.knowledge-hub-hero__copy,
.knowledge-checker-stage {
  position: relative;
  z-index: 1;
}

.knowledge-hub-hero h1 {
  max-width: 14ch;
}

.knowledge-hub-hero mark {
  position: relative;
  padding: 0;
  color: inherit;
  background: none;
}

.knowledge-hub-hero mark::after {
  position: absolute;
  right: -0.02em;
  bottom: 0.02em;
  left: 0.02em;
  height: 0.14em;
  background: var(--signal);
  content: '';
}

.knowledge-checker-stage {
  position: relative;
  padding: clamp(1.6rem, 4vw, 2.6rem);
  border: 2px solid var(--ink);
  background: var(--paper);
  box-shadow: 0.85rem 0.85rem 0 var(--signal);
}

.knowledge-checker-stage > * {
  position: relative;
}

.knowledge-checker-stage__label {
  margin: 0 0 1.4rem;
  color: var(--one);
  font-family: var(--utility);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.knowledge-checker-stage h2 {
  margin: 0 0 0.65rem;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
}

.knowledge-checker-stage p:not([class]) {
  color: var(--knowledge-muted);
  line-height: 1.5;
}

.knowledge-checker-stage .button {
  width: 100%;
  margin-top: 0.75rem;
  text-align: center;
}

.knowledge-checker-stage small {
  display: block;
  margin-top: 0.65rem;
  color: var(--knowledge-muted);
}

@keyframes knowledge-mood-arrive {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Hub index + funnel cards. */
.knowledge-index-heading {
  padding-top: 64px;
}

.knowledge-index-heading h2 {
  margin: 0.5rem 0 0;
  font-size: clamp(2rem, 4vw, 3.2rem);
}

.funnel-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  padding: 32px 0 100px;
}

.funnel-card {
  position: relative;
  display: flex;
  min-height: 16rem;
  flex-direction: column;
  padding: 28px;
  border: 1px solid var(--knowledge-line);
  color: var(--ink);
  background: var(--paper);
  text-decoration: none;
}

.funnel-card:first-child {
  grid-row: span 2;
  color: var(--paper);
  background: var(--ink);
}

.funnel-card__number {
  color: var(--one);
  font-family: var(--utility);
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1;
}

.funnel-card:first-child .funnel-card__number {
  color: var(--signal);
}

.funnel-card h2 {
  max-width: 20ch;
  margin: auto 0 14px;
  font-size: clamp(1.75rem, 3vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.funnel-card:not(:first-child) h2 {
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
}

.funnel-card p {
  max-width: 54ch;
  line-height: 1.5;
}

.funnel-card__terms {
  margin-top: 18px;
  color: var(--knowledge-muted);
  font-family: var(--utility);
  font-size: 0.78rem;
  line-height: 1.5;
}

.funnel-card:first-child .funnel-card__terms {
  color: #bdbdb8;
}

.funnel-card:hover {
  box-shadow: 8px 8px 0 var(--signal);
  transform: translateY(-3px);
}

/* ============================================================================
   13 LEGAL & CONFIRMATION PAGES
   ========================================================================== */
.legal-shell {
  display: grid;
  grid-template-columns: minmax(11rem, 15rem) minmax(0, 50rem);
  gap: clamp(2rem, 8vw, 7rem);
  width: min(var(--measure), calc(100% - var(--gutter) * 2));
  min-height: calc(100svh - 12rem);
  margin-inline: auto;
  padding-block: clamp(4rem, 8vw, 7rem);
}

.legal-nav {
  position: sticky;
  top: 7rem;
  display: grid;
  align-self: start;
  border-top: 1px solid var(--ink);
  font-family: var(--utility);
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
}

.legal-nav a {
  min-height: 2.75rem;
  padding: 0.75rem 0.25rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}

.legal-nav a[aria-current='page'] {
  border-bottom-color: var(--one);
  color: var(--one);
}

.legal-content h1 {
  margin-bottom: 3rem;
  font-size: clamp(2.75rem, 6vw, 5rem);
}

.legal-content section {
  padding-block: 1.5rem;
  border-top: 1px solid var(--line);
}

.legal-content h2 {
  margin-bottom: 0.8rem;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
}

.legal-content address {
  font-style: normal;
}

/* Confirmation pages (thank-you, payment-success) use .section as shell. */
.section#inhalt {
  min-height: calc(100svh - 12rem);
  padding-top: clamp(5rem, 12vw, 10rem);
}

.section#inhalt > .lead {
  max-width: 58ch;
}

.section#inhalt h1 {
  font-size: clamp(3rem, 7vw, 5.5rem);
}

/* ============================================================================
   14 CHECKER VIEWPORT LOCK & RESPONSIVE
   ========================================================================== */

/* Wide + tall: the active check locks into one viewport. */
@media (min-width: 721px) and (min-height: 700px) {
  body.checker-active {
    overflow: hidden;
  }
  body.checker-active main {
    flex: 0 0 100svh;
    min-height: 0;
    height: 100svh;
    overflow: hidden;
  }
  body.checker-active footer {
    display: none;
  }
  body.checker-active .checker-hero {
    align-items: center;
    min-height: 0;
    height: 100%;
    padding-block: 1.25rem;
  }
  body.checker-active .check-workspace {
    min-height: 0;
    max-height: calc(100svh - 2.5rem);
    height: auto;
    padding: clamp(1rem, 2.2vw, 1.75rem);
    overflow-y: auto;
  }
  body.checker-active .check-again {
    display: none;
  }
}

@media (min-width: 721px) and (max-height: 820px) {
  body.checker-active .checker-hero {
    padding-block: 0.65rem;
  }
  body.checker-active .check-workspace {
    max-height: calc(100svh - 1.3rem);
    padding: 0.9rem 1rem;
  }
  body.checker-active .check-result-header h2 {
    font-size: 1.85rem;
  }
  body.checker-active .result-context {
    margin: 0.55rem 0;
    padding: 0.5rem 0.7rem;
  }
  body.checker-active .result-findings h3 {
    margin-bottom: 0.4rem;
  }
  body.checker-active .teaser-findings li {
    padding-block: 0.5rem;
  }
  body.checker-active .teaser-findings li:nth-child(n + 3) {
    display: none;
  }
  body.checker-active .teaser-disclaimer {
    margin-block: 0.4rem;
  }
  body.checker-active .check-package ul {
    margin-block: 0.4rem;
  }
}

/* Shadow-as-state only where hover exists. */
@media (hover: hover) and (pointer: fine) {
  .button:hover {
    translate: 0 -2px;
  }
  .card--shadow {
    transition:
      translate 180ms var(--ease),
      box-shadow 180ms var(--ease);
  }
  .card--shadow:hover {
    translate: -0.3rem -0.3rem;
    box-shadow: 1.2rem 1.2rem 0 var(--signal);
  }
  .card--shadow:active {
    translate: 0;
    box-shadow: 0 0 0 var(--signal);
  }
  .final-cta .button:hover {
    border-color: var(--signal);
    color: var(--ink);
    background: var(--signal);
  }
}

/* Entrance motion only when motion is welcome. */
@keyframes arrive {
  from {
    opacity: 0;
    translate: 0 1.25rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero > div:first-child,
  .check-form {
    animation: arrive 520ms var(--ease) both;
  }
  .check-form {
    animation-delay: 100ms;
  }
}

/* Tablet. */
@media (min-width: 721px) and (max-width: 1080px) {
  .site-header {
    gap: 1rem;
  }
  .hero {
    grid-template-columns: 1fr;
    align-items: start;
    min-height: 0;
  }
  .check-form {
    width: min(100%, 44rem);
  }
  .checker-hero.is-check-active {
    grid-template-columns: 1fr;
  }
  .checker-hero.is-check-active .checker-intro {
    display: none;
  }
  .checker-hero.is-check-active .check-form {
    width: 100%;
  }
  .check-result-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr);
  }
  .business-case {
    grid-template-columns: 1fr;
  }
  .business-case-intro {
    position: static;
  }
  .grid-3,
  .package-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .package-card[data-package-card='new-site'] {
    grid-column: 1 / -1;
  }
  .steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem 0;
  }
  .steps.three-steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Knowledge tablet. */
@media (max-width: 820px) {
  .knowledge-hub-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: clamp(48px, 10vw, 72px);
  }
  .knowledge-hub-mood::after {
    background: rgb(247 247 243 / 38%);
  }
  .knowledge-hub-mood img {
    object-position: 58% center;
  }
  .knowledge-layout {
    grid-template-columns: 1fr;
  }
  .knowledge-rail {
    position: static;
  }
  .knowledge-rail ol {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .knowledge-rail li {
    border-right: 1px solid #b8bbb5;
  }
  .funnel-grid {
    grid-template-columns: 1fr;
  }
  .funnel-card:first-child {
    grid-row: auto;
  }
}

/* Mobile. */
@media (max-width: 720px) {
  :root {
    --gutter: 1rem;
  }
  body.checker-body {
    overflow: auto;
  }
  .checker-body main {
    flex: 1;
    justify-content: flex-start;
    min-height: 0;
    height: auto;
    overflow: visible;
  }
  .checker-body footer {
    display: grid;
  }
  h1 {
    font-size: clamp(2.5rem, 10vw, 3.5rem);
  }
  h2 {
    font-size: clamp(1.9rem, 7vw, 2.5rem);
  }
  .site-header {
    min-height: 4.8rem;
  }
  .site-header .button {
    margin-left: auto;
  }
  .brand img {
    width: 9.25rem;
  }
  .button-small {
    padding-inline: 0.7rem;
    font-size: 0.85rem;
  }
  .hero {
    grid-template-columns: 1fr;
    gap: 4rem;
    min-height: 0;
    padding-block: 4.5rem 6rem;
  }
  .checker-hero,
  .checker-hero.is-check-active {
    grid-template-columns: 1fr;
    gap: 2rem;
    align-content: start;
    padding-block: 2.25rem 1rem;
  }
  .checker-hero .checker-intro .lead {
    display: none;
  }
  .checker-hero.is-check-active .checker-intro {
    display: none;
  }
  .checker-hero .checker-intro .eyebrow {
    margin-bottom: 0.9rem;
  }
  .checker-hero .checker-intro h1 {
    margin: 0;
  }
  .stage {
    min-height: 0;
    padding-block: 4rem 5rem;
  }
  .check-form {
    padding: 1.35rem;
    box-shadow: 0.5rem 0.5rem 0 var(--signal);
  }
  .checker-hero .check-form {
    width: 100%;
    min-height: 0;
    padding: 1rem;
  }
  .checker-hero .check-phase-lead {
    margin-bottom: 0.5rem;
    font-size: 0.88rem;
  }
  .check-running-header {
    display: block;
  }
  .check-plan {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .check-plan li {
    min-height: 0;
    padding: 0;
  }
  .check-progress {
    margin-block: 0.65rem;
  }
  .checker-hero .check-form label:not(.consent) {
    margin-top: 0.6rem;
  }
  .checker-hero .check-form input:not([type='checkbox']),
  .checker-hero .check-form select {
    min-height: 2.75rem;
  }
  .checker-hero .consent {
    margin-top: 0.65rem;
    font-size: 0.8rem;
  }
  .check-field-grid,
  .check-result-header,
  .check-result-grid {
    grid-template-columns: 1fr;
  }
  .check-result-header {
    gap: 0.75rem;
  }
  .result-counts {
    min-width: 0;
  }
  .teaser-findings li:nth-child(n + 3) {
    display: none;
  }
  .business-case {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .business-case-intro {
    position: static;
  }
  .business-reasons li {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .business-reasons li > p:last-child {
    grid-column: 1;
  }
  .grid-2,
  .grid-3,
  .grid-4,
  .steps,
  .steps.three-steps,
  .package-grid,
  .final-cta {
    grid-template-columns: 1fr;
  }
  .package-card[data-package-card='new-site'] {
    grid-column: auto;
  }
  .steps {
    position: relative;
    gap: 0;
    margin-top: 2.25rem;
  }
  .steps::before {
    position: absolute;
    top: 1.1rem;
    bottom: 1.5rem;
    left: 1.1rem;
    width: 1px;
    background: currentColor;
    content: '';
    opacity: 0.48;
  }
  .steps li {
    min-height: 0;
    padding: 0 0 1.75rem 3.5rem;
    border-top: 0;
  }
  .steps li:last-child {
    padding-bottom: 0;
  }
  .steps .step-number {
    top: 0;
    left: 0;
    width: 2.25rem;
    height: 2.25rem;
    translate: 0;
  }
  .steps strong {
    padding-top: 0.15rem;
    font-size: 1.08rem;
  }
  .steps li > span:not(.step-number) {
    margin-top: 0.25rem;
    font-size: 0.88rem;
    line-height: 1.4;
  }
  .package-summary {
    min-height: 0;
  }
  .package-fit {
    min-height: 0;
  }
  .final-cta {
    align-items: start;
  }
  .final-cta .button {
    margin-top: 0.5rem;
  }
  footer {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem 1rem;
    padding-block: 1.35rem;
  }
  footer > p {
    margin: 0;
    font-size: 0.9rem;
    text-align: right;
  }
  footer nav {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin-top: 0.25rem;
    font-size: 0.72rem;
  }
  footer nav a {
    display: flex;
    min-height: 2.4rem;
    align-items: center;
    border-top: 1px solid var(--line);
    text-decoration: none;
  }
  footer nav a:nth-child(even) {
    padding-left: 0.75rem;
    border-left: 1px solid var(--line);
  }
  .legal-shell {
    grid-template-columns: 1fr;
  }
  .legal-nav {
    position: static;
    grid-template-columns: repeat(2, 1fr);
  }

  /* Mobile active check: the workspace owns the viewport. */
  body.checker-active {
    overflow: hidden;
  }
  body.checker-active main {
    flex: 0 0 100svh;
    min-height: 0;
    height: 100svh;
    overflow: hidden;
  }
  body.checker-active footer {
    display: none;
  }
  body.checker-active .checker-hero {
    align-items: center;
    min-height: 0;
    height: 100%;
    padding-block: 0.75rem;
  }
  body.checker-active .site-header .button {
    display: none;
  }
  body.checker-active .check-workspace {
    min-height: 0;
    max-height: calc(100svh - 1.5rem);
    height: auto;
    padding: 1rem;
    box-shadow: none;
    overflow-y: auto;
  }
  body.checker-active .check-result-header {
    gap: 0.4rem;
  }
  body.checker-active .check-result-header h2 {
    font-size: clamp(1.55rem, 8vw, 2rem);
  }
  body.checker-active .result-counts {
    gap: 0.35rem;
  }
  body.checker-active .result-counts p {
    padding: 0.4rem 0.5rem;
  }
  body.checker-active .result-counts strong {
    font-size: 1.25rem;
  }
  body.checker-active .result-context {
    margin: 0.55rem 0;
    padding: 0.5rem 0.65rem;
    font-size: 0.78rem;
    line-height: 1.35;
  }
  body.checker-active .check-result-grid {
    gap: 0.55rem;
  }
  body.checker-active .result-findings h3 {
    margin-bottom: 0.35rem;
    font-size: 0.95rem;
  }
  body.checker-active .teaser-findings {
    gap: 0;
  }
  body.checker-active .teaser-findings li {
    padding: 0.5rem 0.6rem;
  }
  body.checker-active .teaser-findings li:nth-child(n + 2) {
    display: none;
  }
  body.checker-active .teaser-findings span {
    font-size: 0.78rem;
  }
  body.checker-active .teaser-disclaimer {
    display: none;
  }
  body.checker-active .report-download {
    margin-top: 0.4rem;
    padding: 0.4rem 0.5rem;
  }
  body.checker-active .report-download span {
    display: none;
  }
  body.checker-active .report-download-link {
    padding: 0.35rem 0.45rem;
    font-size: 0.7rem;
  }
  body.checker-active .check-package {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.2rem 0.75rem;
    padding: 0.65rem;
  }
  body.checker-active .check-package-label {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 0.7rem;
  }
  body.checker-active .check-package h3 {
    margin: 0;
    font-size: 0.95rem;
  }
  body.checker-active .check-package-price {
    margin: 0;
    font-size: 1.7rem;
    text-align: right;
  }
  body.checker-active .check-package > p:not([class]),
  body.checker-active .check-package ul {
    display: none;
  }
  body.checker-active .check-package > small {
    grid-column: 1 / -1;
    margin-top: 0.2rem;
    font-size: 0.6rem;
    line-height: 1.2;
  }
  body.checker-active .check-package .button {
    grid-column: 1 / -1;
    margin-top: 0.35rem;
    padding: 0.6rem;
    font-size: 0.88rem;
  }
  body.checker-active .check-package-alternatives {
    grid-column: 1 / -1;
    justify-content: space-between;
    margin-top: 0.15rem;
    padding-top: 0.25rem;
    font-size: 0.64rem;
  }
  body.checker-active .check-again {
    margin-top: 0.35rem;
    font-size: 0.78rem;
  }
}

/* Knowledge mobile. */
@media (max-width: 620px) {
  .knowledge-shell {
    width: min(100% - 22px, var(--measure-narrow));
  }
  .knowledge-shell.knowledge-hub-hero {
    width: 100%;
    margin-inline: 0;
  }
  .knowledge-layout {
    padding-top: 32px;
  }
  .knowledge-step {
    padding-left: 40px;
  }
  .code-pair,
  .state-lab__grid,
  .related__grid {
    grid-template-columns: 1fr;
  }
  .lab-controls {
    grid-template-columns: 1fr;
  }
  .lab-controls__actions,
  .lab-choice {
    flex-direction: column;
  }
  .lab-controls button {
    width: 100%;
  }
  .state-panel + .state-panel {
    border-top: 1px solid var(--knowledge-line);
    border-left: 0;
  }
  .wcag-impact {
    grid-template-columns: 1fr;
  }
  .comparison-cta {
    align-items: flex-start;
    flex-direction: column;
  }
  .knowledge-rail ol {
    grid-template-columns: 1fr;
  }
  .knowledge-hero h1,
  .knowledge-hub-hero h1 {
    font-size: clamp(2.2rem, 10vw, 3rem);
  }
  .handoff__actions {
    align-items: stretch;
    flex-direction: column;
  }
  .handoff__button {
    text-align: center;
  }
}

/* Small mobile. */
@media (max-width: 420px) {
  h1 {
    font-size: 2.6rem;
  }
  .hero h1 {
    font-size: clamp(2.2rem, 9vw, 2.9rem);
  }
  .checker-hero h1 {
    font-size: clamp(2rem, 8.5vw, 2.6rem);
  }
  .site-header {
    gap: 0.5rem;
  }
  .brand img {
    width: 7.8rem;
  }
  .button-small {
    font-size: 0.8rem;
  }
  .result-counts {
    grid-template-columns: 1fr;
  }
  .check-result .result-counts {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================================================
   15 FORCED COLORS, CONTRAST, REDUCED MOTION, PRINT
   ========================================================================== */
@media (prefers-contrast: more) {
  :root {
    --muted: #30332f;
    --line: #666b64;
    --one-soft: #d8d5ff;
    --knowledge-muted: #3a3d38;
  }
  .card,
  .price-card {
    border-width: 2px;
  }
  .site-header {
    background: var(--canvas);
    backdrop-filter: none;
  }
}

@media (forced-colors: active) {
  /* Decorative motifs carry no meaning: remove them. */
  .hero > div:first-child::before,
  .hero-word::after,
  .final-cta::before,
  .knowledge-checker-stage::before,
  .watermark {
    content: none;
  }
  .button,
  .handoff__button {
    border-color: ButtonText;
    color: ButtonText;
    background: ButtonFace;
  }
  .check-form,
  .card--shadow,
  .state-lab,
  .knowledge-checker-stage,
  .check-package,
  .funnel-card,
  .funnel-card:hover {
    box-shadow: none;
  }
  .steps .step-number {
    border: 1px solid CanvasText;
  }
  .check-progress {
    border: 1px solid CanvasText;
  }
  .wcag-chip,
  .chip {
    border-color: LinkText;
    color: LinkText;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .checker-hero,
  .checker-intro,
  .check-workspace,
  .knowledge-hub-mood img {
    transition: none;
  }
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media print {
  body {
    background: var(--paper);
    font-size: 12pt;
  }
  .site-header {
    position: static;
    backdrop-filter: none;
  }
  .site-header .button,
  .skip-link,
  .handoff__actions,
  .comparison-cta,
  .knowledge-hub-mood {
    display: none;
  }
  .check-form,
  .card--shadow,
  .state-lab,
  .knowledge-checker-stage,
  .check-package,
  .funnel-card {
    box-shadow: none;
  }
  .card,
  .price-card,
  .state-lab,
  .code-card,
  .funnel-card {
    break-inside: avoid;
  }
  a {
    color: var(--ink);
  }
}