/* ScreenshotFiles legal pages, based on Brandkit 1.0. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root,
html[data-theme="dark"] {
  color-scheme: dark;
  --legal-bg: #08090b;
  --legal-surface: #111216;
  --legal-surface-soft: #18191d;
  --legal-border: rgba(255, 255, 255, 0.1);
  --legal-text: #f7f6f2;
  --legal-copy: #d0d1d5;
  --legal-muted: #9b9da4;
  --legal-header: rgba(8, 9, 11, 0.96);
  --legal-shadow: 0 18px 55px rgba(0, 0, 0, 0.3);
}

html[data-theme="light"] {
  color-scheme: light;
  --legal-bg: var(--sf-canvas);
  --legal-surface: var(--sf-white);
  --legal-surface-soft: var(--sf-paper);
  --legal-border: rgba(19, 20, 23, 0.11);
  --legal-text: var(--sf-ink);
  --legal-copy: #34363b;
  --legal-muted: var(--sf-steel);
  --legal-header: rgba(244, 243, 240, 0.96);
  --legal-shadow: var(--sf-shadow-soft);
}

html { min-height: 100%; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  color: var(--legal-text);
  background:
    radial-gradient(720px 380px at 92% -8%, rgba(247, 167, 83, 0.13), transparent 68%),
    var(--legal-bg);
  font: 400 16px/1.72 var(--sf-font-body);
  -webkit-font-smoothing: antialiased;
}

.legal-header {
  position: sticky;
  top: 0;
  z-index: 20;
  width: 100%;
  min-height: 72px;
  padding: 10px clamp(16px, 2vw, 32px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--legal-border);
  background: var(--legal-header);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.legal-brand {
  min-width: 0;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: inherit;
  text-decoration: none;
}

.legal-back {
  min-height: 44px;
  padding: 0 16px;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(247, 167, 83, 0.58);
  border-radius: var(--sf-radius-button);
  color: var(--sf-ink);
  background: var(--sf-glow);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.legal-back:hover {
  border-color: var(--sf-glow-hover);
  background: var(--sf-glow-hover);
  transform: translateY(-1px);
}

.legal-back svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

main {
  flex: 1;
  width: min(calc(100% - 48px), 760px);
  margin: 0 auto;
  padding: 68px 0 96px;
}

h1,
h2 {
  color: var(--legal-text);
  font-family: var(--sf-font-display);
  font-weight: 600;
}

h1 {
  max-width: 680px;
  margin-bottom: 10px;
  font-size: clamp(40px, 6vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.045em;
}

.updated {
  margin-bottom: 44px;
  color: var(--legal-muted);
  font-size: 13px;
  letter-spacing: 0.02em;
}

h2 {
  margin: 42px 0 14px;
  font-size: clamp(23px, 3vw, 29px);
  line-height: 1.22;
  letter-spacing: -0.028em;
}

p { margin-bottom: 16px; color: var(--legal-copy); }
ul { margin: 0 0 18px 22px; color: var(--legal-copy); }
li { margin-bottom: 9px; padding-left: 4px; }
li::marker { color: var(--sf-glow); }

main a {
  color: var(--legal-text);
  text-decoration-color: var(--sf-glow);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

main a:hover { color: var(--sf-glow); }
strong { color: var(--legal-text); font-weight: 600; }

code {
  padding: 2px 6px;
  border-radius: 6px;
  color: var(--legal-text);
  background: var(--legal-surface-soft);
  font-size: 0.9em;
}

.box {
  margin: 22px 0;
  padding: 24px 26px;
  border: 1px solid var(--legal-border);
  border-radius: var(--sf-radius-card);
  background: var(--legal-surface);
  box-shadow: var(--legal-shadow);
}

.box p,
.box ul { margin-bottom: 10px; }
.box > :last-child { margin-bottom: 0; }

/* The legal-basis table. A three-column table cannot compress far enough for a
   narrow phone without the middle column becoming one word per line, so it
   scrolls inside its own frame instead of forcing the page to scroll. */
.legal-table-wrap {
  margin: 22px 0;
  overflow-x: auto;
  border: 1px solid var(--legal-border);
  border-radius: var(--sf-radius-card);
  background: var(--legal-surface);
  box-shadow: var(--legal-shadow);
}

.legal-table-wrap table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 15px;
}

.legal-table-wrap th,
.legal-table-wrap td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--legal-border);
  color: var(--legal-copy);
}

.legal-table-wrap th {
  font-weight: 600;
  color: var(--legal-text);
  background: var(--legal-surface-soft);
  white-space: nowrap;
}

.legal-table-wrap tbody tr:last-child th,
.legal-table-wrap tbody tr:last-child td { border-bottom: 0; }

footer {
  width: 100%;
  min-height: 70px;
  padding: 12px clamp(16px, 2vw, 32px);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 22px;
  border-top: 1px solid var(--legal-border);
  color: var(--legal-muted);
  background: var(--legal-surface);
  font-size: 13px;
}

/* The trader identity. Dutch law requires it to be permanently available on
   the site, so it sits in the footer of every page rather than on one about
   page. Its own row, because it is a sentence and the links are not. */
.footer-entity {
  flex-basis: 100%;
  font-size: 12px;
  line-height: 1.5;
}

footer a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--legal-muted);
  text-decoration: none;
}

footer a:hover { color: var(--legal-text); }

:focus-visible {
  outline: 3px solid var(--sf-glow);
  outline-offset: 4px;
  border-radius: 8px;
}

@media (max-width: 600px) {
  .legal-header { min-height: 64px; padding-inline: 12px; }
  .legal-brand .brand-lockup-copy { display: flex; }
  .legal-brand .brand-lockup-symbol { width: 40px; height: 37px; }
  .legal-brand .brand-lockup-name { font-size: 17px; }
  .legal-brand .brand-lockup-tagline { font-size: 8px; }
  main { width: calc(100% - 32px); padding: 48px 0 72px; }
  .updated { margin-bottom: 34px; }
  h1 { font-size: clamp(36px, 12vw, 48px); }
  h2 { margin-top: 34px; }
  .box { padding: 20px; }
  footer { padding-inline: 16px; flex-wrap: wrap; }
}

@media (max-width: 400px) {
  .legal-brand .brand-lockup-symbol { width: 37px; height: 34px; }
  .legal-brand .brand-lockup-name { font-size: 15px; }
  .legal-brand .brand-lockup-tagline { display: none; }
  .legal-back { width: 44px; padding: 0; }
  .legal-back span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}