/* plentymedia.co/terms | Terms of Service. Shared reset lives in /assets/base.css. No script on this page. */

@font-face {
  font-family: 'Google Sans Flex';
  src: url('fonts/gsf-var-latin.woff2') format('woff2-variations'),
       url('fonts/gsf-var-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-stretch: 100% 120%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0, U+00A9, U+00B7, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2122;
}

:root {
  --white: #ffffff;
  --ink: #000000;
  --ink-2: #303737;
  --muted: #56676a;
  --light-1: #f5f6f6;
  --light-2: #d0dbdb;
  --blue: #0d72d1;

  /* About 68 characters of 17 px body text; px so the 14 px footer keeps the same column. */
  --measure: 600px;
  --pad: 20px;

  --font: 'Google Sans Flex', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

@media (min-width: 640px) {
  :root {
    --pad: 32px;
  }
}

html {
  background: var(--white);
}

body {
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--white);
  font-optical-sizing: auto;
}

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---------- one reading column: header, text, footer ---------- */
.top,
.legal,
.foot {
  width: 100%;
  max-width: calc(var(--measure) + 2 * var(--pad));
  margin-inline: auto;
  padding-inline: var(--pad);
}

.top {
  padding-top: 14px;
}
.top__brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
}
.logo {
  width: 112px;
  height: auto;
  aspect-ratio: 1069 / 222;
}

.legal {
  padding-block: 32px 56px;
  overflow-wrap: anywhere;
}
.legal__title {
  font-size: clamp(36px, 9vw, 64px);
  font-weight: 700;
  font-stretch: 120%;
  font-variation-settings: 'wdth' 120, 'wght' 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.legal__updated {
  margin-top: 14px;
  font-size: 15px;
  color: var(--muted);
}
.legal__updated strong {
  font-weight: 600;
}
.legal > p {
  margin-top: 16px;
}
.legal h2 {
  margin-top: 40px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
}
.legal h2 + p,
.legal h2 + ul {
  margin-top: 10px;
}
.legal strong {
  color: var(--ink);
}
.legal__list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding-left: 1.2em;
  list-style: disc;
}
.legal__list li::marker {
  color: var(--muted);
}
.legal__contact {
  padding-left: 0;
  list-style: none;
}
.legal a {
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
@media (hover: hover) {
  .legal a:hover {
    color: var(--blue);
  }
}

.foot {
  display: grid;
  gap: 2px;
  padding-block: 18px 26px;
  border-top: 1px solid var(--light-2);
  font-size: 14px;
  color: var(--muted);
}
.foot a {
  color: inherit;
}

@media (min-width: 900px) {
  .logo {
    width: 124px;
  }
  .legal {
    padding-block: 56px 80px;
  }
}