/* Beyonds — policy site */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/CormorantGaramond-SemiBold.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url("/fonts/Manrope-VariableFont_wght.woff2") format("woff2")}

:root{
  --ink:#081720; --ivory:#F6F4EE; --paper:#E8E4D9; --brass:#9C7A35;
  --cognac:#8B5E3C; --moss:#4C5238; --rule:rgb(8 23 32 / .12);
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ivory);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;
  /* Manrope ligates "(c)" into "©", which turned "Art. 6(1)(c)" into
     "Art. 6(1)©" on screen — a legal citation rendered as a copyright sign.
     The markup was always correct; only the glyph was wrong. Documents full
     of article references cannot afford that substitution. */
  font-variant-ligatures:none}

.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:10;background:var(--ink);color:var(--ivory);padding:10px 16px}

.top{display:flex;align-items:center;justify-content:space-between;gap:24px;
  max-width:860px;margin:0 auto;padding:28px 24px;border-bottom:1px solid var(--rule)}
.home{display:block;width:84px;flex:0 0 auto}
.home svg{width:100%;height:auto;display:block;fill:var(--ink)}
.docs{display:flex;gap:22px;font-size:13px;font-weight:700;letter-spacing:.02em;flex-wrap:wrap}
.docs a{color:rgb(8 23 32 / .55);text-decoration:none;padding-bottom:3px;border-bottom:2px solid transparent}
.docs a:hover{color:var(--ink)}
.docs a[aria-current]{color:var(--ink);border-bottom-color:var(--brass)}

main{max-width:860px;margin:0 auto;padding:0 24px 72px}

.head{padding:56px 0 32px}
h1{font-family:var(--serif);font-weight:600;font-size:clamp(32px,6vw,52px);
  line-height:1.1;margin:0 0 10px;letter-spacing:-.01em}
.sub{margin:0 0 20px;font-size:15px;color:var(--moss)}
.meta{margin:0;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgb(8 23 32 / .5)}

.toc{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:24px 0;margin-bottom:48px}
.toc-h{margin:0 0 14px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgb(8 23 32 / .5)}
.toc ol{list-style:none;margin:0;padding:0;columns:2;column-gap:40px}
.toc li{break-inside:avoid;margin-bottom:7px}
.toc a{display:flex;gap:10px;font-size:14px;color:var(--ink);text-decoration:none}
.toc a:hover{color:var(--cognac)}
.toc a span{color:var(--brass);font-variant-numeric:tabular-nums;flex:0 0 22px}
@media(max-width:620px){.toc ol{columns:1}}

/* German and Estonian labels are long; let the header stack rather than
   push "Nutzungsbedingungen" off the right edge of a phone. */
@media(max-width:560px){
  .top{flex-direction:column;align-items:flex-start;gap:16px;padding:20px 24px}
  .home{width:64px}
  .docs{gap:18px;font-size:12px}
}

.prose{font-size:16px}
.prose h2{font-family:var(--serif);font-weight:600;font-size:clamp(23px,3.4vw,30px);
  line-height:1.25;margin:56px 0 18px;padding-top:28px;border-top:1px solid var(--rule);
  display:flex;gap:14px;align-items:baseline;scroll-margin-top:20px}
.prose h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose h2 .num{font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.1em;
  color:var(--brass);flex:0 0 auto;position:relative;top:-.35em}
.prose h3{font-size:15px;font-weight:800;letter-spacing:.01em;margin:34px 0 10px}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px}
.prose li{margin-bottom:8px}
.prose li::marker{color:var(--brass)}
.prose a{color:var(--cognac);text-decoration:none;border-bottom:1px solid rgb(139 94 60 / .35)}
.prose a:hover{border-bottom-color:var(--cognac)}
.prose strong{font-weight:800}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:var(--paper);padding:1px 5px;border-radius:2px}
.prose blockquote{margin:0 0 20px;padding:16px 20px;background:var(--paper);
  border-left:3px solid var(--brass)}
.prose blockquote p:last-child{margin-bottom:0}
.prose hr{border:0;border-top:1px solid var(--rule);margin:40px 0}

.tw{overflow-x:auto;margin:0 0 22px;-webkit-overflow-scrolling:touch}
.prose table{border-collapse:collapse;width:100%;font-size:14px;min-width:460px}
.prose th{text-align:left;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:rgb(8 23 32 / .55);font-weight:800;padding:0 16px 10px 0;border-bottom:1px solid var(--ink)}
.prose td{padding:12px 16px 12px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.prose tr:last-child td{border-bottom:0}

/* Below 640px a table becomes a list: each row is a block, each cell is its
   column heading followed by the value. The sideways scroll goes away, and
   so does the column that used to sit off the right edge. */
@media (max-width:640px){
  .tw{overflow-x:visible}
  .prose table{display:block;min-width:0;font-size:15px}
  .prose thead{display:none}
  .prose tbody,.prose tr,.prose td{display:block;width:100%}
  .prose tr{padding:16px 0;border-bottom:1px solid var(--rule)}
  .prose tr:last-child{border-bottom:0}
  /* German compounds — "Auftragsverarbeitungsvertrag" and friends — are
     longer than a narrow cell, so let them break rather than push the page. */
  .prose td{padding:0;border:0;overflow-wrap:anywhere}
  .prose td + td{margin-top:12px}
  .prose td[data-label]::before{content:attr(data-label);display:block;
    font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;
    color:rgb(8 23 32 / .55);margin-bottom:3px}
  .prose td:empty{display:none}
}

.foot{max-width:860px;margin:0 auto;padding:36px 24px 56px;border-top:1px solid var(--rule);
  font-size:13px;color:var(--moss)}
.langs{display:flex;flex-wrap:wrap;gap:16px;align-items:baseline;margin-bottom:16px}
.lbl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgb(8 23 32 / .5)}
.langs a,.also a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
.langs a:hover,.also a:hover{border-bottom-color:var(--brass)}
.also{margin-bottom:20px}
.legal{margin:0;font-size:12px;color:rgb(8 23 32 / .55);line-height:1.6}
.legal a{color:var(--cognac);text-decoration:none}

@media print{
  .top,.toc,.foot,.skip{display:none}
  body{background:#fff;font-size:11pt}
  .prose h2{page-break-after:avoid}
  .tw,.prose tr{page-break-inside:avoid}
}