/* Public site (landing, legal) — design: landing comp A "the layer underneath"
   (the 2026-09-30 design comp and its design brief). Sits on top of base.css and reads
   ONLY custom properties compiled from the design tokens (the site palette is color.site-* in
   the hausai theme); translucent lines and glows are color-mix() of those tokens, never a
   raw colour. Fonts: the token stacks (Geist first in the hausai theme, from
   fonts.hausai.css). Self-hosted, no third-party rule/font/import (Rule 27). */

[hidden] { display: none !important; }

/* In-page jumps land below the sticky header (checklist E3.7); smooth only for those who have not asked for stillness. */
html { scroll-padding-top: 88px; background: var(--color-site-bg); color-scheme: dark; }   /* the overscroll area is the site's black too; color-scheme: the UA's own parts (scrollbars, form controls, autofill) are dark with it (E4.14) */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

.site {
  /* One type scale (checklist E2.3): at 1440 px the sizes are 13 14 15 16 17 19 22 27 40 52 78 — neighbours at
     least 6% apart, no half-pixel near-twins — and the weights are 400 / 500 / 600. */
  --site-line: color-mix(in srgb, var(--color-site-text) 8%, transparent);
  --site-line-strong: color-mix(in srgb, var(--color-site-text) 13%, transparent);
  /* the edge that shows a field or checkbox is there: 3:1 against the panel (WCAG 1.4.11, checklist E4.2) */
  --site-line-control: color-mix(in srgb, var(--color-site-text) 42%, transparent);
  --site-gutter: clamp(20px, 4vw, 40px);
  --site-col-gap: 24px;    /* the 12-column grid's gap; the door's form column is placed on that grid (see .door) */
  --how-rail: 64px;        /* the how-list's marker rail: it hangs left of the text column so the TEXT sits on the shared edge */
  --site-ease: cubic-bezier(.2, .7, .2, 1);
  --site-ramp: linear-gradient(95deg, var(--color-site-amber) 0%, var(--color-site-rail-mid) 50%, var(--color-accent) 100%);
  background: var(--color-site-bg);
  color: var(--color-site-text-soft);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.site ::selection { background: color-mix(in srgb, var(--color-accent) 35%, transparent); color: var(--color-site-text); }
:where(.site) :is(h1, h2, h3, h4) { color: var(--color-site-text); margin: 0; font-weight: 600; text-wrap: balance; }
:where(.site) p { margin: 0; text-wrap: pretty; }
:where(.site) a { color: inherit; }
.site main { padding: 0; max-width: none; margin: 0; }

.site-wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--site-gutter); }
.site-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--site-col-gap); }

/* ── header and footer: the live door page's (CEO 2026-09-30 18:30) ── */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--color-site-bg) 80%, transparent);
  backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--site-line);
}
.site-header__in { display: flex; align-items: center; gap: 24px; height: 68px; }
.site-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; }
.site-brand__mark { width: 30px; height: 30px; flex: none; }
.site-wordmark { font-weight: 600; font-size: 19px; letter-spacing: -.02em; color: var(--color-site-text); }
.site-wordmark__ai { color: var(--color-gradient-wordmark-end); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .site-wordmark__ai {
    background: linear-gradient(90deg, var(--color-gradient-wordmark-start), var(--color-gradient-wordmark-end));
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
}
.site-lang {
  margin-left: auto; padding: 8px 12px;
  font: 500 13px/1 var(--font-family-mono); letter-spacing: .04em;
  color: var(--color-site-text-soft); text-decoration: none;
  border: 1px solid var(--site-line-strong); border-radius: 999px;
  transition: border-color .2s var(--site-ease), color .2s var(--site-ease);
}
.site-lang:hover { border-color: var(--color-site-amber); color: var(--color-site-text); }

.site-footer { border-top: 1px solid var(--site-line); }
.site-footer__in {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding-top: 40px; padding-bottom: 40px; text-align: center;
}
.site-brand--small .site-brand__mark { width: 22px; height: 22px; }
.site-brand--small .site-wordmark { font-size: 15px; color: var(--color-site-text-soft); }
.site-footer__links { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.site-footer__links li + li::before { content: "·"; margin: 0 10px; color: var(--color-site-text-muted); }
.site-footer__links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; color: var(--color-site-text-muted); font-size: 14px; text-decoration: none; }
.site-footer__links a:hover { color: var(--color-site-text); }
.site-footer__note { font-size: 13px; color: var(--color-site-text-muted); }

/* ── buttons and links ── */
.site .btn {
  gap: 12px; min-height: 50px; padding: 0 22px; border: 0; border-radius: 12px;
  font-weight: 500; font-size: 16px; letter-spacing: -.005em;
  transition: transform .2s var(--site-ease), box-shadow .2s var(--site-ease), background .2s var(--site-ease);
}
.site .btn--primary {
  background: linear-gradient(180deg, var(--color-accent-solid), var(--color-accent-solid-hover));
  color: var(--color-on-accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-on-accent) 14%, transparent) inset;
}
.site .btn--primary:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--color-accent-solid), var(--color-accent-solid-hover));
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-on-accent) 22%, transparent) inset,
              0 10px 24px -14px color-mix(in srgb, var(--color-accent) 60%, transparent);
}
.site .btn::after, .site-textlink::after {
  content: ""; display: inline-block; width: 9px; height: 9px; flex: none;
  border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor;
  transform: rotate(45deg); transition: transform .2s var(--site-ease);
}
.site .btn:hover::after, .site-textlink:hover::after { transform: translateX(3px) rotate(45deg); }
.site-textlink {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 0;
  color: var(--color-site-text); font-size: 16px; text-decoration: none;
  border-bottom: 1px solid var(--site-line-strong); transition: border-color .2s var(--site-ease);
}
.site-textlink:hover { border-color: var(--color-accent); }

/* ── hero ── */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--site-line); }
.hero picture { display: contents; }   /* the <img> stays the grid item; <picture> only picks the file */
.hero picture > source { display: none; }   /* under display:contents a <source> would take a grid cell (review E2.10) */
.hero::before {
  content: ""; position: absolute; right: -8vw; top: 50%; translate: 0 -50%; width: 64vw; height: 110%;
  pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--color-brand-violet) 8%, transparent),
              color-mix(in srgb, var(--color-site-amber) 4%, transparent) 45%, transparent 72%);
}
.hero__in {
  position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center;
  gap: clamp(24px, 4vw, 64px); min-height: min(820px, calc(100svh - 68px)); padding-top: 56px; padding-bottom: 72px;
}
.hero h1 { font-size: clamp(40px, 5.4vw, 78px); line-height: .98; letter-spacing: -.045em; font-weight: 600; }
.hero__hl { white-space: nowrap; color: var(--color-site-rail-mid); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__hl { background: var(--site-ramp); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.hero__sub { margin-top: 28px; max-width: 36ch; font-size: clamp(18px, 1.55vw, 22px); line-height: 1.5; color: var(--color-site-text-soft); }
.hero__links { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.hero__figure-wrap { justify-self: end; width: min(112%, 620px); margin-right: -24px; display: flex; flex-direction: column; align-items: flex-end; }
/* The figure is its own start/stop button (CEO 2026-10-13; WCAG 2.2.2): no button chrome, the focus ring is the page's own
   (base.css :focus-visible), shaped to the picture. Disabled (no script) it is just the picture. */
.hero__figure-btn { display: block; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; font: inherit; cursor: pointer; }
.hero__figure-btn:disabled { cursor: default; }
.hero__figure { display: block; width: 100%; height: auto; }
/* Without script the button is off and nothing moves. The description's loop line (it repeats; Enter or Space stops and starts it)
   would then tell a listener about a control that is not there, so it is taken out of what assistive technology reads until site.js
   enables the button. Line 8 of figure_desc is that line (a site test pins the number against the generator's parts). */
.hero__figure-btn:disabled ~ .visually-hidden [data-part="8"] { display: none; }
/* ── shared section rhythm: one heading style for every section h2 ── */
.site-section { position: relative; padding: clamp(96px, 12vw, 168px) 0; }
.site-h2 { font-size: clamp(32px, 3.6vw, 52px); line-height: 1.04; letter-spacing: -.04em; }

/* ── what ── */
.what__heading { grid-column: 1 / span 4; align-self: start; }
.what__body { grid-column: 6 / span 7; padding-top: 10px; }
.what__line--1 { max-width: 46ch; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.55; }
.what__line--2 {
  margin-top: 40px; max-width: 22ch; padding-left: 24px;
  font-size: clamp(26px, 2.8vw, 40px); line-height: 1.16; letter-spacing: -.028em; font-weight: 500;
  color: var(--color-site-text);
  border-left: 2px solid; border-image: linear-gradient(180deg, var(--color-site-amber), var(--color-accent)) 1;
}
.what__line--3 {
  margin-top: 44px; display: inline-flex; align-items: center; gap: 12px;
  padding: 11px 16px 11px 14px; font: 500 13px/1 var(--font-family-mono); letter-spacing: .06em;
  color: var(--color-site-text-soft); background: var(--color-site-bg-alt);
  border: 1px solid var(--site-line-strong); border-radius: 999px;
}
.what__line--3::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-site-amber); flex: none; }

/* ── why: the question, the quote at monument size ── */
.why {
  overflow: hidden; background: radial-gradient(60% 80% at 12% 30%, color-mix(in srgb, var(--color-site-amber) 5%, transparent), transparent 60%), var(--color-site-bg-alt);
  border-top: 1px solid var(--site-line); border-bottom: 1px solid var(--site-line);
}
.why::after {
  content: ""; position: absolute; width: 900px; height: 900px; right: -420px; top: 50%; translate: 0 -50%;
  border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--color-site-amber) 14%, transparent); pointer-events: none;
  -webkit-mask: conic-gradient(from 250deg, #000 0 64deg, transparent 64deg 72deg, #000 72deg 136deg, transparent 136deg);
  mask: conic-gradient(from 250deg, #000 0 64deg, transparent 64deg 72deg, #000 72deg 136deg, transparent 136deg);
}
.why > .site-wrap { position: relative; z-index: 1; }
.quote { margin: 44px 0 0; }
.quote blockquote { margin: 0; }
.quote blockquote p {
  position: relative; max-width: 17ch;
  font-size: clamp(34px, 5.4vw, 78px); line-height: 1.03; letter-spacing: -.042em; font-weight: 500; color: var(--color-site-text);
}
.quote blockquote p::before { content: "\201C"; position: absolute; right: 100%; padding-right: .06em; color: var(--color-site-amber); }
.quote blockquote p::after { content: "\201D"; color: var(--color-site-amber); }
.quote figcaption {
  margin-top: 32px; max-width: 70ch; padding-left: 16px; border-left: 1px solid var(--site-line-strong);
  font: 400 13px/1.6 var(--font-family-mono); color: var(--color-site-text-muted); overflow-wrap: anywhere;
}
.quote__label { color: var(--color-site-text-soft); }
.why__line { margin-top: 64px; max-width: 34ch; font-size: clamp(20px, 1.9vw, 27px); line-height: 1.4; letter-spacing: -.012em; color: var(--color-site-text); }
/* German: the translation carries the size; the English original sits above it, smaller. */
.quote--translated > .quote__label { margin-bottom: 16px; font-size: 13px; color: var(--color-site-text-muted); }
.quote--translated blockquote p {
  max-width: 44ch; font-size: clamp(20px, 2vw, 27px); line-height: 1.3; letter-spacing: -.015em;
  color: var(--color-site-text-soft); text-wrap: balance;
}
.quote--translated blockquote p::before { position: static; padding: 0; }
.quote__translation {
  margin-top: 28px; max-width: 17em;
  font-size: clamp(28px, 3.6vw, 52px); line-height: 1.08; letter-spacing: -.035em; font-weight: 500; color: var(--color-site-text);
}
.quote__translation .quote__label {
  display: block; margin-bottom: 14px; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--color-site-text-muted);
}

/* ── how: the five rules as gates on one rail ── */
/* E2.10: the right-hand column is ONE edge down the page: grid column 6 (what__body, the how-list's TEXT, the doors'
   form column). The how-list starts one rail-width left of that edge, so its marker hangs in the gutter and its text
   lands on the edge; the heading takes columns 1-4 (as in "what") so the marker never meets it. */
.how__head { grid-column: 1 / span 4; align-self: start; position: sticky; top: 120px; }
.how__intro { margin-top: 20px; max-width: 30ch; color: var(--color-site-text-muted); }
.how-list { grid-column: 6 / span 7; margin: 0 0 0 calc(var(--how-rail) * -1); padding: 0; list-style: none; }
.how-list li {
  position: relative; padding: 2px 0 44px var(--how-rail); text-wrap: pretty;
  font-size: clamp(19px, 1.55vw, 22px); line-height: 1.45; letter-spacing: -.012em; color: var(--color-site-text);
}
.how-list li:last-child { padding-bottom: 0; }
/* the optional closing line: a paragraph under the list (not a gate), set in the list's column and text column */
.how__closing {
  grid-column: 6 / span 7; margin: 44px 0 0 calc(var(--how-rail) * -1); padding-left: var(--how-rail); text-wrap: pretty;
  font-size: clamp(19px, 1.55vw, 22px); line-height: 1.45; letter-spacing: -.012em; color: var(--color-site-text-soft);
}
.how-list li:not(:last-child)::after {
  content: ""; position: absolute; left: 15px; top: 34px; bottom: 2px; width: 1.5px;
  background: color-mix(in srgb, var(--color-site-rail-mid) 45%, transparent);
}
.how-list li::before {
  content: ""; position: absolute; left: 2px; top: 4px; width: 28px; height: 28px; border-radius: 50%;
  background: radial-gradient(circle, var(--color-site-person) 0 3px, transparent 3.5px),
              conic-gradient(from -24deg, transparent 0 48deg, var(--color-site-amber) 48deg, var(--color-accent));
  -webkit-mask: radial-gradient(circle, #000 0 4px, transparent 4.5px 11px, #000 11.5px);
  mask: radial-gradient(circle, #000 0 4px, transparent 4.5px 11px, #000 11.5px);
}

/* ── doors: three bands, one system — the door's words left, its fields right ── */
.doors { border-top: 1px solid var(--site-line); padding-bottom: clamp(96px, 10vw, 140px); }
.continuity, .nojs-note { margin: 32px 0 0; padding: 16px 20px; border-radius: 12px; max-width: 70ch; }
.continuity { background: var(--color-site-surface); color: var(--color-site-text-soft); }
.nojs-note { background: var(--color-warning-bg); color: var(--color-warning); }
.doors-grid { margin-top: 56px; display: grid; gap: 24px; }
/* E2.10: the form column starts on grid column 6 of the page's 12-column grid, the same edge as the "what" body and the
   "how" text. The door is as wide as the grid (W) and its first track is sized so that, from the door's outer left,
   1px border + padding + track + 56px gap = 5/12 * (W + one column gap), where W = 100% (the content box) + 2 paddings
   + 2px of border. At 1440 that is 636.7px, the same x as the what__body. */
.door {
  --door-pad: clamp(24px, 2.6vw, 36px);
  --door-gap: 56px;
  display: grid; align-items: start; gap: 22px var(--door-gap);
  grid-template-columns: calc(5 / 12 * (100% + 2 * var(--door-pad) + 2px + var(--site-col-gap)) - 1px - var(--door-pad) - var(--door-gap)) minmax(0, 1fr);
  padding: var(--door-pad); background: var(--color-site-surface);
  border: 1px solid var(--site-line); border-radius: 20px;
}
.door--project { position: relative; border-color: transparent; background: linear-gradient(180deg, color-mix(in srgb, var(--color-site-amber) 4%, var(--color-site-surface)), var(--color-site-surface) 40%); }
.door--project::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, color-mix(in srgb, var(--color-site-amber) 70%, transparent),
              color-mix(in srgb, var(--color-brand-fuchsia) 35%, transparent) 35%, var(--site-line) 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.door--join { background: transparent; border-color: var(--site-line-strong); }
.door__title { font-size: clamp(22px, 1.9vw, 27px); line-height: 1.15; letter-spacing: -.025em; }
.door__lead { margin-top: 12px; max-width: 46ch; font-size: 16px; color: var(--color-site-text-soft); }
.door__heading {
  margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--site-line);
  font-size: 15px; line-height: 1.6; font-weight: 500; color: var(--color-site-text-soft);
}
.door__body { margin-top: 8px; max-width: 46ch; font-size: 15px; line-height: 1.6; color: var(--color-site-text-muted); }

.door__form { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin: 0; }
.door__form > * { grid-column: 1 / -1; }
.door__form > .form-field:has(input[name="name"]), .door__form > .form-field:has(input[name="firstName"]) { grid-column: 1; }
.door__form > .form-field:has(input[name="email"]) { grid-column: 2; }
.door__form > .btn { justify-self: start; }
.site .form-field { margin: 0; max-width: none; display: grid; gap: 8px; }
.site .form-field__label { margin: 0; font-size: 14px; font-weight: 400; color: var(--color-site-text-soft); }
.site .form-field__input {
  min-height: 50px; padding: 12px 14px; font-size: 16px; line-height: 1.5; color: var(--color-site-text);
  background: var(--color-site-bg-alt); border: 1px solid var(--site-line-control); border-radius: 12px;
  transition: border-color .2s var(--site-ease), box-shadow .2s var(--site-ease);
}
.site textarea.form-field__input { resize: vertical; min-height: 150px; }
.site .form-field__input:hover { border-color: color-mix(in srgb, var(--color-site-text) 60%, transparent); }
.site .form-field__input:focus-visible {
  outline: none; border-color: var(--color-site-amber);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-site-amber) 16%, transparent);
}
.door--setup .btn--primary, .door--join .btn--primary {
  background: var(--color-site-surface-alt); color: var(--color-site-text);
  box-shadow: 0 0 0 1px var(--site-line-strong) inset;
}
.door--setup .btn--primary:hover:not(:disabled), .door--join .btn--primary:hover:not(:disabled) {
  background: var(--color-site-surface-alt); box-shadow: 0 0 0 1px var(--color-site-amber) inset;
}
.door__under { font-size: 13px; color: var(--color-site-text-muted); }
.door__under a, .consent a { color: var(--color-site-text-soft); text-decoration-color: var(--site-line-strong); text-underline-offset: 3px; }
.door__under a:hover, .consent a:hover { color: var(--color-site-text); text-decoration-color: var(--color-accent); }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--color-site-text-muted); }
.consent input {
  appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin: 0; cursor: pointer;
  display: grid; place-items: center; background: var(--color-site-bg-alt);
  border: 1px solid var(--site-line-control); border-radius: 6px;
  transition: border-color .2s var(--site-ease), background .2s var(--site-ease);
}
.consent input::after {
  content: ""; width: 5px; height: 10px; border: solid var(--color-on-accent); border-width: 0 2px 2px 0;
  rotate: 45deg; translate: 0 -1px; opacity: 0;
}
.consent input:checked { background: var(--color-accent-solid); border-color: var(--color-accent-solid); }
.consent input:checked::after { opacity: 1; }
.consent input:hover { border-color: var(--color-site-amber); }
.consent label { cursor: pointer; }

/* Form result: static/js/site.js inserts one after each form and fills it with the page's own words (the hidden
   [data-form-states] block) — sending, success, or an error. In the two-column door it sits under the form (column 2);
   once a success hides the form, auto-placement lifts it into the form's place. */
.door > .form-result { grid-column: 2; }
.form-result:focus { outline: none; }
.form-result__box {
  padding: 16px 18px; border-radius: 12px; font-size: 15px; line-height: 1.6;
  background: var(--color-site-surface-alt); border: 1px solid var(--site-line-strong); color: var(--color-site-text);
}
.form-result__box p { margin: 0 0 8px; }
.form-result__box p:last-child { margin-bottom: 0; }
.form-result__heading { font-weight: 600; }
.form-result__box--success { border-color: var(--color-site-amber); }
.form-result__box--error { border-color: var(--color-site-rail-mid); }

/* Honeypot: bots fill it, humans never reach it (off-screen, out of the tab
   order). Not display:none — a bot that skips hidden inputs would skip it. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Review render only (the site build's review mode): which lines are not approved text. */
.review-banner {
  padding: var(--space-3) var(--space-4); background: var(--color-warning-bg); color: var(--color-warning);
  font-size: var(--font-size-sm); border-bottom: var(--border-width-thin) solid var(--color-warning);
}
.review-mark {
  background: var(--color-warning-bg); color: var(--color-warning);
  outline: var(--border-width-thin) dashed var(--color-warning); border-radius: var(--radius-sm);
}
.review-mark[data-review="new"]::after { content: " NEW"; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); }
.review-mark[data-review="de-tr"]::after { content: " DE-TR"; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); }

/* German: long compounds break in the door texts and field labels on phones only. */
@media (max-width: 560px) { :lang(de) .door__body, :lang(de) .form-field__label { hyphens: auto; -webkit-hyphens: auto; } }

/* ── legal pages (imprint, privacy): a reading column, the landing's chrome ── */
.legal { max-width: 760px; padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(72px, 9vw, 120px); }
.legal h1 { font-size: clamp(34px, 4vw, 52px); line-height: 1.04; letter-spacing: -.04em; margin-bottom: 40px;
            hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }   /* "Datenschutzerklärung" at 320 px */
.legal h2 { font-size: 22px; line-height: 1.3; letter-spacing: -.012em; margin: 48px 0 12px; }
.legal p, .legal li { font-size: 17px; line-height: 1.7; color: var(--color-site-text-soft); max-width: 56ch; }   /* ≤ ~85 characters a line (E2.5) */
.legal p + p { margin-top: 16px; }
.legal ul { margin: 12px 0 0; padding-left: 22px; display: grid; gap: 8px; }
.legal li::marker { color: var(--color-site-amber); }
.legal strong { color: var(--color-site-text); font-weight: 600; }
.legal__back { display: inline-flex; align-items: center; min-height: 44px; }   /* the 404 page's way home: a 44 px tap target (E4.5) */
.obf-at::before { content: "@"; }                     /* the "@" of an address is drawn, never in the HTML (e-mail policy) */

/* ── responsive ── */
@media (max-width: 900px) {
  .hero::before, .why::after { display: none; }
  .hero__in { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 40px; }
  /* one column at every width below 900, phone, tablet or a phone on its side: DOM order, so the copy and its actions
     come first and the figure closes the hero */
  .hero__figure-wrap { justify-self: center; width: min(100%, 420px); margin: -8px 0 -16px; align-items: center; }
  .hero h1 { font-size: clamp(38px, 9vw, 72px); }
  .hero__links { flex-direction: column; align-items: stretch; max-width: 26.5rem; }   /* about the sub's measure */
  .hero__links .btn, .hero__links .site-textlink { justify-content: space-between; }
  .what__heading, .what__body, .how__head, .how-list, .how__closing { grid-column: 1 / -1; }
  .how-list, .how__closing { margin-left: 0; }   /* one column: the rail sits inside the wrap, as before the shared edge (E2.10) */
  .what__heading { margin-bottom: 32px; }
  .how__head { position: static; margin-bottom: 56px; }
  .door { grid-template-columns: minmax(0, 1fr); }
  .door > .form-result { grid-column: 1; }
}
@media (max-width: 560px) {
  .site { font-size: 16px; }
  .site-header__in { height: 60px; }
  .site-lang { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; }
  /* a smaller, tighter sub and shorter gaps keep the primary action on the first screen of a small phone in LinkedIn's
     in-app browser (375x550) for the DE hero sub (B), nine lines there (CEO 2026-10-01 16:07; pinned by the site's browser tests) */
  .hero__in { padding-top: 24px; padding-bottom: 56px; }
  .hero__sub { margin-top: 20px; font-size: 17px; line-height: 1.4; }
  .hero__links { margin-top: 28px; }
  /* the -28px is optical: it pulls the figure's transparent inset into the hero's 56px bottom padding */
  .hero__figure-wrap { width: min(100%, 300px); margin-bottom: -28px; }
  .hero__links { gap: 12px; }
  .site .btn { justify-content: space-between; line-height: 1.25; padding-top: 12px; padding-bottom: 12px; }
  .door__form { grid-template-columns: minmax(0, 1fr); }
  .door__form > .form-field { grid-column: 1 !important; }
  .door__form > .btn { justify-self: stretch; }
  .how-list li, .how__closing { padding-left: 52px; }
  .quote blockquote p::before { position: static; padding: 0; }
}

/* the smallest phones: the headline keeps to two lines, as at 390; and the hero button label stays on ONE line (E2.7):
   at 320 the 280 px column is narrower than "Tell us what you're automating" (298 px) at 16 px, so the label is 14 px
   with a tighter pad and gap — the button is still 50 px tall and full width, the tap target is untouched. */
@media (max-width: 360px) {
  .hero h1 { font-size: 34px; }
  .site .btn { gap: 8px; padding-left: 14px; padding-right: 14px; font-size: 14px; }
}

/* Forced colors (Windows high contrast, E4.14): the system picks text, background and border colours and throws away
   the page's. Three things need a say: the gradient-filled words (colour is transparent over a clipped background —
   with the clip gone and the colour forced they would vanish, so they take the text colour), the buttons (borderless
   here, so they would melt into the page — a real border), and the custom checkbox (appearance reset — it draws its own
   box and tick in system colours, which stay legible whatever the theme). The figure and the logo are <img>s and
   untouched. */
@media (forced-colors: active) {
  .site-wordmark__ai, .hero__hl {
    background: none; -webkit-background-clip: border-box; background-clip: border-box;
    color: CanvasText; -webkit-text-fill-color: CanvasText;
  }
  .site .btn { border: 2px solid ButtonText; }
  .consent input { forced-color-adjust: none; background: Field; border: 2px solid FieldText; }
  .consent input::after { border-color: FieldText; }
  .consent input:checked { background: Highlight; border-color: Highlight; }
  .consent input:checked::after { border-color: HighlightText; }
  .consent input:focus-visible { outline-color: Highlight; }   /* this input opted out of the forced palette, so its ring does too */
}

@media (prefers-reduced-motion: reduce) {
  .site *, .site *::before, .site *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}