/* В сети — vseti.io
   One stylesheet for every page. No @import, no external font, no third-party request:
   Russian ISPs throttle Cloudflare-fronted assets to roughly the first 16 KB, and this
   page is often the first thing a referred user loads on a bad network. Everything it
   needs must arrive in two requests.

   Type is set in the system serif for display and the system sans for text. Both stacks
   have real Cyrillic on every platform we ship to, which a webfont would have to be
   downloaded to match. */

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

:root {
  /* Light is the base. Every colour is defined here, so a token can never be
     defined only inside a media query. */
  --paper:        #f6f4ef;
  --paper-2:      #efece4;
  --surface:      #ffffff;
  --ink:          #16191b;
  --ink-2:        #3c4346;
  --muted:        #6a7276;
  --line:         #e2ddd2;
  --line-2:       #cec8b9;
  --signal:       #0d7a4e;   /* text-weight green, 4.9:1 on paper */
  --signal-dot:   #17a768;   /* the status dot: brighter than text ever should be */
  --signal-soft:  #e6f2ea;
  --amber:        #b5760f;
  --amber-dot:    #e0961d;
  --shadow:       0 1px 2px rgba(22, 25, 27, .05), 0 8px 24px -12px rgba(22, 25, 27, .16);

  --f-display: ui-serif, "New York", Georgia, "Times New Roman", serif;
  --f-text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Fluid type scale, ratio ~1.25 at 360px widening to ~1.33 at 1200px. */
  --t--1: clamp(.8125rem, .79rem + .1vw, .875rem);
  --t-0:  clamp(1rem, .97rem + .14vw, 1.0625rem);
  --t-1:  clamp(1.125rem, 1.07rem + .26vw, 1.3125rem);
  --t-2:  clamp(1.35rem, 1.24rem + .5vw, 1.75rem);
  --t-3:  clamp(1.65rem, 1.44rem + .95vw, 2.4rem);
  --t-4:  clamp(2.05rem, 1.6rem + 2vw, 3.4rem);
  --t-5:  clamp(2.4rem, 1.6rem + 3.6vw, 4.5rem);

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: clamp(64px, 9vw, 112px);
  --sp-10: clamp(88px, 12vw, 160px);

  --radius: 14px;
  --radius-sm: 9px;
  --measure: 34rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:       #101414;
    --paper-2:     #0b0e0e;
    --surface:     #171c1c;
    --ink:         #eceae3;
    --ink-2:       #c3c8c5;
    --muted:       #949c9a;
    --line:        #252c2c;
    --line-2:      #364040;
    --signal:      #4fd39a;
    --signal-dot:  #35c489;
    --signal-soft: #16241e;
    --amber:       #e0a94a;
    --amber-dot:   #d9931f;
    --shadow:      0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -14px rgba(0, 0, 0, .7);
  }
}

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

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  /* Column layout so a short page — 404, or a legal page on a tall desktop screen — keeps its
     footer at the bottom of the viewport instead of stranding it halfway down. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: var(--t-0);
  line-height: 1.6;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--signal-soft); color: var(--ink); }

h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.018em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: var(--signal); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .18em; }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: 3px;
}

ul, ol { margin: 0; padding: 0; list-style: none; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--surface);
  color: var(--ink);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  z-index: 20;
}
.skip:focus { left: var(--sp-4); top: var(--sp-4); }

/* ---------------------------------------------------------------- layout */

.wrap {
  width: 100%;
  max-width: 1060px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
}

.section { padding-block: var(--sp-9); }
.section + .section { border-top: 1px solid var(--line); }
.section--tint { background: var(--paper-2); }

.measure { max-width: var(--measure); }

.eyebrow {
  font-size: var(--t--1);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.lede {
  font-size: var(--t-1);
  color: var(--ink-2);
  line-height: 1.5;
}

/* ---------------------------------------------------------------- header */

.masthead {
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  position: sticky;
  top: 0;
  z-index: 10;
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 62px;
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--f-display);
  font-size: 1.2rem;
  letter-spacing: -.01em;
  color: var(--ink);
}
.wordmark:hover { text-decoration: none; }
.wordmark::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--signal-dot);
  transform: translateY(-1px);
}

.langs {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--t--1);
}
.langs a, .langs span {
  padding: 9px 12px;
  border-radius: 999px;
  color: var(--muted);
  letter-spacing: .04em;
}
.langs [aria-current] {
  background: var(--surface);
  border: 1px solid var(--line-2);
  color: var(--ink);
}

/* ---------------------------------------------------------------- hero */

.hero { padding-block: var(--sp-10) var(--sp-8); }

.hero h1 {
  font-size: var(--t-5);
  max-width: 15ch;
  letter-spacing: -.03em;
}

.hero__sub {
  margin-top: var(--sp-5);
  font-size: var(--t-2);
  font-family: var(--f-display);
  color: var(--ink-2);
  max-width: 30ch;
  line-height: 1.25;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.hero__note {
  margin-top: var(--sp-6);
  max-width: 46ch;
  color: var(--muted);
}

/* ONE COLUMN. The buttons are a row of their own; the "soon" form and the file links belong to
   all of them and sit under all of them. Before this they each lived in a per-button column, so
   the links hung off the Android button alone and centring the columns against each other pushed
   the iPhone button lower than the one beside it. */
.hero__cta {
  margin-top: var(--sp-7);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
}

.hero__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
/* Equal width, so three labels of different lengths do not read as three different kinds of
   control. The floor is generous enough for the longest Russian label; `flex: 0 1 auto` lets them
   grow together rather than one swallowing the row. */
.hero__buttons > .btn {
  flex: 0 1 auto;
  min-width: 15.5rem;
}

/* THREE PILLS NEED A ROW THREE FLOORS WIDE, AND MOST SCREENS DO NOT HAVE ONE (2026-09-04). Two
   pills at the 15.5rem floor fit every width above the old 560px breakpoint. Three want 48rem of
   row: the hero has 43rem at 768px and 48.4rem at 860px — six pixels of headroom, which one
   longer translation eats. Both ways of keeping the row are worse than stacking. Letting it wrap
   gives a pair and an orphan, which reads as a broken grid rather than as three choices; dropping
   the floor in a middle band makes «Скачать в Google Play» wrap INSIDE its own pill and the row
   goes two lines tall. So the stack starts at 900px now instead of 560px.
   Above 560px the stacked column is capped, because a full-width pill on an 860px screen is an
   800px slab and stops looking like a button. Below 560px nothing changes: the cap is wider than
   the content column there, so that layout is what it has always been. */
@media (max-width: 899px) {
  /* Full width and stacked: side by side at this size leaves cramped pills with the glyph almost
     touching the text. `min-width` has to go with it or the row cannot shrink to fit. */
  .hero__buttons { flex-direction: column; align-self: stretch; }
  .hero__buttons > .btn { min-width: 0; width: 100%; }
}
@media (min-width: 561px) and (max-width: 899px) {
  .hero__buttons { max-width: 22rem; }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 13px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-weight: 550;
  letter-spacing: .005em;
  cursor: pointer;
  transition: transform .12s ease, opacity .12s ease;
}
.btn:hover { text-decoration: none; opacity: .88; }
.btn:active { transform: translateY(1px); }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-2);
}
.btn--ghost:hover { background: var(--surface); opacity: 1; }

/* The store button carries the store's own mark. Without it these are three identical black
   pills and the mark is the only thing that says which one a person is pressing; the two Apple
   ones share a mark because they share a store, and their labels carry the difference. The
   glyph is inline SVG rather than an image file: the CSP-free part of the argument is that
   `www/` may name no external host, and an inline mark also needs no second request and
   inherits the button's own size. */
.btn--store { padding-left: 20px; }
.btn__glyph {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  margin-right: 2px;
}
/* The Apple mark is a single silhouette and takes the button's own ink (`currentColor`), where
   the Play mark is four fixed brand colours. It also reads small for its box, so it is sized up
   and nudged off the baseline by eye. */
.btn__glyph--apple {
  width: 1em;
  height: 1.25em;
  margin-top: -2px;
}

.soon {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  width: min(420px, 100%);
}
/* `display: flex` above would beat the browser's `[hidden] { display: none }` and
   leave the form permanently visible — the one bug this rule exists for. */
.soon[hidden] { display: none; }
.soon--open { display: flex; }

.soon__row {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}

.soon input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: inherit;
  font: inherit;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.soon input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 12%, transparent);
}

.soon__hint,
/* The file links, under both buttons. A paragraph rather than a span: it is its own line, it
   wraps on a narrow screen, and the separator has to be able to fall away with the second link
   rather than stranding a lone dot at the end of a line. */
.cta__files {
  font-size: var(--t--1);
  color: var(--muted);
  max-width: 34rem;
  line-height: 1.6;
}
/* The version requirement, under the two file links and subordinate to them. A phone too old for
   the file answers with a parse error that explains nothing, so this line is the only place a
   person can learn it before downloading 33 MB. It is a footnote to the links above rather than a
   second offer, so it gets a small gap and nothing else. */
.cta__needs {
  margin-top: .35rem;
}
/* A WORD, NOT A MIDDLE DOT. The dot was too faint to do the job: two green phrases with a pale
   grey speck between them read as one link with a stray mark in it, which is exactly how it was
   reported. "или" / "or" cannot be misread, so it does the separating at every width and the
   per-width special case that used to be here is gone with it. */
.cta__or {
  padding: 0 .1em;
  white-space: nowrap;
}

.soon__status {
  font-size: var(--t--1);
  color: var(--muted);
}
.soon__status[data-state="ok"] { color: var(--ink); }

/* ---------------------------------------------------------------- routes */

.routes {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}

.route {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  box-shadow: var(--shadow);
}

.route__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.route__title { font-weight: 600; font-size: var(--t-0); }
.route__tag {
  font-size: var(--t--1);
  color: var(--muted);
  white-space: nowrap;
}

.path {
  display: flex;
  align-items: center;
  gap: 0;
  font-size: var(--t--1);
}
.path__node {
  color: var(--ink-2);
  white-space: nowrap;
  padding: 5px 11px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--paper);
}
.path__node--start { border-style: dashed; color: var(--muted); }
.path__link {
  flex: 1;
  height: 1px;
  background: var(--line-2);
  min-width: 14px;
  position: relative;
}
.path__link::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -3px;
  width: 7px;
  height: 7px;
  border-top: 1px solid var(--line-2);
  border-right: 1px solid var(--line-2);
  transform: rotate(45deg);
}

.route--via .path__link { background: var(--signal); }
.route--via .path__link::after { border-color: var(--signal); }
.route--via .path__node--hop {
  border-color: var(--signal);
  color: var(--signal);
  background: var(--signal-soft);
}

.route__foot {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--line);
  color: var(--muted);
  font-size: var(--t--1);
}

@media (max-width: 640px) {
  .path { flex-direction: column; align-items: flex-start; gap: 0; }
  .path__link {
    width: 1px;
    height: 20px;
    flex: none;
    min-width: 0;
    margin-left: 18px;
  }
  .path__link::after { right: -3px; top: auto; bottom: -1px; transform: rotate(135deg); }
}

/* ---------------------------------------------------------------- two-up */

.cols {
  display: grid;
  gap: var(--sp-7) var(--sp-8);
  align-items: start;
}
@media (min-width: 860px) {
  .cols--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cols--wide-left { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}

.stack > * + * { margin-top: var(--sp-5); }

/* ---------------------------------------------------------------- the button demo */

.demo {
  display: flex;
  justify-content: center;
}

.phone {
  width: min(300px, 100%);
  border: 1px solid var(--line-2);
  border-radius: 30px;
  background: var(--surface);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  box-shadow: var(--shadow);
  text-align: center;
}

.phone__label {
  font-size: var(--t--1);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}

.dot {
  width: 66px;
  height: 66px;
  margin: var(--sp-6) auto var(--sp-5);
  border-radius: 50%;
  background: var(--line-2);
  position: relative;
  transition: background-color .35s ease;
}
.dot::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 1px solid transparent;
  transition: border-color .35s ease;
}
.phone[data-state="connecting"] .dot { background: var(--amber-dot); }
.phone[data-state="connecting"] .dot::after {
  border-color: color-mix(in srgb, var(--amber-dot) 45%, transparent);
  animation: ring 1.5s ease-out infinite;
}
.phone[data-state="on"] .dot { background: var(--signal-dot); }
.phone[data-state="on"] .dot::after {
  border-color: color-mix(in srgb, var(--signal-dot) 40%, transparent);
}

@keyframes ring {
  0%   { transform: scale(.86); opacity: .9; }
  100% { transform: scale(1.18); opacity: 0; }
}

.phone__state {
  font-family: var(--f-display);
  font-size: var(--t-2);
  letter-spacing: -.015em;
  min-height: 1.3em;
}
.phone__hint {
  margin-top: var(--sp-2);
  font-size: var(--t--1);
  color: var(--muted);
  min-height: 2.6em;
}

.switch {
  margin-top: var(--sp-5);
  width: 100%;
  padding: 12px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-weight: 550;
  cursor: pointer;
}
.switch:hover { background: var(--paper-2); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .dot, .dot::after { transition: none; animation: none; }
}

/* ---------------------------------------------------------------- steps */

.steps {
  counter-reset: step;
  display: grid;
  gap: var(--sp-6);
  margin-top: var(--sp-7);
}
@media (min-width: 860px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-7); }
}

.step { counter-increment: step; }
.step__n {
  font-family: var(--f-display);
  font-size: var(--t-1);
  color: var(--signal);
  display: block;
  margin-bottom: var(--sp-3);
}
.step__n::before { content: counter(step, decimal-leading-zero); }
.step h3 { font-size: var(--t-1); margin-bottom: var(--sp-3); }
.step p { color: var(--muted); font-size: var(--t--1); line-height: 1.65; }

/* the system permission sheet, drawn rather than screenshotted — this is where
   first-run users stop, so they need to recognise it before they meet it */
.sheet {
  margin-top: var(--sp-5);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  max-width: 320px;
  box-shadow: var(--shadow);
}
.sheet__body {
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  text-align: center;
}
.sheet__title {
  font-weight: 600;
  font-size: var(--t-0);
  line-height: 1.3;
}
.sheet__text {
  margin-top: var(--sp-2);
  font-size: var(--t--1);
  color: var(--muted);
  line-height: 1.45;
}
.sheet__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
}
.sheet__actions span {
  padding: 11px 8px;
  text-align: center;
  font-size: var(--t--1);
  color: var(--muted);
}
.sheet__actions span + span {
  border-left: 1px solid var(--line);
  color: var(--signal);
  font-weight: 600;
}
.sheet__caption {
  margin-top: var(--sp-3);
  font-size: var(--t--1);
  color: var(--muted);
}

/* ------------------------------------------------------- how it opens */

.ways {
  display: grid;
  gap: var(--sp-5);
  margin-top: var(--sp-7);
}
@media (min-width: 760px) {
  .ways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.way {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
}
.way--lead { border-color: var(--line-2); }

.way__name {
  font-family: var(--f-display);
  font-size: var(--t-2);
  letter-spacing: -.015em;
}
.way__days {
  margin-top: var(--sp-4);
  font-size: var(--t-3);
  font-family: var(--f-display);
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}
.way__days small {
  font-family: var(--f-text);
  font-size: var(--t--1);
  color: var(--muted);
  letter-spacing: 0;
  margin-left: 6px;
}
.way__alt {
  margin-top: var(--sp-2);
  font-size: var(--t--1);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.way ul { margin-top: var(--sp-5); display: grid; gap: var(--sp-3); }
.way li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: var(--sp-3);
  font-size: var(--t--1);
  color: var(--ink-2);
  line-height: 1.55;
}
.way li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signal-dot);
  margin-top: .52em;
}
.way li.is-off { color: var(--muted); }
.way li.is-off::before { background: none; border: 1px solid var(--line-2); }

.way__foot {
  margin-top: auto;
  padding-top: var(--sp-5);
  font-size: var(--t--1);
  color: var(--muted);
}

.note {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
  font-size: var(--t--1);
  color: var(--ink-2);
  max-width: 62ch;
}

/* ---------------------------------------------------------------- faq */

.faq { margin-top: var(--sp-6); border-top: 1px solid var(--line); }
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  padding: var(--sp-5) 34px var(--sp-5) 0;
  cursor: pointer;
  list-style: none;
  font-weight: 550;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq p {
  padding: 0 var(--sp-6) var(--sp-5) 0;
  color: var(--muted);
  max-width: 68ch;
  font-size: var(--t--1);
  line-height: 1.7;
}
.faq p + p { padding-top: 0; margin-top: calc(var(--sp-3) * -1); }

/* ---------------------------------------------------------------- contact */

.contact {
  display: grid;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}
@media (min-width: 760px) {
  .contact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-5);
  background: var(--surface);
}
.card h3 { font-size: var(--t-1); margin-bottom: var(--sp-2); }
.card p { font-size: var(--t--1); color: var(--muted); }
.card a { font-weight: 550; }

/* ---------------------------------------------------------------- footer */

.foot {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-block: var(--sp-7) var(--sp-8);
  font-size: var(--t--1);
  color: var(--muted);
}
.foot__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-5);
  align-items: center;
  justify-content: space-between;
}
.foot nav { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-5); }
.foot nav a { display: inline-block; padding-block: 9px; }
.foot a { color: var(--muted); }
.foot a:hover { color: var(--ink); }
.foot__legal { margin-top: var(--sp-5); max-width: 62ch; line-height: 1.6; }

/* ---------------------------------------------------------------- legal pages */

.doc { padding-block: var(--sp-8) var(--sp-9); }
/* "Конфиденциальность" is one 18-character word and it is wider than a 320px phone at this
   size. Nothing else on the site has a token that long, so the page looked fine everywhere
   except the one URL Apple's reviewer opens on a device: the whole document picked up a
   horizontal scroll from a single heading. Let it break rather than push the viewport. */
.doc h1 { font-size: var(--t-4); max-width: 20ch; overflow-wrap: break-word; hyphens: auto; }
.doc__meta { margin-top: var(--sp-4); color: var(--muted); font-size: var(--t--1); }
.doc h2 {
  font-size: var(--t-2);
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-4);
  max-width: 26ch;
}
.doc h3 {
  font-size: var(--t-1);
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-3);
}
.doc p, .doc li { max-width: 68ch; color: var(--ink-2); line-height: 1.7; }
.doc p + p { margin-top: var(--sp-4); }
.doc ul { margin-top: var(--sp-4); display: grid; gap: var(--sp-3); }
/* A list has a margin above it and nothing below, so prose resuming after one used to sit
   flush against the last bullet — visible on the privacy page since it shipped, and on every
   step-by-step list of the support page. Slightly wider than paragraph-to-paragraph, because
   this transition is a level change and not just a new sentence. */
.doc ul + p, .doc ol + p { margin-top: var(--sp-5); }
.doc ul li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: var(--sp-3);
}
.doc ul li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--line-2);
  margin-top: .62em;
}
.doc__toc {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.doc__toc ol {
  counter-reset: toc;
  display: grid;
  font-size: var(--t--1);
}
.doc__toc li { counter-increment: toc; }
.doc__toc a { padding-block: 7px; }
.doc__toc li::before {
  content: counter(toc) ". ";
  color: var(--muted);
}

/* The real size of a downloadable file, filled in by site.js from a same-origin HEAD.
   Empty until it answers and empty if it never does, so it must not reserve space or
   draw punctuation of its own — an empty muted span is invisible, which is correct. */
.dl-size {
  display: inline;
  color: var(--muted);
}