/* site.css: every route except the home page.
   The home page owns ola.css and is not touched by this file. The tokens below
   are the home page's own values, repeated rather than shared, so nothing here
   can move the home page by accident. Anything this file adds on top of them is
   a reading need the home page does not have, and says so where it is defined.

   The documents themselves are not styled from the outside in: every byte
   inside <article class="legal-document"> is generated from approved source and
   stamped with its hash. This file may set the type it is read in. It may not
   touch a character of it. */

/* ---------- tokens ---------- */

:root {
  --ground:        #F7F6F4;
  --ground-deep:   #EDECEA;
  --ink:           #141519;
  --ink-body:      #5C606A;
  --ink-quiet:     #62656D;
  /* the one value the home page has no use for: a contract is read for twenty
     minutes, not glanced at for four seconds, so its body ink sits between the
     headline ink and the page's quiet ink. 9.3:1 on the ground. */
  --ink-read:      #3E414A;
  --hairline:      rgba(0, 0, 0, 0.08);
  --hairline-firm: rgba(0, 0, 0, 0.14);
  --glass-edge:    rgba(0, 0, 0, 0.10);
  --glass-edge-lit:rgba(0, 0, 0, 0.22);
  --inner-light:   rgba(255, 255, 255, 0.90);
  --shadow:        rgba(24, 28, 38, 0.14);
  --shadow-soft:   rgba(24, 28, 38, 0.08);
  --ink-on-deep:   #F2F3F5;
  --ink-on-deep-2: #9EA3AB;

  --card:          #FFFFFF;
  --r-card:        28px;
  --r-float:       20px;
  --r-tile:        14px;
  --radius:        999px;

  --sans: "InterVariable", "Inter Fallback", -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --say:      clamp(34px, 4.6vw, 62px);
  --say-2:    clamp(26px, 3.15vw, 43px);
  --say-3:    clamp(22px, 2.3vw, 31px);
  --field:    17px;
  --micro:    13px;
  --marker:   12px;

  /* the document's own three sizes. Regular weight, tight tracking, the home
     page's proportions taken down to a size a title page can hold. */
  --doc-title: clamp(34px, 4.6vw, 56px);
  --doc-h2:    clamp(23px, 2.15vw, 30px);
  --doc-h3:    1.06em;

  --column:   560px;
  --measure:  1100px;
  --read:     34rem;     /* the reading measure: ~68 characters at 17px */
  --gutter:   24px;

  --field-h:  62px;

  --ladder-low:
      0 0.87px  3.08px  0 rgba(183, 181, 203, 0.31),
      0 4.37px  6.16px  0 rgba(183, 181, 203, 0.27),
      0 9.18px  8.01px  0 rgba(183, 181, 203, 0.16),
      0 16.61px 9.24px  0 rgba(183, 181, 203, 0.05),
      inset 0 3px 14px 0 rgba(255, 255, 255, 0.92);
  --ladder-lite:
      0 1px 2px rgba(0, 0, 0, 0.035),
      0 3px 8px rgba(0, 0, 0, 0.035),
      0 8px 28px rgba(0, 0, 0, 0.043);

  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-text: cubic-bezier(0.22, 0.9, 0.28, 1);
  --spring:    cubic-bezier(0.34, 3.85, 0.64, 1);
}

@media (max-width: 700px) {
  :root { --field: 16.5px; --field-h: 56px; --gutter: 26px; }
}
@media (max-width: 360px) { :root { --gutter: 20px; } }

@font-face {
  font-family: "InterVariable";
  src: url("./fonts/inter-subset.woff2?v=04bab35") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Segoe UI"), local("Roboto");
  size-adjust: 105.3%;
  ascent-override: 92.0%;
  descent-override: 22.9%;
  line-gap-override: 0%;
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-height: 100svh;
  background: var(--ground);
  color: var(--ink);
  font: 400 var(--field)/1.62 var(--sans);
  font-variation-settings: "opsz" 14;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: rgba(20, 21, 25, 0.90); color: var(--ground); }

/* The ground, and nothing else on it. The home page's own #F7F6F4, lit from
   above the way the hero is lit, falling a shade towards the foot of the page.

   The paper texture that used to be multiplied over this is gone. On the home
   page a picture carries the light; here the page is type on a ground, and a
   7% photograph of a plate under twenty minutes of reading is a smudge behind
   the words rather than a surface. */
.room-still {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(130% 86% at 50% -16%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 62%),
    var(--ground);
}

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed;
  top: 10px; left: 50%;
  z-index: 20;
  transform: translate(-50%, -180%);
  padding: 11px 20px;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--ground);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: transform .32s var(--ease);
}
.skip-link:focus-visible { transform: translate(-50%, 0); outline: 2px solid var(--ground); outline-offset: 2px; }

/* ---------- the frame ---------- */

/* the same glass pill the home page wears, at the same height, on the same
   shadow: a reader who follows a footer link has not left the site */
.frame {
  position: fixed;
  z-index: 12;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: calc(100vw - 2 * var(--gutter));
  height: 54px;
  padding: 0 20px;
  border-radius: var(--radius);
  background:
    linear-gradient(-75deg,
      rgba(255, 255, 255, 0.10),
      rgba(255, 255, 255, 0.42) 48%,
      rgba(255, 255, 255, 0.10));
  backdrop-filter: blur(22px) saturate(165%);
  -webkit-backdrop-filter: blur(22px) saturate(165%);
  box-shadow:
    inset 0 1px 1px var(--inner-light),
    inset 0 -1px 1px var(--shadow-soft),
    0 1px 3px var(--shadow-soft),
    0 10px 26px -8px var(--shadow);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-size: 19px;
  font-weight: 500;
  font-variation-settings: "opsz" 18;
  letter-spacing: 0.012em;
  color: var(--ink);
  text-decoration: none;
  line-height: 1;
}
/* 22px, the home page's size: the mark IS the o, so it is set against the
   letters rather than shrunk beside them */
.wordmark svg { display: block; }
.frame-rule { flex: 0 0 auto; width: 1px; height: 20px; background: var(--hairline); }

.frame-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  font-size: 14px;
  letter-spacing: -0.004em;
}
.frame-nav a {
  color: var(--ink-quiet);
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s var(--ease);
}
.frame-nav a:hover { color: var(--ink); }
.frame-nav a[aria-current="page"] { color: var(--ink); font-weight: 500; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 17px;
  border: 0;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--ground);
  font: 500 14px/1 var(--sans);
  letter-spacing: -0.006em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(24, 28, 38, 0.28);
  transition: transform .34s var(--spring), box-shadow .3s var(--ease);
}
.pill:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -4px rgba(24, 28, 38, 0.34); }
.pill:active { transform: translateY(0) scale(0.97); }

.pill-quiet {
  background: transparent;
  color: var(--ink-body);
  box-shadow: inset 0 0 0 1px var(--glass-edge);
}
.pill-quiet:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--glass-edge-lit); }

/* Under this width the pill holds the wordmark alone, at the padding the home
   page gives it on a phone. The two document links go with the rail and the
   footer, which carry them anyway. */
@media (max-width: 420px) {
  .legal-body .frame-nav,
  .legal-body .frame-rule { display: none; }
  .legal-body .frame { padding: 0 18px; }
}

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

/* headings are focused in code so a screen reader lands on the new screen.
   Nobody arrived there on the Tab key, so nobody is shown a ring for it. */
[tabindex="-1"]:focus { outline: none; }

/* ---------- reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity   .66s var(--ease) var(--reveal-delay, 0ms),
    transform .82s var(--ease) var(--reveal-delay, 0ms);
}
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: opacity .01ms; }
}

/* ═══════════════ LEGAL ═══════════════════════════════════════════════════ */

.legal-body { position: relative; }

/* The home page's pill floats over a photograph. Here it floats over the
   sentence a reader is in the middle of, because the column is centred under
   it, and 42% white over blurred type is a smudge on the line. Same pill, same
   height, same shadow, more paper in the glass: over the flat ground it looks
   like the home page's, and over a paragraph it covers it. */
.legal-body .frame,
.beta-body .frame {
  background:
    linear-gradient(-75deg,
      rgba(255, 255, 255, 0.58),
      rgba(255, 255, 255, 0.80) 48%,
      rgba(255, 255, 255, 0.58)),
    rgba(247, 246, 244, 0.72);
}

/* the reading progress is the frame's own underline, not a bar bolted onto the
   page: one hairline that fills as the document is read */
.read-line {
  position: fixed;
  z-index: 13;
  left: 0; top: 0;
  height: 2px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(var(--read-progress, 0));
  background: linear-gradient(90deg, rgba(20,21,25,0.28), rgba(20,21,25,0.62));
  transition: transform .12s linear;
}
@media (prefers-reduced-motion: reduce) { .read-line { transition: none; } }

/* The reading column and the contents rail are ONE object, centred under the
   centred header pill. It used to be a 1fr column with the text capped inside
   it, which put 230px of nothing between the last word of a line and the rail,
   and hung the whole page off the left edge while the pill floated in the
   middle. Two real columns, centred as a pair, is the same page composed. */
.legal-shell {
  position: relative;
  z-index: 1;
  max-width: var(--measure);
  margin: 0 auto;
  /* the foot carries its own room below the last link, so the shell only adds
     what keeps the page from ending on the rule */
  padding: clamp(112px, 14vh, 160px) var(--gutter) clamp(24px, 4vh, 56px);
  display: grid;
  grid-template-columns: minmax(0, var(--read)) minmax(0, 15rem);
  justify-content: center;
  gap: 0 clamp(28px, 5vw, 76px);
  align-items: start;
}

/* The masthead takes the whole composition, column and rail together, and the
   two columns start under it. A document title is a name, not a paragraph, and
   at the reading measure the German editions broke a title mid-word:
   "Vertraulichkeitsvereinba / rung" at 56px. Given the full width it sets on
   one line, and every English title lands on one line too. */
.legal-head {
  grid-column: 1 / -1;
  grid-row: 1;
  margin-bottom: clamp(30px, 4.6vh, 52px);
}

.legal-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 clamp(14px, 2vh, 20px);
  font-size: var(--marker);
  letter-spacing: 0.08em;
  color: var(--ink-quiet);
}
.legal-eyebrow .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.5; }

/* the home page's headline setting, at the size of a title page: regular
   weight, tight tracking, one word per line if that is how it falls */
h1.legal-title {
  margin: 0;
  font-size: var(--doc-title);
  font-weight: 400;
  font-variation-settings: "opsz" 32;
  letter-spacing: -0.036em;
  line-height: 1.02;
  color: var(--ink);
  text-wrap: balance;
  /* "Beta-Vertraulichkeitsvereinbarung" is one word and it is wider than a
     320px phone at any size this title can be set in. It breaks rather than
     pushing the page sideways. */
  overflow-wrap: break-word;
}

.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 15px 34px;
  margin: clamp(24px, 3.4vh, 34px) 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  font-size: var(--micro);
  color: var(--ink-quiet);
}
.legal-meta div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.legal-meta dt { letter-spacing: 0.08em; text-transform: lowercase; }
.legal-meta dd { margin: 0; color: var(--ink); font-weight: 500; }

/* ── the editions ──────────────────────────────────────────────────────
   One document, three regional cuts. Set as editions of it (a name, the
   place it applies, and a rule under the one being read) rather than as
   three buttons. */
.editions {
  grid-column: 1;
  display: flex;
  align-items: baseline;
  gap: 0 22px;
  margin: 0 0 clamp(28px, 4vh, 44px);
  max-width: var(--read);
  border-bottom: 1px solid var(--hairline);
}

.editions-label {
  flex: 0 0 auto;
  padding-bottom: 13px;
  font-size: var(--marker);
  letter-spacing: 0.08em;
  color: var(--ink-quiet);
}

.editions-rail { display: flex; flex-wrap: wrap; gap: 0 26px; min-width: 0; }

.edition {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0 0 13px;
  text-decoration: none;
  white-space: nowrap;
}
.edition::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .34s var(--ease);
}
.edition:hover::after { transform: scaleX(1); opacity: .3; }
.edition[aria-current="page"]::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .edition::after { transition: none; } }

.edition-name {
  font-size: 15.5px;
  font-variation-settings: "opsz" 16;
  letter-spacing: -0.014em;
  color: var(--ink-quiet);
  transition: color .2s var(--ease);
}
.edition-where { font-size: 11.5px; letter-spacing: 0.01em; color: var(--ink-quiet); }
.edition:hover .edition-name { color: var(--ink); }
.edition[aria-current="page"] .edition-name { color: var(--ink); font-weight: 500; }

/* the contents rail: sticky on a desk, a collapsed sheet on a phone. It starts
   level with the document's first line and holds the section being read. */
.legal-toc {
  grid-column: 2;
  grid-row: 2 / span 3;
  position: sticky;
  top: 104px;
  align-self: start;
  max-height: calc(100svh - 148px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-left: 22px;
  border-left: 1px solid var(--hairline);
}
.legal-toc h2 {
  margin: 0 0 14px;
  font-size: var(--marker);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--ink-quiet);
}
.legal-toc ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 1px; }
.legal-toc a {
  display: block;
  padding: 6px 0 6px 14px;
  margin-left: -23px;
  border-left: 2px solid transparent;
  color: var(--ink-quiet);
  font-size: 13.5px;
  line-height: 1.42;
  letter-spacing: -0.006em;
  text-decoration: none;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.legal-toc a:hover { color: var(--ink); }
.legal-toc a.is-current { color: var(--ink); border-left-color: var(--ink); }

/* ---------- the document ---------- */

.legal-document {
  grid-column: 1;
  max-width: var(--read);
  font-size: var(--field);
  line-height: 1.7;
  color: var(--ink-read);
  letter-spacing: -0.003em;
  hanging-punctuation: first;
  text-wrap: pretty;
  /* the German editions carry words like "Verbraucherstreitbeilegung", which
     are wider than a narrow phone. A word that cannot fit breaks; the page
     never scrolls sideways to accommodate one. */
  overflow-wrap: break-word;
}

.legal-document > :first-child { margin-top: 0; }

/* the source's own h1 is the document title and is lifted into the head, so it
   is never printed twice */
.legal-document h1 { display: none; }

/* a section opens on a hairline and a wide silence above it, which is the only
   punctuation a document this long is given */
.legal-document h2 {
  margin: 2.4em 0 0.6em;
  padding-top: 1.5em;
  border-top: 1px solid var(--hairline);
  font-size: var(--doc-h2);
  font-weight: 400;
  font-variation-settings: "opsz" 28;
  letter-spacing: -0.026em;
  line-height: 1.14;
  color: var(--ink);
  scroll-margin-top: 104px;
  text-wrap: balance;
}
.legal-document h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }

.legal-document h3 {
  margin: 2em 0 0.45em;
  font-size: var(--doc-h3);
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.3;
  color: var(--ink);
  scroll-margin-top: 104px;
}

/* an anchor you can pick up, that never moves the line it belongs to */
.legal-document :is(h2, h3) { position: relative; }
.legal-document .anchor {
  position: absolute;
  left: -1.15em;
  top: 0.06em;
  width: 1em;
  display: grid;
  place-items: center;
  color: var(--ink-quiet);
  text-decoration: none;
  opacity: 0;
  transition: opacity .2s var(--ease), color .2s var(--ease);
}
.legal-document :is(h2, h3):hover .anchor,
.legal-document .anchor:focus-visible { opacity: 1; }
.legal-document .anchor:hover { color: var(--ink); }
@media (max-width: 900px) { .legal-document .anchor { display: none; } }

.legal-document p { margin: 0 0 1.1em; }
.legal-document strong { color: var(--ink); font-weight: 500; }
.legal-document em { font-style: italic; }

/* a link in a contract is ink, with the underline held back to a hairline
   until it is pointed at: the sentence stays a sentence */
.legal-document a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--hairline-firm);
  transition: text-decoration-color .2s var(--ease);
}
.legal-document a:hover { text-decoration-color: var(--ink); }

.legal-document :is(ul, ol) { margin: 0 0 1.2em; padding-left: 1.4em; }
.legal-document li { margin-bottom: 0.5em; }
.legal-document li::marker { color: var(--ink-quiet); }

.legal-document blockquote {
  margin: 1.6em 0;
  padding: 0.15em 0 0.15em 1.3em;
  border-left: 2px solid var(--hairline-firm);
  color: var(--ink);
}
.legal-document blockquote p { margin: 0; }

.legal-document code {
  padding: 0.12em 0.36em;
  border-radius: 5px;
  background: rgba(20, 21, 25, 0.055);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
}

.legal-document hr {
  height: 0;
  margin: 2.6em 0;
  border: 0;
  border-top: 1px solid var(--hairline);
}

/* A table sits in its own quiet frame, on the card white the home page uses for
   a surface, at the tile radius. `.legal-table` is the frame for a wrapped
   table; nothing in the generated markup wraps one today, so the table element
   carries the frame itself and both are set to the same thing. */
.legal-document table {
  width: 100%;
  max-width: 100%;
  margin: 0 0 1.5em;
  border-collapse: collapse;
  border-radius: var(--r-tile);
  background: rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 0 0 1px var(--glass-edge), 0 1px 3px var(--shadow-soft);
  font-size: 0.94em;
}
.legal-table {
  margin: 0 0 1.5em;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-radius: var(--r-tile);
  background: rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 0 0 1px var(--glass-edge), 0 1px 3px var(--shadow-soft);
}
.legal-table table { margin: 0; background: none; box-shadow: none; }
.legal-document th, .legal-document td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--hairline);
}
.legal-document th { color: var(--ink); font-weight: 500; }
.legal-document tbody tr:last-child :is(th, td) { border-bottom: 0; }

/* ---------- the foot of a document ---------- */

.legal-foot {
  grid-column: 1;
  max-width: var(--read);
  margin-top: clamp(52px, 8vh, 92px);
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
}
.legal-foot h2 {
  margin: 0 0 16px;
  font-size: var(--marker);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--ink-quiet);
}
/* an index, not a row of chips: the name carries the weight, the region sits
   quietly beside it, and the arrow moves when you point at the row */
.doc-index { margin: 0 0 26px; padding: 0; list-style: none; border-top: 1px solid var(--hairline); }
.doc-index li { border-bottom: 1px solid var(--hairline); }
.doc-index a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 22px;
  align-items: baseline;
  gap: 0 18px;
  padding: 15px 2px 15px 0;
  color: var(--ink);
  text-decoration: none;
  transition: padding-left .34s var(--ease);
}
.doc-index a:hover { padding-left: 8px; }
@media (prefers-reduced-motion: reduce) { .doc-index a { transition: none; } .doc-index a:hover { padding-left: 0; } }

.doc-name {
  font-size: 18px;
  font-weight: 400;
  font-variation-settings: "opsz" 18;
  letter-spacing: -0.022em;
}
.doc-where { font-size: var(--micro); color: var(--ink-quiet); white-space: nowrap; }
.doc-go { justify-self: end; color: var(--ink-quiet); transition: transform .34s var(--ease), color .2s var(--ease); }
.doc-index a:hover .doc-go { transform: translateX(4px); color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .doc-go { transition: none; } }

@media (max-width: 560px) {
  .doc-index a { grid-template-columns: minmax(0, 1fr) 22px; }
  .doc-where { grid-column: 1; font-size: 11.5px; }
  .doc-go { grid-row: 1; grid-column: 2; }
}

.legal-hash {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-quiet);
  overflow-wrap: anywhere;
}
.legal-hash code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* The site footer. It is on every page, and its Terms entry is a real link,
   not a label: reaching the Terms from the footer is a ruled requirement.

   The home page's footer is the same five links in the same order with the same
   dot between them; only the ground under it is different, so here they are set
   in the page's own ink instead of white held back. */
.foot { padding: 22px 0 clamp(36px, 6vh, 64px); }
.foot .legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  font-size: var(--micro);
  line-height: 1.5;
  color: var(--ink-quiet);
}
.foot .legal > span[aria-hidden] { opacity: 0.45; }
.foot .legal a {
  color: var(--ink-quiet);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.foot .legal a:hover { color: var(--ink); border-bottom-color: var(--hairline-firm); }
.foot .legal a:focus-visible { color: var(--ink); border-bottom-color: var(--hairline-firm); }
@media (prefers-reduced-motion: reduce) { .foot .legal a { transition: none; } }

/* the footer closes the whole composition, column and rail together, the way
   the home page's footer closes the page: one hairline, all five links on one
   line if the width allows it */
.legal-body .foot {
  grid-column: 1 / -1;
  margin-top: clamp(32px, 5vh, 56px);
  border-top: 1px solid var(--hairline);
}

/* on the beta funnel the mark rises out of the foot of the page, so the
   footer clears it and takes the same quiet ink the rest of the page uses */
/* ⚠️ THE FOOTER MUST STAY UNDER THE STAGE. `main.stage` is positioned with
   z-index 1, which makes it a stacking context, so the question screen's
   pinned action bar -- z-index 11 INSIDE that context -- is still only level
   1 against anything outside it. At z-index 2 this footer painted over the
   pinned bar, and Continue could not be clicked at all on a phone: the funnel
   was unreachable from question one. It sits at 0, above the fixed room
   canvas by document order and below the stage. */
.beta-body .foot {
  position: relative;
  z-index: 0;
  margin-top: clamp(56px, 11vh, 120px);
  padding: 18px var(--gutter) clamp(28px, 5vh, 44px);
  background: var(--ground);
  border-top: 1px solid var(--hairline);
}
.beta-body .foot .legal { justify-content: center; }

/* the consent control is dimmed to sit on the home page's deep ground; on
   these light grounds it carries its own weight instead */
.beta-body .foot .ola-privacy-choices,
.legal-body .foot .ola-privacy-choices { opacity: 1; color: var(--ink-quiet); }

@media (max-width: 900px) {
  /* one column, and the document keeps its measure inside it */
  .legal-shell {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    padding-top: clamp(96px, 12vh, 132px);
  }
  .legal-head { grid-column: 1; }
  .legal-toc {
    grid-column: 1;
    grid-row: auto;
    position: static;
    max-height: none;
    overflow: visible;
    margin: 0 0 clamp(26px, 4vh, 40px);
    padding: 0;
    border-left: 0;
  }
  .legal-toc details {
    border-radius: var(--r-float);
    background: rgba(255, 255, 255, 0.62);
    box-shadow: inset 0 0 0 1px var(--glass-edge), 0 1px 3px var(--shadow-soft);
    overflow: hidden;
  }
  .legal-toc summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 18px;
    cursor: pointer;
    list-style: none;
    font-size: var(--micro);
    letter-spacing: 0.08em;
    color: var(--ink-quiet);
  }
  .legal-toc summary::-webkit-details-marker { display: none; }
  .legal-toc summary::after { content: "+"; font-size: 15px; color: var(--ink); }
  .legal-toc details[open] summary::after { content: "\2212"; }
  .legal-toc ol { padding: 2px 18px 16px; }
  .legal-toc a { margin-left: 0; padding-left: 10px; }
  .legal-toc h2 { display: none; }
}

@media (min-width: 901px) {
  .legal-toc summary { display: none; }
  .legal-toc details { display: block; }
}

/* ---------- the phone ---------- */

@media (max-width: 700px) {
  .frame { top: 12px; height: 50px; padding: 0 16px; gap: 12px; }
  .wordmark { font-size: 18px; }
  .frame-nav { gap: 14px; font-size: 13.5px; }
  html { scroll-padding-top: 82px; }
  .legal-document :is(h2, h3) { scroll-margin-top: 88px; }

  /* the ladder of sizes closes up: a title page still reads as one, and the
     document keeps the 16.5px floor the whole site holds to */
  .legal-eyebrow { gap: 6px 10px; }
  .legal-meta { gap: 13px 26px; }
  .editions { gap: 0 16px; }
  .editions-rail { gap: 0 20px; }

  .legal-document h2 { margin-top: 2.2em; padding-top: 1.35em; }
  .legal-document th, .legal-document td { padding: 11px 13px; }

  /* at this measure a long word is hyphenated where the language says it may
     be, rather than broken wherever it happens to run out of room */
  .legal-document, h1.legal-title, .legal-toc a { hyphens: auto; }
}

/* The footer's five links are one line on a desk, with the home page's dot
   between them. On a phone they wrap over three, and every dot is its own flex
   item, so a line can start with one: "· Beta Confidentiality · Impressum ·".
   The dots stand down at the width where the row stops fitting, and the space
   between the links does the separating. */
@media (max-width: 560px) {
  .foot .legal { gap: 10px 18px; }
  .foot .legal > span[aria-hidden="true"],
  .foot .legal .ola-privacy-dot { display: none; }
}

/* A TABLE HAS TO SURVIVE A NARROW PHONE. Two columns of prose inside 280px are
   two columns of one word each, so below this width the table becomes its own
   horizontal scroller and the cells keep a readable measure. `display: block`
   is what makes a table scroll without a wrapper element, and there is no
   wrapper to be had: everything inside the article is generated and may not be
   touched. The cost is that the table's own semantics are weakened on a phone;
   the alternative was a column of broken words. */
@media (max-width: 620px) {
  .legal-document table {
    display: block;
    width: fit-content;
    overflow-x: auto;
  }
  .legal-document :is(th, td) { min-width: 14em; }
}

/* ---------- print ---------- */

/* A legal document is printed, signed off and filed more often than any other
   page on the site. On paper the furniture goes and the document stays: no
   frame, no rail, no progress line, no footer, black ink at a paper size, and
   the source hash kept, because that is what makes the printout checkable. */
@media print {
  @page { margin: 18mm 16mm; }
  .room-still, .frame, .read-line, .legal-toc, .editions, .skip-link, .doc-index, .foot { display: none !important; }
  body { background: #fff; color: #000; font-size: 10.5pt; line-height: 1.5; }
  .legal-shell { display: block; max-width: none; padding: 0; }
  .legal-document {
    max-width: none;
    color: #000;
    font-size: 10.5pt;
    line-height: 1.5;
    letter-spacing: 0;
  }
  .legal-document h2 {
    break-after: avoid; page-break-after: avoid;
    border-top: 0; padding-top: 0; margin-top: 1.6em;
    font-size: 14pt; letter-spacing: -0.01em;
  }
  .legal-document h3 { break-after: avoid; page-break-after: avoid; font-size: 11.5pt; }
  .legal-document :is(p, li, blockquote, table) { break-inside: avoid; page-break-inside: avoid; }
  .legal-document a { color: #000; text-decoration: underline; }
  .legal-document a[href^="/"]::after { content: " (tryola.ai" attr(href) ")"; font-size: 0.85em; color: #444; }
  .legal-document .anchor { display: none; }
  .legal-document blockquote { border-left: 1px solid #999; }
  .legal-document code { background: none; padding: 0; }
  .legal-table, .legal-document table { box-shadow: none; background: none; overflow: visible; display: table; width: 100%; }
  .legal-document :is(th, td) { border-bottom: 1px solid #bbb; min-width: 0; padding: 6pt 8pt 6pt 0; }
  .legal-head { margin-bottom: 10mm; }
  .legal-eyebrow { letter-spacing: 0.06em; color: #444; }
  .legal-meta { border-top: 1px solid #bbb; color: #444; }
  .legal-meta dd { color: #000; }
  .legal-foot { margin-top: 8mm; border-top: 1px solid #bbb; }
  .legal-foot h2 { color: #444; }
  .legal-hash { color: #444; }
  h1.legal-title { font-size: 22pt; letter-spacing: -0.02em; line-height: 1.08; }
}

/* ═══════════════ 404 / ERROR ═════════════════════════════════════════════ */

.gone {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 120px var(--gutter) 96px;
  text-align: center;
}
.gone-mark { width: 96px; height: 96px; color: var(--ink); opacity: 0.16; }
.gone h1 {
  margin: 0;
  font-size: var(--say-2);
  font-weight: 400;
  font-variation-settings: "opsz" 30;
  letter-spacing: -0.030em;
  line-height: 1.06;
}
.gone p { margin: 0; max-width: 30rem; color: var(--ink-quiet); font-size: var(--micro); }
.gone .row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ---------- the wordmark, and the way it collapses ---------- */

/* The mark IS the o: "ola" is the mark followed by "la". On scroll the letters
   retract into the mark and the bar closes up around it.

   This is x.ai's mechanism, built with our own geometry. Two parts, and the
   second is the one that is easy to miss:

     THE LETTERS travel through a window whose LEFT edge sits against the mark,
     so they disappear INTO it rather than off the side of the bar, and they
     compress along x as they go. The collapse is geometry. Nothing here
     touches opacity, because a fade is not a morph.

     THE BAR CLOSES UP behind them. The window keeps its width the whole time
     -- it is never re-laid-out, so the letterforms never reflow or resample --
     and a negative end margin grows in lockstep to take back exactly the space
     the letters have vacated. x.ai does this with `margin-inline-end: -122px`
     on a canvas that stays 173px wide. Without it the bar keeps a hole where
     the word used to be.

   Both run on the same duration and easing, so the word retracting and the bar
   tightening are one movement. */

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-inline-end: 0;
  transition: margin-inline-end .58s var(--ease);
}
.wordmark-mark {
  flex: 0 0 auto;
  display: block;
  width: 22px;
  height: 22px;
  transition: transform .58s var(--ease);
}

/* Collapsed, the bar is a badge and the mark is the whole of it. It grows and
   the frame's padding closes to (bar height - mark) / 2, so the pill lands as
   a circle sized to the mark rather than a wide pill with a small mark
   floating in the middle of it. */
.wordmark.is-mark .wordmark-mark { transform: scale(1.26); }
.frame:has([data-wordmark].is-mark) { padding-left: 16px; padding-right: 16px; }
.frame { transition: padding .58s var(--ease); }
.wordmark:not(.is-ready) .wordmark-mark,
.wordmark.is-still .wordmark-mark { transition: none; }
.wordmark.is-still .wordmark-mark { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .frame, .wordmark-mark { transition: none; }
  .wordmark.is-mark .wordmark-mark { transform: none; }
  .frame:has([data-wordmark].is-mark) { padding-left: inherit; padding-right: inherit; }
}
.wordmark-rest {
  flex: 0 0 auto;
  display: inline-block;
  overflow: hidden;
  width: 19px;
  margin-left: -1px;
}
.wordmark-rest > span {
  display: inline-block;
  transform-origin: left center;
  transition: transform .58s var(--ease);
}

.wordmark.is-mark { margin-inline-end: -18px; }
.wordmark.is-mark .wordmark-rest > span { transform: translateX(-102%) scaleX(0.52); }

/* until the script has armed it, and whenever motion is refused, it holds the
   resting word and never plays */
.wordmark:not(.is-ready),
.wordmark:not(.is-ready) .wordmark-rest > span,
.wordmark.is-still,
.wordmark.is-still .wordmark-rest > span { transition: none; }
.wordmark.is-still { margin-inline-end: 0; }
.wordmark.is-still .wordmark-rest > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .wordmark, .wordmark-rest > span { transition: none; }
  .wordmark.is-mark { margin-inline-end: 0; }
  .wordmark.is-mark .wordmark-rest > span { transform: none; }
}

/* ---------- letters ---------- */

/* Text that arrives one letter at a time. Measured frame by frame off a live
   page rather than guessed at: a SHORT 14px of travel, a fade, and a blur of
   4px, on a small stagger between neighbours.

   The blur is the part that matters and it is why an earlier pass here read as
   worse. That one rolled a whole word behind a hard mask: one block, a long
   travel, a clipped edge. A clipped edge is what makes a letter look cut off
   rather than gone. Losing focus is what makes it look gone.

   Each word is its own inline-block so a line never breaks inside one, and the
   spaces between words are real spaces so it still breaks where it should. */

.wd { display: inline-block; white-space: nowrap; }
.ltr {
  display: inline-block;
  transform: translateY(0);
  opacity: 1;
  filter: blur(0px);
  transition:
    transform .26s var(--ease) var(--d, 0ms),
    opacity   .22s var(--ease) var(--d, 0ms),
    filter    .22s var(--ease) var(--d, 0ms),
    color     .34s var(--ease) calc(var(--d, 0ms) + 80ms);
}

/* parked below, out of focus, holding whatever colour it arrives with; no
   transition, because this is the state it travels FROM */
.letters.is-in .ltr {
  transform: translateY(14px);
  opacity: 0;
  filter: blur(4px);
  color: var(--rise, inherit);
  transition: none;
}
/* and away upward, losing focus rather than sliding behind an edge */
.letters.is-out .ltr {
  transform: translateY(-14px);
  opacity: 0;
  filter: blur(4px);
}

.no-blur .ltr,
.no-blur .letters.is-in .ltr,
.no-blur .letters.is-out .ltr { filter: none; }

/* Refused motion gets the sentence, whole and still. It must still be
   REMOVED from `is-in`, or the words would never be readable at all. */
@media (prefers-reduced-motion: reduce) {
  .ltr, .letters.is-in .ltr {
    transform: none;
    opacity: 1;
    filter: none;
    color: inherit;
    transition: none;
  }
  .letters.is-out .ltr { opacity: 0; transition: none; }
}