/* ---- The legal pages -----------------------------------------------------
   One stylesheet for the three standalone documents: the privacy notice, the
   terms of use, and the service ÁSZF. They used to carry a copy of it each,
   with a note on one of them asking whoever changed a colour to remember to
   change it in the other two. This is that note, answered.

   ---- Why the font URLs below are relative --------------------------------
   The ÁSZF was drafted in docs/, outside public/, and read by opening the
   file — where an absolute /fonts/… resolves against the filesystem root and
   finds nothing. All three pages are served from the site root now, but a
   relative url() resolves against *this stylesheet*, not the page, so
   `fonts/inter-latin.woff2` is public/fonts/inter-latin.woff2 from anywhere
   that links it. No reason to change what works in both places.

   src/fonts.css keeps its own absolute copies for the app; the two never meet,
   because these pages load no bundle.

   ---- Light by default ----------------------------------------------------
   The site is ink-dark and these pages are not, which is deliberate: this is a
   long legal text, it gets read end to end and it gets printed, and both of
   those are easier on paper than on a black screen. Dark mode is honoured for
   anyone who has asked their system for it.
   ------------------------------------------------------------------------- */

/* ---- Inter — body -------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- JetBrains Mono — labels and figures --------------------------------- */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Space Grotesk — headings -------------------------------------------- */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Palette -------------------------------------------------------------
   The site's own --ink and --rust, with paper standing in for the black the
   sections are set on. The fallbacks after each family are what shows for the
   fraction of a second before the woff2 lands, and what shows for good if a
   page is read from a copy that has no fonts folder beside it. */
:root {
  --ink:    #0b0c0d;
  --paper:  #f4f3f0;
  --rust:   #e2551c;
  --muted:  #5c6166;
  --rule:   rgba(11, 12, 13, .14);
  --sunk:   rgba(11, 12, 13, .035);

  --display: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:   #e9e8e5;
    --paper: #0b0c0d;
    --muted: #9aa0a6;
    --rule:  rgba(233, 232, 229, .16);
    --sunk:  rgba(233, 232, 229, .04);
  }
}

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

body {
  margin: 0;
  padding: 0 clamp(20px, 5vw, 32px) 96px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

main { max-width: 760px; margin: 0 auto; }

a { color: var(--rust); }
a:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }

/* ---- The masthead --------------------------------------------------------
   What these pages were missing: nothing on them said whose they were. The
   mark is the same favicon.svg the tab shows, at a size where its shape still
   reads, and the whole lockup is the way back to the site. */
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  max-width: 760px;
  margin: 0 auto clamp(30px, 5vw, 52px);
  padding: clamp(20px, 4vw, 30px) 0 clamp(14px, 2.4vw, 20px);
  border-bottom: 1px solid var(--rule);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: inherit;
}

.brand__mark {
  flex: none;
  width: 34px;
  height: 34px;
}

.brand__type { line-height: 1; }

.brand__name {
  display: block;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .04em;
}

.brand__sub {
  display: block;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .46em;
  color: var(--muted);
}

/* Kept from the old pages, moved into the masthead. Still the only navigation
   these documents have besides the footer. */
.back {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
}
.back:hover { color: var(--rust); }

/* ---- The document's own head --------------------------------------------- */
h1 {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: clamp(1.9rem, 5vw, 2.7rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.02em;
}

.updated {
  margin: 0 0 clamp(30px, 5vw, 46px);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--muted);
}

/* ---- Contents ------------------------------------------------------------
   Written out rather than generated: these pages carry no script and should
   not need one to be navigable. It costs a line per section when a heading is
   added, and it earns that back on the ÁSZF, which runs to thirteen of them.

   Two columns where there is room, because a single column of thirteen items
   pushes the first clause below the fold on a laptop. */
.toc {
  margin: 0 0 clamp(34px, 5vw, 56px);
  padding: clamp(16px, 2.6vw, 22px) clamp(18px, 3vw, 26px);
  background: var(--sunk);
  border-left: 2px solid var(--rust);
  border-radius: 0 4px 4px 0;
}

.toc__title {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 28px;
  font-size: 15px;
}

.toc li {
  margin: 0 0 5px;
  /* A two-column list may not break an entry across the column boundary. */
  break-inside: avoid;
}

.toc a {
  text-decoration: none;
  color: inherit;
}
.toc a:hover { color: var(--rust); }

@media (max-width: 560px) {
  .toc ol { columns: 1; }
}

/* ---- Sections ------------------------------------------------------------
   Each heading is an anchor, so a clause can be pointed at rather than
   described. The mark only appears on hover or when the heading is focused —
   a column of hashes down the left is noise for the ninety-nine per cent of
   readers who are reading rather than citing. */
h2 {
  position: relative;
  margin: clamp(38px, 6vw, 56px) 0 12px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-family: var(--display);
  font-size: clamp(1.2rem, 3vw, 1.45rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
  /* Clears the anchor of the viewport's top edge when it is jumped to. */
  scroll-margin-top: 18px;
}

.anchor {
  position: absolute;
  top: 18px;
  left: -.85em;
  padding: 0 .18em;
  text-decoration: none;
  font-family: var(--mono);
  font-weight: 400;
  color: var(--rust);
  opacity: 0;
  transition: opacity .15s ease;
}
h2:hover .anchor,
.anchor:focus-visible { opacity: 1; }

/* Under 900px there is no margin to hang it in, so it follows the heading
   instead of sitting beside it. */
@media (max-width: 900px) {
  .anchor { position: static; margin-left: .35em; }
}

h3 {
  margin: 26px 0 6px;
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: .01em;
}

p, li { overflow-wrap: break-word; }
ul { padding-left: 1.25em; }
li { margin: 6px 0; }

dl { margin: 10px 0 0; padding: 0; }
dt {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
dd { margin: 2px 0 0; }

/* ---- Unfinished passages -------------------------------------------------
   The draft leans on this: a clause nobody has agreed yet, marked so it cannot
   be mistaken for one that has been. */
.todo {
  margin: 18px 0;
  padding: 14px 16px;
  background: rgba(226, 85, 28, .1);
  border-left: 3px solid var(--rust);
  border-radius: 0 4px 4px 0;
}
.todo p { margin: 0 0 6px; }
.todo p:last-child { margin: 0; }
.todo strong {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

code {
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--rule);
  font-family: var(--mono);
  font-size: .88em;
}

/* Scrolls inside itself rather than widening the page — the privacy notice's
   data table has four columns and a phone has room for two. */
table {
  display: block;
  width: 100%;
  margin: 14px 0;
  border-collapse: collapse;
  overflow-x: auto;
  font-size: 15px;
}
th, td {
  padding: 9px 12px 9px 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}
th {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- Foot ----------------------------------------------------------------
   The three documents point at each other here. A reader who has found one of
   them has usually gone looking for whichever of the other two answers their
   actual question. */
footer {
  margin-top: clamp(48px, 7vw, 72px);
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-size: 14px;
  color: var(--muted);
}

.foot__docs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* The one the reader is already on: named, so the set is complete, but not a
   link back to where they are standing. */
.foot__docs [aria-current='page'] {
  color: var(--ink);
  text-decoration: none;
}

footer p { margin: 0 0 4px; }

/* ---- On paper ------------------------------------------------------------
   These get printed — a customer who is handed a repair to agree to prints the
   terms. So: black on white whatever the screen was set to, no masthead rule
   or contents list to waste the first page, and every link's address written
   out, because a printed link that only says "itt" is a dead end.
   ------------------------------------------------------------------------- */
@media print {
  :root {
    --ink: #000;
    --paper: #fff;
    --muted: #444;
    --rule: rgba(0, 0, 0, .3);
    --sunk: transparent;
  }

  body { font-size: 11pt; line-height: 1.5; padding: 0; }
  main { max-width: none; }

  .back, .toc, .anchor { display: none; }

  .masthead {
    margin-bottom: 24pt;
    padding: 0 0 10pt;
  }

  a { color: #000; text-decoration: underline; }
  /* Skip the ones whose text is already the address, and the in-page jumps. */
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: .82em; color: #444; }

  h1, h2, h3 { break-after: avoid; }
  table, .todo, li { break-inside: avoid; }
  footer { break-before: avoid; }
}