/* ==========================================================================
   aiployee.io — text pages (privacy, imprint) and the 404 page.
   Loaded only by those templates, after site.css. Uses its tokens and a few
   shared components (.wrap, .eyebrow, .avatar, .btn, .icon, .final, .typing).
   Layout echoes the hero: copy on the left, a white card on the right with
   the soft orb peeking out behind it. One column below 1000px.
   ========================================================================== */

.legal { padding-top: clamp(32px, 5vw, 72px); overflow: hidden; }
/* Clip the orb sideways only: "clip" (unlike "hidden") keeps the sticky aside working. */
@supports (overflow: clip) { .legal { overflow: visible; overflow-x: clip; } }

.legal__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "aside" "body";
}
.legal__head { grid-area: head; max-width: 68ch; }
.legal__aside { grid-area: aside; position: relative; margin-top: clamp(32px, 6vw, 44px); max-width: 34rem; }
.legal__body { grid-area: body; max-width: 68ch; margin-top: clamp(40px, 6vw, 56px); }

@media (min-width: 1000px) {
  .legal__layout {
    grid-template-columns: minmax(0, 68ch) minmax(300px, 360px);
    grid-template-rows: auto 1fr;
    grid-template-areas: "head aside" "body aside";
    justify-content: space-between;
    column-gap: clamp(48px, 6vw, 104px);
  }
  .legal__aside { align-self: start; margin-top: 8px; max-width: none; }
  .legal__aside--sticky { position: sticky; top: calc(var(--header-h) + 28px); }
}

/* Head ------------------------------------------------------------------- */
.legal__head h1 {
  margin-top: 24px;
  font-size: clamp(2.4rem, 1.5rem + 3vw, 3.75rem);
  line-height: 1.04; letter-spacing: -0.045em;
}
.legal__alt { color: var(--ink-3); font-weight: 600; }
.legal__lead {
  margin-top: 20px; max-width: 34em;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.55; color: var(--ink-2);
}

/* Body text -------------------------------------------------------------- */
.legal__body h2 {
  margin-top: clamp(44px, 5vw, 60px);
  font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); line-height: 1.2; letter-spacing: -0.03em;
}
.legal__body > :first-child { margin-top: 0; }
.legal__body h3 { margin-top: 30px; font-size: 1.125rem; line-height: 1.3; letter-spacing: -0.015em; }
.legal__body h4 { margin-top: 24px; font-size: 1rem; line-height: 1.35; letter-spacing: -0.01em; }   /* one block per analytics/marketing tool (privacy policy) */
.legal__body p, .legal__body ul, .legal__body address { margin-top: 14px; color: var(--ink-2); }
.legal__body h2 + p, .legal__body h3 + p { margin-top: 12px; }
.legal__body address { font-style: normal; }
.legal__body ul { display: grid; gap: 10px; }
.legal__body ul li { position: relative; padding-left: 24px; }
.legal__body ul li::before {
  content: ''; position: absolute; left: 5px; top: .66em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent-bright);
}
.legal__body strong { color: var(--ink); font-weight: 600; }

.legal a:not(.btn) {
  color: var(--ink); font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--line-2); text-decoration-thickness: 1px; text-underline-offset: 4px;
  transition: text-decoration-color .2s ease;
}
.legal a:not(.btn):hover { text-decoration-color: var(--accent); }

/* "What, why, who, how long" for each kind of processing */
.legal__dl {
  display: grid; grid-template-columns: 8.75rem minmax(0, 1fr); gap: 10px 20px;
  margin: 18px 0 0; padding: 18px 22px;
  background: var(--surface); border: 1px solid rgba(20, 32, 27, .06); border-radius: var(--r-md);
  box-shadow: 0 1px 2px rgba(20, 32, 27, .04);
  font-size: .96875rem; line-height: 1.55;
}
.legal__dl dt { font-weight: 600; color: var(--ink); }
.legal__dl dd { margin: 0; color: var(--ink-2); min-width: 0; }
@media (max-width: 560px) {
  .legal__dl { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 16px 18px; }
  .legal__dl dd + dt { margin-top: 12px; }
}

/* A short contact block (supervisory authority, controller) */
.legal__address {
  margin-top: 16px; padding: 4px 0 4px 18px;
  border-left: 2px solid var(--accent-soft);
  font-style: normal; line-height: 1.6; color: var(--ink-2);
}
.legal__address strong { color: var(--ink); font-weight: 600; }

.legal__nowrap { white-space: nowrap; }

/* Aside card (with the orb behind it) ------------------------------------ */
.legal__card {
  position: relative; z-index: 1;
  padding: clamp(22px, 2.6vw, 30px);
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-2);
  border: 1px solid rgba(20, 32, 27, .06);
}
.legal__card h2 { font-size: 1.125rem; line-height: 1.3; letter-spacing: -0.015em; }
.legal__card-head { display: flex; align-items: center; gap: 12px; }
.legal__card-head .avatar { width: 32px; height: 32px; }

.legal__checks { display: grid; gap: 12px; margin-top: 18px; }
.legal__checks li { display: flex; align-items: flex-start; gap: 12px; color: var(--ink); font-weight: 500; line-height: 1.45; }
.legal__checks .icon { margin-top: .18em; color: var(--accent); font-size: 18px; stroke-width: 2.2; }

.legal__card-foot {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: .9375rem; line-height: 1.5; color: var(--ink-3);
}
.legal__card-foot a:not(.btn) { overflow-wrap: anywhere; }

.legal__facts { display: grid; gap: 14px; margin: 20px 0 0; }
.legal__facts dt { font-size: .8125rem; font-weight: 600; letter-spacing: .01em; color: var(--ink-3); }
.legal__facts dd { margin: 2px 0 0; color: var(--ink); line-height: 1.45; overflow-wrap: anywhere; }
.legal__facts dd small { display: block; font-size: .875rem; color: var(--ink-3); }
@media (min-width: 560px) and (max-width: 999px) {
  .legal__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; }
  .legal__facts .is-wide { grid-column: 1 / -1; }
}

.legal__orb {
  position: absolute; z-index: 0; pointer-events: none;
  width: 250px; aspect-ratio: 1 / 1; top: -92px; right: -96px;
}
.legal__orb::before {
  content: ''; position: absolute; inset: 16%; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #FCE6D8 0%, #F5AE8A 28%, #E77A50 62%, #D4633B 90%);
  box-shadow: inset -14px -18px 36px rgba(140, 50, 22, .16), inset 8px 10px 24px rgba(255, 240, 228, .45);
  filter: blur(1px);
}
.legal__orb::after {
  content: ''; position: absolute; inset: -6%; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(224, 100, 59, .16) 0%, rgba(224, 100, 59, .07) 38%, rgba(224, 100, 59, 0) 66%);
}
@media (max-width: 999px) {
  .legal__orb { width: 180px; top: -64px; right: -48px; }
}
@media (max-width: 520px) {
  .legal__orb { width: 150px; top: -54px; right: -36px; }
}

/* ==========================================================================
   404
   ========================================================================== */
.lost { padding-top: clamp(32px, 5vw, 72px); text-align: center; }
.lost .final { padding-bottom: clamp(44px, 6vw, 72px); }
.lost__title {
  position: relative; margin: 28px auto 0; max-width: 14em;
  font-size: clamp(2.1rem, 1.3rem + 2.8vw, 3.6rem); line-height: 1.04; letter-spacing: -0.045em;
}
.lost__langs { position: relative; margin: clamp(40px, 5vw, 56px) auto 0; max-width: 40rem; padding-top: 28px; border-top: 1px solid var(--line); }
.final .lost__label { margin: 0 auto; font-size: .9375rem; color: var(--ink-3); }
.lost__langs ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.lost__langs li:has(> a[aria-current]) { display: none; }   /* English is the button above */
.lost__langs a {
  display: inline-flex; align-items: center; min-height: 42px; padding: 8px 16px;
  border-radius: 999px; border: 1px solid rgba(194, 80, 42, .35); background: var(--surface);
  color: var(--accent-ink); font-size: .9375rem; font-weight: 600; text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease;
}
.lost__langs a:hover { background: var(--accent-soft); border-color: rgba(194, 80, 42, .55); }
.lost__langs .lang__abbr { display: none; }

@media (prefers-reduced-motion: reduce) {
  .legal a:not(.btn), .lost__langs a { transition: none; }
}